Краткий курс HTML 5

В HTML есть мощный инструмент отображения информации, структурированной в виде таблиц. Для этой цели предусмотрен десяток структурных тегов. Простейшая таблица состоит из элемента <table>, включающего по одному или несколько элементов <tr>, <th> и <td>.

<table border="1">
   <caption>Выписка лицевого счета</caption>
   <tr>
      <th>Месяц</th>
      <th>Баланс</th>
   </tr>
   <tr>
      <td>Январь</td>
      <td>500 грн.</td>
   </tr>
</table>

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

Элементы <th> обозначают ячейки с заголовками столбцов или строк. Содержимое их по умолчанию отображается браузерами жирным начертанием и центрируется. Тег <td> же предназначен для всех остальных ячеек с данными. Наличие заголовков <th> не является обязательным, но в таблице должна быть хотя бы одна строка с одной ячейкой.

С помощью атрибута border элемента <table> можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.

Объединение ячеек

Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов <td> и <th>. Присвоив ячейке атрибут colspan="3", вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента <td> (или <th>) меньше.

Объединение ячеек в таблице

Аналогично, атрибут rowspan="2", например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе <tr> пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.

Группирование строк и столбцов

Еще 5 тегов предназначены для объединения строк и столбцов в группы. Это необходимо, когда, например, одна ячейка заголовка соответствует нескольким столбцам с данными или, скажем, последняя строка таблицы содержит итоговые значения, лексически выделяясь на фоне остальных строк.

Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент <thead>. Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент <tfoot>. Наконец, все остальные строки с данными группируются в одном или нескольких элементах <tbody>. Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из <tfoot> будут отображены последними, размещать сам элемент <tfoot> можно как после последнего, так и перед первым элементом <tbody> (после <thead>). В одной таблице может быть только по одному элементу <thead> и <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>, и не должно быть строк вне групп.

Для группирования столбцов применяется пустой тег <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> позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:

Элементы <td> и <th> поддерживают также атрибут headers, позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id, которые и надо перечислить в атрибуте headers через пробел.