Продолжаем рассматривать новшества 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>
