Перейти к содержимому
Наше приложение «Дешевые авиабилеты» в AppGallery >>

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> Контейнер для футера (нижнего колонтитула) таблицы

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