HTML тег thead
Тег <thead> используется для группирования содержимого верхнего колонтитула HTML таблицы.
Элемент <thead> используется вместе с элементами <tbody> и <tfoot> для определения соответствующих частей таблицы (верхний колонтитул, основное содержимое, нижний колонтитул).
Браузеры могут использовать эти элементы для прокрутки основного содержимого таблицы независимо от ее верхнего и нижнего колонтитулов. Также, при печати большой таблицы, занимающей несколько страниц, эти элементы будут использоваться для печати верхнего и нижнего колонтитулов внизу и вверху каждой страницы.
Тег <thead> должен располагаться внутри тега <table> после элементов <caption>, <colgroup> и перед тегами <tbody>, <tfoot> и <tr>.
Внутри элемента <thead> должен быть определен по крайней мере один элемент <tr>.
Элементы <thead>, <tbody> и <tfoot> по умолчанию никак не влияют на внешний вид таблицы. Тем не менее, вы можете использовать стили CSS, чтобы настроить их отображение.
Разница между HTML 4.01 и HTML5
В HTML5 не поддерживается ни один атрибут для HTML 4.01.Атрибуты тега <thead>
| Атрибут | Описание |
|---|---|
| align | Определяет горизонтальное выравнивание содержимого элемента |
| char | Определяет символ выравнивания, по которому будет выравниваться содержимое внутри элемента |
| charoff | Определяет количество символов смещения относительно символа выравнивания |
| valign | Определяет вертикальное выравнивание содержимого элемента <thead> |
Общие атрибуты
Тег <thead> поддерживает общие атрибуты и атрибуты-события.
HTML пример
HTML таблица с элементами <thead>, <tfoot> и <tbody>:
<table> <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>
CSS стили по умолчанию
Большинство браузеров будут отображать тег <thead> со следующими стилями
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
seodon.ru | Теги HTML — Тег THEAD
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <THEAD> применяется для группирования рядов (строк) таблицы. Такое группирование используется с целью задания единого оформления группе рядов, чтобы повысить качество восприятия и удобство пользования таблицей. Естественно, к тегу <THEAD> можно применить не только его атрибуты, но и стили (CSS).
Тег <THEAD> создает так называемую «шапку» таблицы, то есть внутри этого элемента располагаются ряды, которые будут выведены в начале таблицы. Причем таблица может иметь только одну «шапку».
Еще ряды таблицы можно сгруппировать в ее тело (тег <TBODY>) и футер (тег <TFOOT>). Во всех группах рядов обязательно должно быть одинаковое количество столбцов (без учета объединения ячеек).
Атрибуты
Личные атрибуты:
- align — Задает положение содержимого ячеек по горизонтали.
- valign — Положение содержимого по вертикали.
- bgcolor — Устанавливает фоновый цвет для группы рядов.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: таблицы.
Модель тега: может располагаться внутри элемента <TABLE>, но только в одном экземпляре перед тегами <TFOOT> и <TBODY>.
Должен содержать: один или более тегов <TR>.
Открывающий тег: необходим. Закрывающий тег: не обязателен.
Синтаксис
<table>
<thead>
<tr>
<td>содержимое</td>
</tr>
</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
</table>Пример HTML: применение тега THEAD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега THEAD</title>
</head>
<body>
<table border="2">
<thead>
<tr><th>Месяц</th><th>Кролики, шт</th><th>Корм, кг</th></tr>
</thead>
<tfoot align="right">
<tr><td>Итого:</td><td>65</td><td>301</td></tr>
</tfoot>
<tbody align="right">
<tr><td>Июнь</td><td>10</td><td>45</td></tr>
<tr><td>Июль</td><td>38</td><td>87</td></tr>
<tr><td>Август</td><td>65</td><td>169</td></tr>
</tbody>
</table>
</body>
</html> Результат примера
Результат. Применение тега THEAD.
Поддержка версиями 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 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Тег thead — Уроки по созданию сайтов на WordPress
Тег <thead>
Описание
Элемент <thead> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <table>.
Синтаксис
<table>
<thead>
<tr>
<td> ... </td>
</tr>
</thead>
<tfoot> ... </tfoot>
<tbody> ... </tbody>
</table> Атрибуты
- align — Определяет выравнивание текста в строке.
- char — Выравнивание содержимого ячеек относительно заданного символа.
- charoff — Смещение содержимого ячеек относительно указанного символа.
- bgcolor — Цвет фона ячеек, которые расположены внутри контейнера <thead>.
- valign — Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег THEAD</title>
</head>
<body>
<table>
<thead>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
</body>
</html> |
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Тег THEAD</title> </head> <body> <table> <thead> <tr> <td> … </td> <td> … </td> </tr> </thead> <tbody> <tr> <td> … </td> <td> … </td> </tr> </tbody> </table> </body> </html>
thead — Xiper.net
Автор: Евгений Рыжков Дата публикации: 17.01.2009
Тег <thead> (англ. table header — заголовок таблицы) — тег-контейнер, применяется для определения строки/строк, которые будут отображаться вверху таблицы.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<table>
<thead>
<tr><td> ... </td></tr>
</thead>
</table>
Атрибуты
Основные Вспомогательные События
| align | выраванивание текста в строке
|
|---|---|
| bgcolor | цвет фона ячеек. В спецификации HTML 4.01 отсутствует |
| char | определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки |
| charoff | определяет смещение первого в строке символа выравнивания |
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный идентификатор |
| lang | определяет используемый язык |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
| valign | вертикальное выраванивание в ячейке
|
Пример
Оформляем заголовок:
<table>
<thead>
<tr><th>№ п/п</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th></tr>
</thead>
<tfoot align="right">
<tr>
<td colspan="4">Итого: 18</td>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Gymnocalycium hybopleurum</td><td>15</td><td align="right">8</td></tr>
<tr><td>2</td><td>Gymnocalycium valnicekianum</td><td>26</td><td align="right">6</td></tr>
<tr><td>3</td><td>Mammillaria discolor</td><td>2</td><td align="right">0</td></tr>
<tr><td>4</td><td>Mammillaria johnstonii</td><td>14</td><td align="right">4</td></tr>
</tbody>
</table>
Рекомендации по использованию
- закрывающий тег не обязателен (</thead>)
- должен располагаться в контейнере <table>.
- должен содержать только теги <tr>
- обязательных атрибутов нет
Строки таблицы могут быть сгруппированы в шапку, футер и один или более разделов тела таблицы с помощью тегов <thead>, <tfoot> и <tbody>. Благодаря этому возможно, например, для браузеров поддерживать прокрутку тела таблицы независимо от шапки и футера. Если распечатываются большие таблицы, информация шапки и футера может повторяться на каждой странице, содержащей данные таблицы. В современных браузерах эти возможности не реализованы!
Шапка и футер таблицы должны содержать информацию о столбцах таблицы. Тело таблицы должно содержать ряды (строки) данных таблицы.
Если элементы <thead>, <tfoot> и <tbody> определены, каждый из них должен содержать группу строк. Каждая группа строк должна содержать минимум одну строку, определенную элементом <tr>.
Разделы <thead>, <tfoot> и <tbody> должны содержать одинаковое количество столбцов.
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— table { border: 1px solid #000; /* оформляем границы таблицы */ border-collapse: collapse; /* убираем отступы между ячейками */ border-spacing: 0; } td, th { border: 1px solid #000; /* оформляем границы ячеек */ } —> </style> </head> <body> <table> <thead> <tr><th>№ п/п</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th></tr> </thead> <tfoot align=»right»> <tr> <td colspan=»4″>Итого: 18</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>Gymnocalycium hybopleurum</td> <td>15</td> <td align=»right»>8</td> </tr> <tr> <td>2</td> <td>Gymnocalycium valnicekianum</td> <td>26</td> <td align=»right»>6</td> </tr> <tr> <td>3</td> <td>Mammillaria discolor</td> <td>2</td> <td align=»right»>0</td> </tr> <tr> <td>4</td> <td>Mammillaria johnstonii</td> <td>14</td> <td align=»right»>4</td> </tr> </tbody> </table> </body> </html> Сделай код и жми тут