Создание таблиц в html. Теги, описывающие строки, ячейки и другие элементы таблиц. Заголовки и объединение ячеек. Применение основных атрибутов. Примеры.
Предисловие
Для проведения экспериментов по созданию таблиц в html, используйте файл test.html.
По умолчанию, таблицы в браузерах отображаются без границ, а нам они очень нужны для наглядности. Вставьте в тестовый файл перед закрывающим тегом </head> следующий блок стилей, задающий серую границу (border) элементам таблицы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> table, th, td { border: 1px solid gray; border-collapse: collapse; } th { background: #eaeaea; text-align: center; } td { background: #fff7ec; } </style> |
Еще я добавил цвет фона ячеек (background), такой же, как в таблицах на этой странице. Ниже строки «После этой строки будем писать контент и вставлять тестируемый код» можно проводить эксперименты с html-таблицами.
Создание таблиц в html
Для создания html-таблицы достаточно четырех основных тегов:
| Тег | Описание |
|---|---|
| <table></table> | Контейнер таблицы |
| <tr></tr> | Строка таблицы |
| <th></th> | Ячейка с заголовком |
| <td></td> | Ячейка с контентом |
Если форматировать заголовки вручную, то можно обойтись без тега <th></th>, но его использование сокращает время разработки и заполнения таблиц. Даже по умолчанию браузеры применяют к заголовкам отдельное форматирование. В этом вы можете убедиться, экспериментируя с кодом таблиц в файле test.html, если удалите блок стилей.
Таблица из одной строки
Таблица из одной строки, состоящей из пяти ячеек с контентом:
|
1 2 3 4 5 6 7 8 9 |
<table> <tr> <td>Ячейка1</td> <td>Ячейка2</td> <td>Ячейка3</td> <td>Ячейка4</td> <td>Ячейка5</td> </tr> </table> |
Результат:
| Ячейка1 | Ячейка2 | Ячейка3 | Ячейка4 | Ячейка5 |
Таблица с заголовками
Таблица из 16 ячеек с горизонтальной шапкой (с заголовками столбцов):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> <th>Заголовок 4</th> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
|---|---|---|---|
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка | Ячейка |
Таблица из 16 ячеек с вертикальной шапкой (с заголовками строк):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table> <tr> <th>Заголовок 1</th> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <th>Заголовок 2</th> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <th>Заголовок 3</th> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <th>Заголовок 4</th> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Заголовок 1 | Ячейка | Ячейка | Ячейка |
|---|---|---|---|
| Заголовок 2 | Ячейка | Ячейка | Ячейка |
| Заголовок 3 | Ячейка | Ячейка | Ячейка |
| Заголовок 4 | Ячейка | Ячейка | Ячейка |
Размер таблицы и ячеек
По умолчанию браузер подбирает ширину и высоту ячеек в зависимости от их содержимого. Кроме того, ширину и высоту ячеек можно регулировать с помощью атрибутов width и height.
Ширина столбца всегда равна ширине самой широкой ячейки. Высота строки всегда равна высоте самой высокой ячейки.
Ширина таблицы и ячейки
За ширину таблицы и ячейки отвечает атрибут width. Он может быть задан в пикселях или процентах.
Если атрибут width таблицы задан в процентах, это означает, что ширина таблицы будет составлять указанный процент от ширины контейнера, в котором она расположена (обычно, это тело документа — <body></body>.
Если атрибут width ячейки задан в процентах, это означает, что ширина ячейки будет составлять указанный процент от ширины таблицы.
Код задающий ширину таблицы:
|
1 2 |
<table style="width:100%"> <table style="width:800px"> |
Код задающий ширину ячейки:
|
1 2 3 4 5 6 |
<td style="width:25%"> <td style="width:150px"> или <td width="25%"> <td width="150px"> <td width="150"> |
Этот же код применим и к тегу <th>.
Высота ячейки (строки)
За высоту ячейки отвечает атрибут height. Он задается только в пикселях.
Код задающий высоту ячейки и, соответственно, всей строки:
|
1 2 3 |
<td style="height:100px"> <td height="100px"> <td height="100"> |
Этот же код применим и к тегу <th>.
Пример
Пример таблицы с шириной 80% от ширины веб-страницы со вторым столбцом шириной 50% от ширины таблицы и с высотой третьей строки — 100px:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table style="width:80%"> <tr> <th>Заголовок</th> <th width="50%">Заголовок</th> <th>Заголовок</th> <th>Заголовок</th> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td height="100">Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Заголовок | Заголовок | Заголовок | Заголовок |
|---|---|---|---|
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка | Ячейка |
Объединение ячеек в таблице
За объединение ячеек в таблице html отвечают атрибуты colspan (объединение столбцов) и rowspan (объединение строк).
Объединение двух ячеек в одной строке (объединение столбцов):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table> <tr> <td colspan="2">Объединенная ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Объединенная ячейка | Ячейка | |
| Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка |
Объединение трех ячеек в одном столбце (объединение строк):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <tr> <td rowspan="3">Объединенная ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Объединенная ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | |
| Ячейка | Ячейка |
Объединение четырех смежных ячеек в центре таблицы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td colspan="2" rowspan="2">Объединенная ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Объединенная ячейка | Ячейка | |
| Ячейка | Ячейка | ||
| Ячейка | Ячейка | Ячейка | Ячейка |
Пример шапки таблицы с объединенными ячейками:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table> <tr> <th rowspan="2">Наименование</th> <th rowspan="2">Производитель</th> <th colspan="2">Лицензия</th> </tr> <tr> <th>Серия и номер</th> <th>Срок действия</th> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> <tr> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> <td>Ячейка</td> </tr> </table> |
Результат:
| Наименование | Производитель | Лицензия | |
|---|---|---|---|
| Серия и номер | Срок действия | ||
| Ячейка | Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка | Ячейка |
Теги html-таблицы
Все теги html-таблицы, включая основные, перечисленные в начале статьи:
| Тег | Описание |
|---|---|
| <table> | Контейнер таблицы |
| <th> | Ячейка с заголовком |
| <tr> | Строка таблицы |
| <td> | Ячейка с контентом |
| <caption> | Заголовок таблицы |
| <colgroup> | Группа из одного или нескольких столбцов таблицы для отдельного форматирования |
| <col> | Элемент, задающий форматирование для каждого из столбцов группы <colgroup>, непарный тег |
| <thead> | Контейнер для заголовков (шапки) таблицы |
| <tbody> | Контейнер для тела таблицы |
| <tfoot> | Контейнер для футера (нижнего колонтитула) таблицы |
Изначально задумывалось, что таблица будет состоять из трех основных блоков: заголовок, тело и футер. Но такая разметка не прижилась: футер вообще не используется, а вот заголовок и тело встречаются довольно часто. Да и я их зачем-то до сих пор использую.