Таблицы
В 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 через пробел.
|
|
|
|||||
|
|
|
|||||