Тег <table> позволяет сделать таблицу в HTML, то есть представить данные в табличном виде, состоящем из строк и столбцов, а также ячеек, содержащих данные. В ячейках можно разместить любую информацию: текст, изображения, видео и т.д. Таблицы имеют множество настроек границ и ячеек: цвета и прозрачность, группировка ячеек и столбцов, ширина, высота, отступы и т.д.
Самая простая таблица
Самую простую таблицу можно составить из трех тегов: table, tr, td. tr – определяет строку, а td – ячейку. По умолчанию содержимое td элементов выравнивается влево.
Ниже показан пример такой таблицы. Из стилизации применено только атрибут border, чтобы сделать рамку, и строка-заголовок выделена жирным.
See the Pen
table простой пример by Андрей (@adlibi)
on CodePen.
Атрибуты
- align
- Отвечает за выравнивание таблицы на странице(
left– по левому краю,right– по правому,center– по центру). Пример:<table align="left">. - background
- определяет фоновый рисунок
- bgcolor
- Применяется для создания фона, например:
<table bgcolor="red">(фон красный). - border
- Устанавливает границы таблицы
- bordercolor
- цвет границ
- cellpadding
- Создает отступы в таблице между краями ячеек и их содержимым. Пример: <table cellpadding=”4″>.
- cellspacing
- расстояние между границами ячеек
- cols
- Задает количество столбцов в таблице, ускоряя ее отображение в браузере.
- frame
- определяет, как отображать границы
- height
- высота таблицы
- rules
- где отображать границы между разными видами ячеек
- summary
- кратко описывает таблицу или ее предназначение. Признан устаревшим для HTML5.
- width
- Сообщает ширину таблицы браузеру
Теги и разделы
Приведем различные теги, применяемые при создании таблиц.
<caption> – название таблицы. На примере выделен красным цветом.
See the Pen
table caption by Андрей (@adlibi)
on CodePen.
<th> – заголовочная ячейка. Должна помещаться внутри <tr>. Обычно по умолчанию ее содержимое выделяется браузером жирным и центрируется. На примере первая строка оформлена через теги th.
See the Pen
table th by Андрей (@adlibi)
on CodePen.
<thead>– группирует содержимое заголовочной части таблицы.<tbody>– группировка основного контента.<tfoot>-группирует футер (нижнюю часть).
На примере есть все эти 3 раздела. У первого задан цвет содержимого красный, у второго – синий, у третьего – зеленый.
See the Pen
table head foot by Андрей (@adlibi)
on CodePen.
Группировка столбцов
<colgroup> и <col> – позволяют задавать параметры для нескольких колонок сразу, что приводит к уменьшению кода и более ранней отрисовке элемента. При этом <colgroup> как раз позволяет устанавливать такие общие свойства, а <col> применяется внутри него, чтобы задать для колонки отличающиеся от общих свойства. <colgroup> разрешается использовать как одиночный тег, если он не содержит внутри себя тегов <col>. Их работу проще всего понять на примере. Мы задали для первых 2-х столбцов один цвет фона, а для следующего (третьего) – другой.
See the Pen
table colgroup by Андрей (@adlibi)
on CodePen.
Атрибут span для тега col позволяет установить количество колонок, к которым будут применяться параметры.
Объединение ячеек таблицы
Чтобы объединить две или более ячейки по вертикали в одну используйте атрибут colspan.
На примере ниже мы объединили во второй строке 2 столбца, применив <td colspan="2" и выделив их для наглядности желтым.
See the Pen
table colspan by Андрей (@adlibi)
on CodePen.
Для объединения ячеек по вертикали используйте rowspan. Ниже пример такого объединения с использованием атрибута <td rowspan="2".
See the Pen
table rowspan by Андрей (@adlibi)
on CodePen.
Табличная верстка в CSS
Нужно сказать, что применение табличных тегов HTML становится все реже в пользу применения инструкций CSS. В CSS верстка таблиц возможно с помощью специального свойства display, имеющего значения, полностью имитирующие различные элементы таблицы: ячейки, столбцы, заголовки и т.д. Кроме того существует мощный способ компоновки элементов CSS Flexbox, позволяющий выстраивать элементы в виде сетки. Все это позволяет при желании отказаться от тега table.