HTML. Создание таблиц

Создание таблиц в html. Теги, описывающие строки, ячейки и другие элементы таблиц. Заголовки и объединение ячеек. Применение основных атрибутов. Примеры.

Предисловие

Для проведения экспериментов по созданию таблиц в html, используйте файл test.html.

По умолчанию, таблицы в браузерах отображаются без границ, а нам они очень нужны для наглядности. Вставьте в тестовый файл перед закрывающим тегом </head> следующий блок стилей, задающий серую границу (border) элементам таблицы:

Еще я добавил цвет фона ячеек (background), такой же, как в таблицах на этой странице. Ниже строки «После этой строки будем писать контент и вставлять тестируемый код» можно проводить эксперименты с html-таблицами.

Создание таблиц в html

Для создания html-таблицы достаточно четырех основных тегов:

Тег Описание
<table></table> Контейнер таблицы
<tr></tr> Строка таблицы
<th></th> Ячейка с заголовком
<td></td> Ячейка с контентом

Если форматировать заголовки вручную, то можно обойтись без тега <th></th>, но его использование сокращает время разработки и заполнения таблиц. Даже по умолчанию браузеры применяют к заголовкам отдельное форматирование. В этом вы можете убедиться, экспериментируя с кодом таблиц в файле test.html, если удалите блок стилей.

Таблица из одной строки

Таблица из одной строки, состоящей из пяти ячеек с контентом:

Результат:

Ячейка1 Ячейка2 Ячейка3 Ячейка4 Ячейка5

Таблица с заголовками

Таблица из 16 ячеек с горизонтальной шапкой (с заголовками столбцов):

Результат:

Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка

Таблица из 16 ячеек с вертикальной шапкой (с заголовками строк):

Результат:

Заголовок 1 Ячейка Ячейка Ячейка
Заголовок 2 Ячейка Ячейка Ячейка
Заголовок 3 Ячейка Ячейка Ячейка
Заголовок 4 Ячейка Ячейка Ячейка

Размер таблицы и ячеек

По умолчанию браузер подбирает ширину и высоту ячеек в зависимости от их содержимого. Кроме того, ширину и высоту ячеек можно регулировать с помощью атрибутов width и height.

Ширина столбца всегда равна ширине самой широкой ячейки. Высота строки всегда равна высоте самой высокой ячейки.

Ширина таблицы и ячейки

За ширину таблицы и ячейки отвечает атрибут width. Он может быть задан в пикселях или процентах.

Если атрибут width таблицы задан в процентах, это означает, что ширина таблицы будет составлять указанный процент от ширины контейнера, в котором она расположена (обычно, это тело документа — <body></body>.

Если атрибут width ячейки задан в процентах, это означает, что ширина ячейки будет составлять указанный процент от ширины таблицы.

Код задающий ширину таблицы:

Код задающий ширину ячейки:

Этот же код применим и к тегу <th>.

Высота ячейки (строки)

За высоту ячейки отвечает атрибут height. Он задается только в пикселях.

Код задающий высоту ячейки и, соответственно, всей строки:

Этот же код применим и к тегу <th>.

Пример

Пример таблицы с шириной 80% от ширины веб-страницы со вторым столбцом шириной 50% от ширины таблицы и с высотой третьей строки — 100px:

Результат:

Заголовок Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка

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

За объединение ячеек в таблице html отвечают атрибуты colspan (объединение столбцов) и rowspan (объединение строк).

Объединение двух ячеек в одной строке (объединение столбцов):

Результат:

Объединенная ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка

Объединение трех ячеек в одном столбце (объединение строк):

Результат:

Объединенная ячейка Ячейка Ячейка
Ячейка Ячейка
Ячейка Ячейка

Объединение четырех смежных ячеек в центре таблицы:

Результат:

Ячейка Ячейка Ячейка Ячейка
Ячейка Объединенная ячейка Ячейка
Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка

Пример шапки таблицы с объединенными ячейками:

Результат:

Наименование Производитель Лицензия
Серия и номер Срок действия
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка

Теги html-таблицы

Все теги html-таблицы, включая основные, перечисленные в начале статьи:

Тег Описание
<table> Контейнер таблицы
<th> Ячейка с заголовком
<tr> Строка таблицы
<td> Ячейка с контентом
<caption> Заголовок таблицы
<colgroup> Группа из одного или нескольких столбцов таблицы для отдельного форматирования
<col> Элемент, задающий форматирование для каждого из столбцов группы <colgroup>, непарный тег
<thead> Контейнер для заголовков (шапки) таблицы
<tbody> Контейнер для тела таблицы
<tfoot> Контейнер для футера (нижнего колонтитула) таблицы

Изначально задумывалось, что таблица будет состоять из трех основных блоков: заголовок, тело и футер. Но такая разметка не прижилась: футер вообще не используется, а вот заголовок и тело встречаются довольно часто. Да и я их зачем-то до сих пор использую.

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.