4. Практические приемы создания таблиц в веб-страницах

4.1. Применение и оформление таблиц в html-документах.

Таблицы в html-документах занимают особое положение. Табличные средства позволяют применить самые разнообразные приемы упорядоче­ния информации на страицах сайтов: разбивать экран на нужное число ви­зу­альных фрагментов как по ширине страницы, так и по вертикали. В таб- лицах удобно фор­мировать ячейки определенных размеров и оформ­лять содержи­мое ячеек, вставляя в них текст и рисунки, с подписями и без них, использовать таблицы для ссылок на другие страницы и т.п..

Богатые средства работы с таблицами очень широко применяются для оформления сайтов, создаваемых на их основе. Удобство работы с таблицами состоит в простоте замены содержимого ячеек таблиц, пере­формирования таблиц в целом путем изменения числа строк и столбцов таблиц и их оформления.

Содержимое таблицы размещают внутри парного тега <table>. Действие атрибутов этого тега распространяется на все злементы таблицы: строки, столбцы, ячейки. Если таблица имеет общий заголовок, то после тега <table> вводят парный тег <caption>, помещая в него текст заголовка. Атрибут align для заголовка может иметь значения top или bottom (над или под таблицей). Атрибут border задает рамку как для всей таблицы, так и для всех ее ячеек. Он определяет толщину рамки, а атрибут bordercolor – цвет рамки.

Атрибуты background и bgcolor – задают соответственно фоновый рисунок для всей таблицы. Очень практичны атрибуты cellpadding и cellspacing. Первый – определяет зазор между содержимым ячеек таблицы и рамкой, второй – между ячейками. Также востребованы атрибуты тега <table>, определяющие свободное пространство слева и справа, а также сверху и снизу от таблицы в пикселах – hspace и vspase. Ширина таблицы задается атрибутом width в пикселах либо в % от ширины окна.

Для обозначегия структурных элементов таблицы, строк и столбцов, используют парные теги <tr> и <col>. Если таблица состоит из множества вложенных таблиц, как это обычно бывает при создании веб-страниц, то для их заголовков применяют парный тег <th>.

Обычно в html-документе таблицу создают в виде набора строк, состоящих из ячеек, представленных парными тегами <td>. Атрибуты

align (выравнивание по горизонтали), width (ширина ячейки), bgcolor (цвет фона в ячейке) могут задаваться как на уровне строки, так и на уровне отдельных ячеек.

В общем случае формат таблицы имеет следующий вид.

<table>…(атрибуты таблицы)>

<tr>…(атрибуты строки 1)>

<td>…(атрибуты ячейки 1) (содержимое ячейки 1) </td>

………………………………………………………………..

<td>…(атрибуты ячейки N) (содержимое ячейки 1) </td>

</tr>

<tr>…(атрибуты строки 2)>

<td>…(атрибуты ячейки 1) (содержимое ячейки 1) </td>

………………………………………………………………..

<td>…(атрибуты строки N)> ) (содержимое ячейки 1) </td>

</tr>

………………………………………………………………..

<tr>…(атрибуты строки K)>

<td>…(атрибуты ячейки 1) (содержимое ячейки 1) </td>

………………………………………………………………..

<td>…(атрибуты ячейки N) (содержимое ячейки 1) </td>

</tr>

</table>

Аналогичным образом можно создать в html-документе таблицу на основе столбцов <col>, то есть, когда она представлена как последо­ватель­ность столбцов, ячейками которых являются элементы строк. Для тега col> действуют те же атрибуты, что и для тега <table>, то есть ширина столбца, цвет фона, способ горизонтального выравнивания в ячейках. Кроме того для него применяют атрибут valign (вертикальное выравнивание содержи­мого ячеек в столбце), который может иметь значение middle (посередине) и top (сверху) и атрибут ID, которому присваивается имя ссылки.

Для упрощения создания таблиц, в которых ее элементы логически связаны, применяют парный тег <Tbody> для создания логически свя­зан­ных групп строк и парный тег <Colgroup> для формирования строк табли­цы. Атрибуты, действующие для указанных тегов, те же, что и для тегов столбцов и тегов строк соответственно, но в дополнение, тег Colgroup имеет атрибут <Span>, где устанавливается количество столбцов в группе. Весьма полезен атрибут Colspan, задающий количество ячеек, объеди­ня­емых по горизонтали, и Rowspan, задающий количество ячеек, объеди­ня­емых по вертикали.