Таблицы
В HTML есть мощный инструмент отображения информации, структурированной в виде таблиц. Для этой цели предусмотрен десяток структурных тегов. Простейшая таблица состоит из элемента <table>
, включающего по одному или несколько элементов <tr>
, <th>
и <td>
.
<table>
<caption>Выписка лицевого счета</caption>
<tr>
<th>Месяц</th>
<th>Баланс</th>
</tr>
<tr>
<td>Январь</td>
<td>500 грн.</td>
</tr>
</table>
Если необходимо отобразить описание таблицы, то его можно поместить в элемент <caption>
, располагаемый сразу за открывающим тегом <table>
. Далее последовательно располагаются строки таблицы, обозначаемые тегом <tr>
. Каждая строка содержит в себе ячейки <th>
или <td>
, формируя таким образом столбцы таблицы.
Элементы <th>
обозначают ячейки с заголовками столбцов или строк. Содержимое их по умолчанию отображается браузерами жирным начертанием и центрируется. Тег <td>
же предназначен для всех остальных ячеек с данными. Наличие заголовков <th>
не является обязательным, но в таблице должна быть хотя бы одна строка с одной ячейкой.
Объединение ячеек
Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan
и rowspan
элементов <td>
и <th>
. Присвоив ячейке атрибут colspan="3"
, вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента <td>
(или <th>
) меньше.
Объединение ячеек в таблице
Аналогично, атрибут rowspan="2"
, например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе <tr>
пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.
Группирование строк и столбцов
Еще 5 тегов предназначены для объединения строк и столбцов в группы. Это необходимо, когда, например, одна ячейка заголовка соответствует нескольким столбцам с данными или, скажем, последняя строка таблицы содержит итоговые значения, лексически выделяясь на фоне остальных строк.
Средний | Красноглазых | ||
---|---|---|---|
Размер | Вес | ||
Среднее | 1.8 | 0.0025 | 41.5% |
Самцы | 1.9 | 0.003 | 40% |
Самки | 1.7 | 0.002 | 43% |
Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент <thead>
. Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент <tfoot>
. Наконец, все остальные строки с данными группируются в одном или нескольких элементах <tbody>
. Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строка из <tfoot>
будет отображена последней, размещать сам элемент <tfoot>
необходимо до первого <tbody>
. В остальном, эти теги не повлияют на визуальное отображение таблицы, пока вы не определите для этого стили CSS.
Приведенный выше пример таблицы формируется приблизительно таким кодом:
<table class="datatbl">
<col class="yellow"/>
<colgroup span="2"></colgroup>
<col class="red"/>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2" scope="colgroup">Средний</th>
<th rowspan="2" scope="col">Красноглазых</th>
</tr>
<tr>
<th scope="col">Размер</th>
<th scope="col">Вес</th>
</tr>
</thead>
<tfoot class="green">
<tr>
<th scope="rowgroup">Среднее</th>
<td>1.8</td>
<td>0.0025</td>
<td>41.5%</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Самцы</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<th scope="row">Самки</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody>
</table>
Если вы используете <thead>
или <tfoot>
, то должны использовать и <tbody>
. Причем в каждой из групп обязательно должна быть хотя бы одна строка <tr>
, и не должно быть строк вне групп. Кроме того, в элементе <thead>
для ячеек нельзя использовать <td>
, поскольку этот блок предназначен только для заголовков, а значит применять нужно <th>
.
Для группирования столбцов применяется пустой тег <col />
и парный <colgroup>
. В отличие от элементов, группирующих строки, эти теги размещаются сразу после элемента <caption>
или, если его нет, за открывающим тегом <table>
. Они не включают в себя ячейки, а лишь указывают на объединяемые столбцы. Оба тега поддерживают атрибут span
, значением которого является количество группируемых столбцов. Если span
не указан, то он считается равным единице.
На самом деле, <col />
не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData"
, достаточно добавить в начало таблицы элемент:
<col span="2" class="myData" />
<colgroup>
позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент <colgroup>
помещается необходимое количество тегов <col />
. При этом атрибут span
указывается только в них, а его значение для <colgroup>
определяется автоматически, как сумма значений span
, присвоенных расположенным внутри элементам <col />
. Другие теги в <colgroup>
запрещены.
Размещая последовательно несколько элементов <col />
и/или <colgroup>
в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second
и myGroup
соответственно, то выглядеть это будет следующим образом:
<col />
<colgroup>
<col class="second" />
<col class="myGroup" />
</colgroup>
<col span="2" />
Атрибут scope
элемента <th>
позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:
col | — ячейка является заголовком столбца |
row | — ячейка является заголовком строки |
colgroup | — ячейка является заголовком группы столбцов, в которой находится |
rowgroup | — ячейка является заголовком группы строк, в которой находится |
Элементы <td>
и <th>
поддерживают также атрибут headers
, позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id
, которые и надо перечислить в атрибуте headers
через пробел.
|
|
|||||
|
|