Skip to content

Неделя HTML5 - Таблицы

Продолжаем рассматривать новшества HTML5. Сегодня в уроке вы узнаете, какие новые теги позволят улучшить таблицы.

Таблицы

Давайте создадим новый HTML5 документ, в который будем записывать код из данного урока. А в него вставим таблицу:

<table>
...
</table>

Да, тег для создания таблицы не изменился. Теперь рассмотрим новые теги для таблиц.

Заголовок таблицы

Тег <caption> будет являться заголовком таблицы, но в том случае, если его прямой родитель и есть данная таблица:

<table>
<caption>Заголовок таблицы</caption>
...
</table>

На данном примере видно, что в DOM-дереве у тега caption прямой родитель (элемент, в котором находится данный тег) — таблица (table). Тогда caption и будет являться заголовком таблицы.

Делим таблицу на колонки

Если раньше для объединения колонок использовали атрибут colspan, притом его надо было добавлять каждой ячейке таблицы, то теперь в этом нет необходимости. Ведь теперь появились 2 тега <colgroup> и <col>. Как ими пользоваться:

  • Тег <colgroup> должен находиться в таблице
  • Теги <col> должны находиться в теге <colgroup>
  • Чтобы объединить колонки, надо добавить атрибут span тегу <col>
  • Так же если прописывать стили для нужной колонки, то они будут распространяться на ячейки, которые находятся в данной колонке

Пример, создадим табличку из 2-х строк по 4 ячейки в каждой и объединим последние 3 ячейки в каждой строке в одну колонку. Вот код реализации данного примера:

<table>
<caption>Animals on our farm</caption>
<colgroup>
<col class="column1" />
<col class="column2-4" span="3" />
</colgroup>
<tr>
<th>dog</th>
<th>cat</th>
<th>horse</th>
<th>iguana</th>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>10</td>
<td>500</td>
</tr>
</table>

Делим таблицу на части

Мы научились делить таблицы на вертикальные колонки, теперь научимся ее делить на горизонтальные части, для шапки, данных и подвала таблицы.

<thead>: представляет собой блок из рядов и/или ячеек, в которых находятся заголовки колонок.

<tbody>: это блок из строк и ячеек в которых занесены те или иные данные.

<tfoot>: как и thead, это блок из рядов и/или ячеек, но в них находятся итоги.

Вот пример такой таблицы

<table>
<thead>
<tr>
<th scope="col">Header 1</th>

<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tfoot>

<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>

</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>

<td>Cell 3</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>

<td>Cell 9</td>
</tr>
...
</tbody>
</table>

Немного о ячейках

Помимо простых ячеек <td>, в HTML5 появился специальный тег для ячейки-заголовка — <th>. Вы могли его увидеть в предыдущем примере. Такие ячейки можно использовать как в thead, так и в простых строках в tbody.

Заключение

На данном моменте мы остановимся. Если вы внимательно выполнили шаги по созданию таблицы, то у вас должен получиться примерно такой код:

<table>
<caption>Animals on our farm</caption>
<colgroup>
<col class="column1" />
<col class="column2-4" span="3" />
</colgroup>
<thead>
<tr>
<th>dog</th>
<th>cat</th>
<th>horse</th>
<th>iguana</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>2</td>
<td>10</td>
<td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>10</td>
<td>4</td>
<td>20</td>
<td>1000</td>
</tr>
</tfoot>
</table>

Данная запись является частью серии "Неделя HTML5".

Неделя HTML5 - Азы

Неделя HTML5 - Встраиваемое содержание