Тег th (table header) - это незаменимый инструмент для создания выразительных заголовочных ячеек внутри табличной структуры HTML. Обратите внимание на его «умное» поведение: текст, помещенный внутрь, по умолчанию автоматически становится жирным и центрируется, что сразу придает таблице аккуратный и профессиональный вид без лишних усилий с вашей стороны.
Не ограничивайте себя простым текстом! Внутри th можно разместить практически любой контент: изображения, ссылки, формы или даже вложенные таблицы. Браузеры достаточно гибки и автоматически подберут оптимальный размер ячейки, чтобы содержимое отображалось корректно и без искажений.
Встречались с ситуациями, когда количество ячеек в разных строках не совпадает? Не волнуйтесь. Если в одной из строк меньше элементов, браузер лояльно «додумает» за вас недостающие пустые ячейки, добавив их в конец ряда. А если вам нужно намеренно оставить пустое место для обозначения отсутствия данных (например, в начале или середине строки), просто создайте ячейку без контента там, где это необходимо.
Примечание: стоит учитывать важный нюанс: автоматически сгенерированные браузером «заполняющие» ячейки не имеют собственных границ. Это означает, что несколько таких ячеек подряд визуально сольются в одну большую область, что может повлиять на восприятие структуры таблицы.
Ключевые атрибуты colspan:- Позволяет объединить ячейки по горизонтали. Укажите положительное целое число, и ваша заголовочная ячейка будет занимать заданное количество столбцов (по умолчанию значение равно 1).
headers:- Создает смысловую связь между текущей ячейкой и другими заголовками. В качестве значения указывается идентификатор или список идентификаторов (разделенных пробелами) тех заголовочных ячеек, с которыми она связана.
rowspan:- Аналогично
colspan, но работает по вертикали. Значение определяет, сколько строк будет занимать ячейка (по умолчанию - 1). scope:- Определяет область действия заголовка, что критически важно для доступности и семантики. Доступные значения:
- col - заголовок управляет всеми ячейками в этом столбце;
- colgroup - применим к группе соседних столбцов;
- row - охватывает все ячейки текущей строки;
- rowgroup - относится к группе строк.
Помимо перечисленных, тег th также поддерживает стандартные глобальные атрибуты HTML.
Пример использованияtable tr thМесяц/th thДоход/th /tr tr tdСентябрь/td td700р/td /tr /table