thead HTML Tag - Table Header
- 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.
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.
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: <tr align="char" charoff=".">
- valign – vertical alignment of the text to bottom, baseline, middle or top. Use vertical-align CSS instead.
Multiple Table Header Rows
Row-, and colspans used in the header.
Table Header In DIV Tables
Div tables are structured <div> elements that render as tables. We can assign a class name to the first row of the table and style it with CSS styles.
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.