Тег th
Тег th задает ячейку-заголовок HTML таблицы. Существует также тег td, который задает обычную ячейку таблицы.
Разница между td и th : первый — это обычная ячейка, а второй — это ячейка-заголовок. Пример: Иванов, Петров, Сидоров — это обычные ячейки, а фамилия — это ячейка-заголовок.
По умолчанию текст в ячейке-заголовке стоит по центру и жирный. Это поведение можно поменять с помощью CSS свойств text-align и font-weight .
Для выравнивания можно также воспользоваться атрибутом align . Он считается устаревшим, однако до сих пор работает во всех браузерах (лучше, конечно же, пользоваться CSS).
Тег по умолчанию не блочный и не строчный, а ведет себя как ячейка таблицы. Подробнее см. свойство display.
Пример
Давайте создадим таблицу с ячейками th и td :
| Имя | Фамилия | Зарплата |
|---|---|---|
| Иван | Иванов | 200$ |
| Николай | Сидоров | 1000$ |
table, td, th < border: 1px solid black; >
Смотрите также
- теги thead , tbody и tfoot ,
которые группируют ряды таблицы - тег caption ,
который задает заголовок всей таблицы - свойство vertical-align ,
которое задает выравнивание текста по вертикали - атрибуты rowspan и colspan ,
которые объединяют ряды и столбцы таблицы
В чём разница между HTML-тегами и ?
Много лет назад тег td использовался для вёрстки сайтов, что не является его прямым назначением. А с ростом популярности CSS идея « таблицы — это плохо » укоренилась в мозгах многих разработчиков. Но это совсем не так — таблицы плохи только тогда, когда их используют не по назначению. То есть не для отображения табличных данных: электронных таблиц, календарей, и т.д. Если вам необходимо вставить на страницу подобные данные, не стоит сомневаться — смело используйте HTML-таблицы .
Что такое тег ?
HTML тег td расшифровывается как table data (« табличные данные »). Он создаёт ячейки в определённом ряду таблицы. Именно в этот тег необходимо вставлять текст и изображения.
Что такое тег ?
Большинство браузеров отображают текст в такой ячейке жирным шрифтом и выравнивают его по центру. Конечно, для оформления заголовков таблицы и содержимого ячеек можно и нужно использовать CSS .
Когда стоит использовать , а не ?
Тэг ( а не теги tr и td ) используется для установки содержимого ячейки заголовком определённой колонки или ряда.
Заголовки таблицы обычно расположены по верхнему или левому краю таблицы — в верхнем ряду как заголовки колонки или в первой колонке слева как заголовки ряда. Ячейки-заголовки показывают, что за содержимое расположено в таблице рядом или под ними, облегчая восприятие таблицы.
Не используйте для оформления ячеек. Поскольку браузеры обычно меняют внешний вид ячеек-заголовков, некоторые веб-дизайнеры пользуются этой особенностью для выделения и центровки шрифта. Так не следует делать сразу по нескольким причинам:
- Нельзя полагаться на то, что все браузеры будут отображать ваш контент одинаково. Будущая версия браузера может поменять цвет, используемый по умолчанию или вообще перестать выделять содержимое тега . Поэтому никогда не стоит полагаться на встроенные стили браузеров и использовать данный HTML-элемент ;
- Это семантически неправильно. Некоторые пользовательские агенты могут читать голосом содержимое таблиц и добавлять « заголовок таблицы: ваш текст » при встрече с ячейкой . Кроме этого некоторые веб-приложения могут размещать заголовки по верхней кромке страницы. Это станет проблемой, если ячейка не является заголовком, а используется исключительно для оформления.
Использование неподходящих тегов может ограничить доступность вашего контента для многих пользователей. Особенно для тех, кто использует различные вспомогательные устройства.
Для оформления ячеек следует применять CSS . Разделение стиля ( CSS ) и структуры ( HTML тег td ) — общепринятый метод веб-дизайна уже много лет. Повторим ещё раз: используйте потому, что содержимое ячейки — заголовок, а не потому, что вам нравится, как это по умолчанию отображает ваш браузер.
HTML тег
HTML тег используется для создания заголовочной ячейки в HTML таблице. Он размещается внутри парного тега , который, в свою очередь, находится в теге .
Тег может содержать изображения, текст, формы, ссылки и другие HTML элементы, которые можно поместить в тело документа. Размер таблицы корректируется автоматически на основе ее содержимого.
Содержимое тега по умолчанию отображается жирным шрифтом и выравнивается по центру. Для изменения внешнего вида содержимого можно использовать CSS стили.
Обратите внимание, что все строки таблицы содержат одинаковое количество ячеек, которое соответствует количеству ячеек самой длинной строки. Если в одной строке содержится меньше ячеек, чем в других строках, то браузер автоматически заполнит строку, помещая пустые ячейки в конец этой же строки.
Если вам необходимо подчеркнуть, что данные в других ячейках отсутствуют, создайте ячейку без содержимого в необходимом месте.
Добавленные браузером ячейки не имеют рамок, и если они находятся друг за другом, то будут отображаться в виде одной объединенной ячейки.
Синтаксис
table> tr> th>. th> tr> table>Пример
html> html> head> title>Заголовок документа title> style> th, td < padding: 10px; border: 1px solid #666; > style> head> body> table style="width:80%; margin:30px auto; border-collapse:collapse;"> tr style="background-color:#1c87c9; color:#fff;"> th>Месяц th> th>Дата th> tr> tr> td>Июнь td> td>18.07.2018 td> tr> table> body> html>Результат
Пример
html> html> head> title>Заголовок документа title> style> th, td < padding: 10px; border: 1px solid #666; > style> head> body> table style="width:80%; margin:30px auto; border-collapse:collapse;"> tr style="background-color:#1c87c9; color:#fff;"> th colspan="2">Месяц и дата th> tr> tr> td>Июнь td> td>18.07.2014 td> tr> table> body> html>Результат
В этом примере значение атрибута colspan равно «2». Это означает, что ячейка заголовка должна охватывать два столбца.
Атрибуты
| Атрибут | Значение | Описание | |
|---|---|---|---|
| abbr | text | Определяет сокращенный вариант содержимого ячейки, либо выступает в роли альтернативного текста. В браузере применение атрибута не отображается, но он может быть использован, например, для чтения с экрана или в работе скриптов. | |
| align | left right center |
Устанавливает выравнивание содержимого ячейки. Не поддерживается в HTML5. |
|
| axis | category_name | Определяет назначение категории ячейки заголовка. Не поддерживается в HTML 5. |
|
| background | background | Задает фоновый рисунок в ячейке. Не поддерживается в HTML 5. |
|
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
Задает цвет фона ячейки таблицы. Не поддерживается в HTML 5. |
|
| bordercolor | bordercolor | Задает цвет рамки. Не поддерживается в HTML 5. |
|
| char | character | Выравнивает содержимое ячейки данных таблицы по заданному символу. Атрибут char используется только если атрибут align = «char». Не поддерживается в HTML 5. |
|
| charoff | number | Атрибут позволяет произвести выравнивание в ячейке данных с указанного в атрибуте символа вправо или влево. Атрибут charoff используется только, если атрибут align = «char». Не поддерживается в HTML 5. |
|
| colspan | number | Указывает положительное целое число, определяющее сколько столбцов будет в ячейке по горизонтали. Значение по умолчанию ‒ 1. | |
| headers | header_id | Указывает id одной или нескольких заголовок ячеек, которые определяются HTML тегом | . Атрибут не отображается в браузере, но может быть использован для чтения с экрана или в работе скриптов. |
| height | % pixels |
Задает высоту ячейки. Не поддерживается в HTML 5. |
|
| nowrap | nowrap | Запрещает перенос строк. Не поддерживается в HTML 5. |
|
| rowspan | number | Атрибут определяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1. | |
| scope | col colgroup row rowgroup auto |
Определяет связь ячейки простой таблицы с заголовками в речевых браузерах. Атрибут не отображается в браузере, но может быть использован, например, для чтения с экрана или в работе скриптов. | |
| sorted | reversed number reversed number number reversed |
Определяет направление сортировки столбца. Не поддерживается в HTML 5. |
|
| valign | top middle bottom baseline |
Выравнивает содержимое ячейки заголовка по вертикали. Не поддерживается в HTML 5. |
|
| width | % pixels |
Задает ширину ячейки данных. Не поддерживается в HTML 5. |
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Что такое th в html
abbr Короткий опис вмісту комірки. align Визначає вирівнювання вмісту комірки по горизонталі. axis групуються осередки пов’язані між собою схожою інформацією. background Задає фоновий малюнок в осередку. bgcolor Колір фону комірки. bordercolor Колір рамки. char Вирівнює вміст осередку по заданому символу. charoff Зміщує вміст комірки відносно заданого символу. colspan Об’єднує горизонтальні осередки. headers Дозволяє зв’язати елементи таблиці з заголовками в мовних браузерах. height Висота комірки. nowrap Забороняє перено рядків. rowspan Об’єднує вертикальні осередки. scope Дозволяє зв’язати осередку простий таблиці з заголовками в мовних браузерах. valign Вирівнювання вмісту осередку по вертикалі. width Ширина комірки.
Також для цього тега доступні універсальні атрибути і події .
Закриваючий тег
Чи не обов’язковий.
Приклад
HTML 4.01 IE Cr Op Sa Fx 6
Тег TH
| Браузер | Internet Explorer | Opera | Firefox | |||||
|---|---|---|---|---|---|---|---|---|
| Версія | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 |
| Підтримується | Так | Так | Так | Так | Так | Так | Так | Так |
Результат даного прикладу показаний на рис. 1.