- thead HTML Tag — Table Header
- Syntax
- Use Of Thead
- Default CSS Styles
- Tag Attributes
- Multiple Table Header Rows
- Table Header In DIV Tables
- HTML Table Generator With Header
- Css html table thead
- Закрывающий тег
- Статьи по теме
- Типы тегов
- Css html table thead
- Синтаксис¶
- Атрибуты¶
- Спецификации¶
- Описание и примеры¶
- : The Table Head element
- Try it
- Attributes
- Deprecated attributes
- Examples
- Technical summary
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
thead HTML Tag — Table Header
The thead HTML tag sets the header of an HTML table. The table header is marked by the opening
and closingtags. The table header contains one or more th cells.
Syntax
- thead is the child of the table tag
- thead is the parent of at least one th tag
- thead must be after the caption and colgroup elements
Use Of Thead
- Table headers don’t render differently from table body and footer by default. It can be styled differently with CSS.
- Browsers can use sticky thead and tfoot elements to enabling scrolling of a high table body independently.
- When printing large tables spanning multiple pages the header and footer can be printed on each page.
class="blue"> Product Price class="green"> Rubik's Cube $9 Pyraminx $7 class="black"> Sum $16 Default CSS Styles
By default, most web browsers show the header with bold text, aligned to the center of the cell. The rest of the table shows with normal font, aligned to the left.
The table above, rendered in Google Chrome without any CSS styles.
thead <
display : table-header-group ;
vertical-align : middle ;
border-color : inherit ;
>
Tag Attributes
The following attributes are obsolete in HTML5 and you should use CSS styles instead. Make sure to update the markup, when copying content from an outdated website.
- align – align the text to the left, center, right or justify. Use text-align CSS instead.
- bgcolor – background color of the cells. Use backckground CSS instead.
- char – is ignored if the align attribute is not set. Specifies a character to align the cells in a column on.
- charoff – is used to set the number of characters in a table row that aligned the characters specified by the «char» attribute. Example:
- valign – vertical alignment of the text to bottom, baseline, middle or top. Use vertical-align CSS instead.
Multiple Table Header Rows
HTML markup allows to add multiple header lines to our tables, and even to set colspan and rowspan to the cells.
table> thead> tr> th colspan="2">Head1th> tr> tr> th>Head2th> th rowspan="2">Head4th> tr> tr> th>Head3th> tr> thead> tbody> tr>td>Atd>td>Btd>tr> tr>td>Ctd>td>Dtd>tr> tbody> tfoot> tr> td>Foot1td> td>Foot2td> tr> tfoot> table>
table> thead> tr> th>Ath> th>Bth> th>Cth> tr> tr> th>Dth> th>Eth> th>Fth> tr> tr> th>Gth> th>Hth> th>Ith> tr> thead> table>
Table Header In DIV Tables
Div tables are structured elements that render as tables. We can assign a class name to the first row of the table and style it with CSS styles.
div class="divTable"> div class="divTableHeading"> div class="divTableRow"> div class="divTableHead">Head 1div> div class="divTableHead">Head 2div> div> div> div class="divTableBody"> div class="divTableRow"> div class="divTableCell">Cell 1div> div class="divTableCell">Cell 2div> div> div class="divTableRow"> div class="divTableCell">Cell 3div> div class="divTableCell">Cell 4div> div> div> div>
.divTableHeading background-color: #EEE;
display: table-header-group;
font-weight: bold;
>
.divTableHead background-color: rgba(0,0,0,0.1);
font-weight: bold;
>
HTML Table Generator With Header
Generate HTML tables easily, with just a couple of clicks below. Make sure to activate the Header checkbox to add a header to the generated code.
Css html table thead
align Определяет выравнивание текста в строке. char Выравнивание содержимого ячеек относительно заданного символа. charoff Смещение содержимого ячеек относительно указанного символа. bgcolor Цвет фона ячеек, которые расположены внутри контейнера . valign Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Css html table thead
Тег (от англ. table head — голова, верх таблицы) предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
Допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в исходном коде сразу после элемента .
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13
table> thead> tr> td>. td> tr> thead> tfoot> . tfoot> tbody> . tbody> table> Закрывающий тег не обязателен.
Атрибуты¶
Для этого элемента доступны универсальные атрибуты.
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
html> head> meta charset="utf-8" /> title>THEADtitle> head> body> table style="width: 600px;"> thead style="background: #fc0"> tr> td>. td> td>. td> tr> thead> tbody style="background: #ccc"> tr> td>. td> td>. td> tr> tbody> table> body> html> : The Table Head element
The HTML element defines a set of rows defining the head of the columns of the table.
Try it
Attributes
This element includes the global attributes.
Deprecated attributes
This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
- left , aligning the content to the left of the cell
- center , centering the content in the cell
- right , aligning the content to the right of the cell
- justify , inserting spaces into the textual content so that the content is justified in the cell
- char , aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.
If this attribute is not set, the left value is assumed.
Warning: Do not use this attribute as it is obsolete (not supported) in the latest standard.
This attribute defines the background color of each column cell. It accepts a 6-digit hexadecimal color or a named color. Alpha transparency is not supported.
Note: Do not use this attribute, as it is non-standard. The thead element should be styled using the CSS background-color property, which can be applied to any element, including the thead , , and elements.
This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char , this attribute is ignored.
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.
This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.
This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
- baseline , which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom .
- bottom , which will put the text as close to the bottom of the cell as it is possible;
- middle , which will center the text in the cell;
- top , which will put the text as close to the top of the cell as it is possible.
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS vertical-align property on it.
Examples
Technical summary
Specifications
Browser compatibility
BCD tables only load in the browser
See also
- Other table-related HTML Elements: , , , , , , , , ;
- CSS properties and pseudo-classes that may be specially useful to style the element:
- the :nth-child pseudo-class to set the alignment on the cells of the column;
- the text-align property to align all cells content on the same character, like ‘.’.
Found a content problem with this page?
This page was last modified on Apr 13, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.