Тег 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 тег th
Тег определяет заголовочную ячейку HTML таблицы.
В HTML таблице может быть два вида ячеек:
- Заголовочная ячейка – содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента )
- Стандартные ячейка – содержит табличные данные (создается при помощи элемента )
По умолчанию, текст в элементе отображается жирным шрифтом и выравненным по центру.
По умолчанию, текст в элементе отображается обычным шрифтом и выравненным по левому краю.
Чтобы содержимое ячейки заняло несколько строк или столбцов, используйте атрибуты rowspan и colspan.
Разница между HTML 4.01 и HTML5
В HTML5 все репрезентативные атрибуты не поддерживаются.
Атрибуты тега
| Атрибут | Описание |
|---|---|
| abbr | Определяет краткое описание содержимого ячейки |
| align | Определяет горизонтальное выравнивание содержимого элемента th |
| axis | Определяет категории для содержимого ячеек |
| bgcolor | Определяет фоновый цвет элемента |
| char | Определяет символ выравнивания содержимого заголовочной ячейки |
| charoff | Определяет количество символов смещения |
| colspan | Определяет количество объединяемых ячеек по горизонтали |
| headers | Связывает заголовки таблицы с другими заголовками |
| height | Определяет высоту заголовочной ячейки |
| nowrap | Запрещает перенос на новую строку содержимого заголовочной ячейки |
| rowspan | Определяет количество ячеек по вертикали, на которые будет расширена заголовочная ячейка |
| scope | Определяет, является ли заголовочная ячейка заголовком для колонки, строки или группы колонок или строк |
| valign | Определяет вертикальное выравнивание содержимого заголовочной ячейки |
| width | Определяет ширину заголовочной ячейки |
Общие атрибуты
CSS стили по умолчанию
Большинство браузеров будут отображать тег со следующими стилями
HTML пример использования
Простая HTML таблица с двумя заголовочными ячейками и двумя ячейками данных:
Месяц Сэкономлено Январь $100
Таблицы (table, tr, td, th) в HTML
В статье будут рассмотрены несколько вопросов: как сделать HTML таблицу, как добавить строку и ячейку в таблицу, как объединить строки или ячейки в таблице.
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8 Ячейка 9
Код из этого примера отобразит на странице следующую стаблицу:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Довольно часто для задания первых строчек таблицы используется не
, а
. В таком случае весь текст в ячейках первой строчки таблицы будет выделен жирным и выравнен по центру.
Разберём атрибуты, которые указаны в примере таблицы:
cellspacing
cellspacing=»1″ — этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
cellpadding
cellpadding=»1″ — значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
border
border=»1″ — устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Рамки таблицы и ячеек можно скрыть совсем, если задать стиль style=»border-collapse: collapse;». Читайте подробнее об этом в курсе по CSS.
Высота и ширина таблицы
У тега
Попробуем задать таблице из примеры ширину в 300 пикселей, с помощью указания атрибута width=»300″
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Значение width можно задать в процентах от ширины родительского элемента, в котором находится таблица. К примеру, width=»50%»
Если задать height=»300″, то получится такой результат:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |