seodon.ru | Теги HTML — Тег TH
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <TH> применяется для создания заголовочных ячеек таблицы. В отличие от обычных ячеек (тег <TD>) — содержимое заголовочных браузеры располагают по центру ячеек и выводят текст полужирным шрифтом. В ячейках содержатся все данные таблицы. Спецификацией HTML допускается оставлять ячейки пустыми, но некоторые старые браузеры не отображают фон таких ячеек, даже если поставить в них пробел. Поэтому выходом будет указать в ячейке неразрывный пробел-мнемонику ( ). Если же необходимо сделать ее совсем маленькой, то можно вставить прозрачный рисунок с размером в один пиксель.
Атрибуты
Личные атрибуты:
- align — Задает положение содержимого ячейки по горизонтали.
- background — Устанавливает Фоновое изображение для ячейки.
- bgcolor — Устанавливает фоновый цвет.
- bordercolor — Цвет границы (рамки) ячейки.
- colspan — Указывает количество ячеек объединенных в одну по горизонтали.
- height — Задает рекомендуемую высоту ячейки.
- nowrap — Запрещает переносить строки.
- rowspan — Указывает количество ячеек объединенных в одну по вертикали.
- valign — Задает положение содержимого ячеек по вертикали.
- width — Рекомендуемая ширина.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: таблицы.
Модель тега: может располагаться внутри элемента <TR>.
Может содержать: block-теги и/или inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: не обязателен.
Синтаксис
<table>
<tr>
<th>содержимое</th>
</tr>
</table>Пример HTML: применение тега TH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Применение тега TH</title> </head> <body> <table border="1"> <tr> <th rowspan="2" bgcolor="#FFD700">Модель</th> <th colspan="2" bgcolor="gold">Двигатель</th> </tr> <tr><td>Мощность, л.c.</td><td>Объем, см<sup>3</sup></td></tr> <tr><td>Lamborghini Murcielago</td><td>640</td><td>6496</td></tr> <tr><td>Lamborghini Gallardo</td><td>500</td><td>4961</td></tr> </table> </body> </html>
Результат примера
Результат. Применение тега TH.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
| Справочник HTML
Элемент <th> (от англ. «table header» ‒ «заголовок таблицы») определяет заголовочную ячейку HTML таблицы. Элемент <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.
В HTML таблице может быть два вида ячеек:
- Заголовочная ячейка ‒ содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>). По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.
- Стандартная ячейка ‒ содержит табличные данные (создается при помощи элемента <td>). По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.
Содержимым элемента <th> может являться любой HTML-элемент, который можно поместить в тело документа: текст, формы, изображения, таблицы.
Примечание: Все строки таблицы содержат одинаковое количество ячеек, которое равно количеству ячеек самой длинной строки. Если в строке оказывается меньше ячеек, чем в других строках, то браузер автоматически помещает пустые ячейки в конец строки, таким образом заполняя ее. Если требуется разместить пустую ячейку в начале или середине строки, нужно создать ячейку без содержимого в нужном месте.
Обратите внимание, что ячейки, которые браузер добавляет автоматически, не имеют рамки, поэтому, если такие ячейки располагаются друг за другом, то они будут отображаться в виде одной объединенной ячейки.
Синтаксис
<table>
...
<tr>
...
<th> ... </th>
...
</tr>
...
</table>Закрывающий тег
Не обязателен.
Атрибуты
- abbrУстарел в HTML5
- Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
- alignУстарел в HTML5
- Указывает выравнивание содержимого ячейки по горизонтали:
left — выравнивание содержимого ячейки по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
justify — выравнивание по ширине (одновременно по правому и левому краю)
char — выравнивание по указанному символу - axisУстарел в HTML5
- Группирует ячейки связанные между собой похожей информацией.
- backgroundУстарел в HTML5
- Задаёт фоновый рисунок в ячейке.
- bgcolorУстарел в HTML5
- Назначает цвет фона ячейки.
- bordercolorУстарел в HTML5
- Устанавливает цвет рамки.
- charУстарел в HTML5
- Выравнивает содержимое ячейки по заданному символу.
Пример: <td char=»c» align=»char»>…</td> - charoffУстарел в HTML5
- Задает смещение содержимого ячейки относительно заданного символа.
- colspan
- Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.
- headers
- Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
- heightУстарел в HTML5
- Устанавливает высоту ячейки данных.
- nowrapУстарел в HTML5
- Запрещает перенос строк.
- rowspan
- Объединяет вертикальные ячейки.
- scopeУстарел в HTML5
- Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:
col — ячейка заголовка установлена для колонки
colgroup — ячейка заголовка установлена для группы колонок
row — ячейка заголовка задана для строки
rowgroup — ячейка заголовка установлена для группы строк - valignУстарел в HTML5
- Назначает выравнивание содержимого ячейки по вертикали:
top — выравнивание содержимого ячейки по верхнему краю строки
middle — выравнивание по середине
bottom — выравнивание по нижнему краю
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии - sortedОтсутствует в HTML 5.1
- Определяет направление сортировки столбца:
reversed — реверсивное направление сортировки столбца
number — указывает обычную последовательность столбцов
reversed number — указывает обратную последовательность столбцов
number reversed — указывает реверсивную последовательность столбцов - widthУстарел в HTML5
- Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <th> со следующими значениями CSS по умолчанию:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}Различия между HTML 4.01 и HTML5
В HTML 5 была прекращена поддержка 9 атрибутов и одного в 5.1.
Пример использования:
Пример HTML:
Попробуй сам <table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
Спецификации
Поддержка браузерами
| Элемент | ||||||
| <th> | 3+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <th> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как добавить рамку вокруг таблицы:
Граница таблицы
Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы
Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы
Ширина таблицы
Как объединить столбцы таблицы:
Объединение столбцов
Как создать заголовок таблицы:
Заголовок таблицы
Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц
Учебник HTML
HTML уроки: HTML Табицы
HTML Элементы
Тег | bookhtml.ru
Тег <th> — элемент языка html, используемый для создания заголовка таблицы и размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Ячейка заголовка таблицы имеет ширину всей таблицы. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
Пример написания:
<table>
<tr>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
Атрибуты тега <th>
abbr………………..Краткое описание содержимого ячейки.
align……………….Определяет выравнивание содержимого ячейки по горизонтали.
axis………………..Группирует ячейки связанные между собой похожей информацией.
background……..Задает фоновый рисунок в ячейке.
bgcolor……………Цвет фона ячейки.
bordercolor……….Цвет рамки.
char………………..Выравнивает содержимое ячейки по заданному символу.
charoff……………Смещает содержимое ячейки относительно заданного символа.
colspan……………Объединяет горизонтальные ячейки.
headers…………..Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
height…………….Высота ячейки.
nowrap……………Запрещает перенос строк.
rowspan…………..Объединяет вертикальные ячейки.
scope………………Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign………………Выравнивание содержимого ячейки по вертикали.
width………………Ширина ячейки.
Закрывающий тег не обязателен.
Язык HTML — это круто.
Тег TH
Тег TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег TH должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.
Синтаксис
<table>
<tr>
<th>…</th>
</tr>
</table>
Закрывающий тег
Не обязателен.
Параметры
align — определяет выравнивание содержимого ячейки по горизонтали.
background — задает фоновый рисунок в ячейке.
bgcolor — цвет фона ячейки.
bordercolor — цвет рамки.
colspan — объединяет горизонтальные ячейки.
height — высота ячейки.
nowrap — запрещает перенос строк.
rowspan — объединяет вертикальные ячейки.
valign — выравнивание содержимого ячейки по вертикали.
width — ширина ячейки.
Пример 1. Использование тега TH
<html>
<body><table border=0 cellpadding=7 cellspacing=0>
</body>
<tr>
<th colspan=2 bgcolor=#D3EDF6 align=center> … </th>
</tr>
<tr>
<td valign=top align=center> … </td>
<td valign=top> … </td>
</tr>
</table>
</html>
Описание параметров тега TH
Параметр ALIGN
Описание
Задает выравнивание содержимого ячейки по горизонтали.
Синтаксис
<th align=left | center | right>…</th>
Аргументы
left — выравнивание по левому краю;
center — выравнивание по центру;
right — выравнивание по правому краю;
Значение по умолчанию
left
Аналог CSS
text-align
Пример 2. Выравнивание содержимого ячейки
<html>
<body>
<table width=600 border=1>
<tr>
<th align=center> … </th>
<th align=center> … </th>
</tr>
</table>
</body>
</html>
Параметр BACKGROUND
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
<th background=URL>…</th>
Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.
Значение по умолчанию
Нет.
Аналог CSS
background-image
Пример 3. Фоновый рисунок для ячейки
<html>
<body>
<table width=600>
<tr>
<th background=/images/rules.gif> … </th>
</tr>
</table>
</body>
</html>
Параметр BGCOLOR
Описание
Устанавливает цвет фона ячейки.
Синтаксис
<th bgcolor=цвет>…</th>
Аргументы
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.
Аналог CSS
background-color
Пример 3. Цвет фона ячейки
<html>
<body text=white>
<table bgcolor=black width=600>
<tr>
<th bgcolor=#ffcc00> … </th>
</tr>
<tr>
<td> … </td>
</tr>
</table>
</body>
</html>
Параметр BORDERCOLOR
Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега TABLE.
Синтаксис
<th bordercolor=цвет>…</th>
Аргументы
См. параметр BGCOLOR.
Значение по умолчанию
Зависит от браузера и операционной системы.
Пример 4. Цвет границы вокруг ячейки
<html>
<body>
<table bordercolor=black border=1 width=100%>
<tr>
<th bordercolor=red> … </th>
<td> … </td>
</tr>
</table>
</body>
</html>
Параметр COLSPAN
Описание
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.
| ячейка 1 | |
| ячейка 2 | ячейка 3 |
Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек
В приведенной на рис.1 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.
Синтаксис
<th colspan=число>…</th>
Аргументы
Любое целое положительное число больше 2.
Значение по умолчанию
1
Пример 5. Объединение ячеек по горизонтали
<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr bgcolor=#FBF0DB>
<th colspan=2>ячейка 1</th>
</tr>
<tr>
<th>ячейка 2</th>
<th>ячейка 3</th>
</tr>
</table>
</body>
</html>
Параметр HEIGHT
Описание
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
Синтаксис
<th height=значение>…</th>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Высота вычисляется на основе содержимого ячейки.
Аналог CSS
height
Пример 6. Высота ячейки
<html>
<body>
<table cellpadding=10 bgcolor=#ffcc00 align=center width=100%>
<tr>
<th height=50> … </th>
</tr>
</table>
</body>
</html>
Параметр NOWRAP
Описание
Добавление параметра nowrap к тегу TH заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.
Синтаксис
<th nowrap>…</th>
Аргументы
Нет.
Значение по умолчанию
По умолчанию параметр nowrap не установлен.
Пример 7. Запрет переносов в ячейке
<html>
<body>
<table width=400>
<tr>
<th nowrap> … </th>
</tr>
</table>
</body>
</html>
Параметр ROWSPAN
Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 2.
| ячейка 1 | ячейка 2 |
| ячейка 3 |
Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис.2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.
Синтаксис
<th rowspan=число>…</th>
Аргументы
Любое целое положительное число больше 2.
Значение по умолчанию
1
Пример 8. Объединение ячеек по вертикали
<html>
<body>
<table width=200 border=1 align=center cellpadding=4 cellspacing=0 bordercolor=#333333>
<tr>
<th rowspan=2 bgcolor=#FBF0DB>ячейка 1</th>
<th>ячейка 2</th>
</tr>
<tr>
<th>ячейка 3</th>
</tr>
</table>
</body>
</html>
Параметр VALIGN
Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.
Синтаксис
<th valign=top | middle | bottom | baseline>…</th>
Аргументы
top — выравнивание по верхнему краю строки.
middle — выравнивание по середине.
bottom — выравнивание по нижнему краю.
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
Значение по умолчанию
middle
Пример 9. Выравнивание содержимого ячеек
<html>
<body>
<table width=60%>
<tr bgcolor=#ffcc00 bordercolor=white>
<th valign=top> … </th>
<th valign=bottom> … </th>
</tr>
</table>
</body>
</html>
Параметр WIDTH
Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.
Синтаксис
<th width=ширина>…</th>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.
Аналог CSS
width
Пример 10. Ширина ячеек
<html>
<body>
<table cellpadding=10 border=1 bordercolor=red>
<tr>
<th width=20%> … </th>
<th width=80%> … </th>
</tr>
</table>
</body>
</html>
HTML-теги thead, tbody и tfoot. Разделение таблицы.
Доброго времени суток. Меня зовут Михаил.
Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.
Если Вам необходимо создать сайт, настроить его, или получить другую помощь в этой области, то смело выбирайте услугу или свяжитесь со мной. Всегда рад Вам помочь и готов ответить на Ваши вопросы.
В прошлом небольшом видео ролике мы поговорили о заголовке или подписи для таблицы. Узнали, как просто подписать таблицу для облегчения ориентирования посетителей.
В этом видео уроке продолжаем разговор о HTML-таблицах. И рассмотрим еще один интересный вариант действий, которые мы можем совершать для различных манипуляций над таблицами. Кстати, полученные далее знания очень удобно применять при оформлении таблиц.
Четыре HTML-тега, о которых мы поговорим в этом видео, предназначены для разделения таблицы на части. То есть с их помощью мы сможем определить верхнюю часть таблицы, основную часть и нижнюю часть таблицы. Это теги <thead>, <th>, <tbody> и тег <tfoot>. C этими тегами все в принципе довольно понятно, однако тег <tfoot> имеет одну особенность, которая может немного запутать начинающих пользователей.
HTML-тег <thead>.
HTML-тег <thead> предназначен для определения верхней (заголовочной) части таблицы. Данный тег необходимо прописывать сразу после открывающего тега <table>, если нет заголовка указанного с помощью тега <caption>. Если же заголовок присутствует, то тег необходимо добавлять после него. Кроме того, при использовании данного элемента в коде обязательно должен присутствовать HTML-тег <tbody>.
Опять рассмотрим пример применения данного тега внутри кода HTML-таблицы. Опять же мы возьмем код из прошлой статьи и добавим к нему тег <thead>:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Здесь также стоит обратить внимание на то, что внутри тега <thead> мы можем сделать визуальное выделение текста с помощью жирного начертания текста. Тем самым мы обозначим верхнюю часть таблицы. Для того чтобы это делать необходимо воспользоваться еще одним тегом, это HTML-тег <th>.
HTML-тег <th>.
Тег <th> выполняет абсолютно ту же роль, что и тег <td>. То есть является обыкновенной ячейкой. Однако он предназначен для выделения жирным начертанием текста внутри такой ячейки. То есть если мы посмотрим на работу тега <td>. Мы увидим, что тег просто создает ячейку с текстом внутри и все на этом. А HTML-тег <th> создает ячейку и выделяет текст внутри этой ячейки жирным начертанием. Это очень удобно для выделения самых значимых ячеек внутри таблицы.
Также стоит отметить, что если мы используем тег <thead>, мы не обязаны использовать тег <th>. Мы также можем воспользоваться и тегом <td>.
Пример исходного кода с использованием тега <th>:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
|---|---|---|
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Здесь я думаю все понятно. А вот про следующий HTML-тег следует всегда помнить.
HTML-тег <tbody>.
Дело в том, что если мы решили использовать в таблице тег <thead>, значит, мы обязательно должны использовать и тег <tbody>, который предназначен для выделения основной части таблицы. Можно его даже назвать аналогом тега <body> для HTML-документа в целом. Только тег <tbody> относится только к таблице, а не к целому документу.
Что касается примера. То здесь все просто. Сначала мы прописываем тег <thead>, так как он отвечает за верхнюю часть таблицы, а затем прописываем тег <tbody>:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
|---|---|---|
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
И последний тег, о котором мы сегодня поговорим, это тег <tfoot>, который отвечает за нижнюю часть таблицы. То есть ту часть, которая идет после основной.
HTML-тег <tfoot>.
Однако у этого HTML-тега есть одна особенность. Если смотреть на его предназначение и предназначение других тегов, которые делят таблицу на части, то можно сделать вывод, что раз он отвечает за нижнюю часть, то и прописать его мы должны после тега <tbody>. Однако это не так. На самом деле HTML-тег <tfoot> должен быть указан до <tbody>. Однако информацию внутри этого тега необходимо указать ту, которая будет снизу, так как веб-браузер выведет ее под основной информацией. Это следует всегда помнить, чтобы при написании кода не запутаться.
Ну и пример HTML-тега <tfoot>:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
|---|---|---|
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
Обратите внимание на порядок строк в исходном коде. И на то, что в итоге выведет веб-браузер на экран.
Видео урок: HTML-теги <thead>, <th>, <tbody> и <tfoot>. Разделение таблицы.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся с еще двумя тегами colgroup и col. И подведем итоги раздела, посвященного таблицам в HTML.
Тег | HTML справочник
Поддержка браузерами
Описание
HTML тег <thead> используется для группировки заголовочного содержимого таблицы.
Элемент <thead> используется в сочетании с элементами <tbody> и <tfoot> для разделения таблицы на логические части (тело, заголовок и нижний колонтитул).
Браузеры могут использовать эти элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула. Так же при выводе на печать большой таблицы, которая занимает несколько страниц, эти элементы могут включить заголовок и нижний колонтитул, которые будут напечатаны в верхней и нижней части каждой страницы.
Элемент <thead> должен быть расположен после элементов <caption> и <colgroup> (если таковые присутствуют), но до элементов <tbody> и <tfoot>.
Атрибуты
Тег <thead> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
Пример
<table border="1">
<caption>Ежемесячные сбережения</caption>
<colgroup>
<col span="1">
<col>
</colgroup>
<thead>
<tr>
<th>Месяц</th>
<th>Доход</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Сумма</td>
<td>180р</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Январь</td>
<td>100р</td>
</tr>
<tr>
<td>Февраль</td>
<td>80р</td>
</tr>
</tbody>
</table>
Результат данного примера в окне браузера:
