This element includes theglobal attributes.

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

alignDeprecated

Specifies the horizontal alignment of each head cell. The possibleenumerated values areleft,center,right,justify, andchar. When supported, thechar value aligns the textual content on the character defined in thechar attribute and the offset defined by thecharoff attribute. Use thetext-align CSS property instead, as this attribute is deprecated.

bgcolorDeprecated

Defines the background color of each head cell. The value is an HTML color; either a6-digit hexadecimal RGB code, prefixed by a#, or acolor keyword. Other CSS<color> values are not supported. Use thebackground-color CSS property instead, as this attribute is deprecated.

charDeprecated

Does nothing. It was originally intended to specify the alignment of the content to a character of each head cell. Ifalign is not set tochar, this attribute is ignored.

charoffDeprecated

Does nothing. It was originally intended to specify the number of characters to offset the head cell content from the alignment character specified by thechar attribute.

valignDeprecated

Specifies the vertical alignment of each head cell. The possibleenumerated values arebaseline,bottom,middle, andtop. Use thevertical-align CSS property instead, as this attribute is deprecated.

• The<thead> is placed after any<caption> and<colgroup> elements, but before any<tbody>,<tfoot>, and<tr> elements.
• Along with its related<tbody> and<tfoot> elements, the<thead> element provides usefulsemantic information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines.
• When printing a document, in the case of a multipage table, the table head usually specifies information that remains the same on each page.

See<table> for a complete table example introducing common standards and best practices.

This example demonstrates a table divided into a head section with column headers and a body section with the table's main data.

HTML

The<thead> and<tbody> elements are used to structure the table rows intosemantic sections. The<thead> element represents the head section of the table, which contains a row (<tr>) of column headers cells (<th>).

<table>  <thead>    <tr>      <th>Student ID</th>      <th>Name</th>      <th>Major</th>      <th>Credits</th>    </tr>  </thead>  <tbody>    <tr>      <td>3741255</td>      <td>Jones, Martha</td>      <td>Computer Science</td>      <td>240</td>    </tr>    <tr>      <td>3971244</td>      <td>Nim, Victor</td>      <td>Russian Literature</td>      <td>220</td>    </tr>    <tr>      <td>4100332</td>      <td>Petrov, Alexandra</td>      <td>Astrophysics</td>      <td>260</td>    </tr>  </tbody></table>

CSS

Some basic CSS is used to style and highlight the table head so that the headings of the columns stand out from the data in the table body.

thead {  border-bottom: 2px solid rgb(160 160 160);  text-align: center;  background-color: #2c5e77;  color: #fff;}tbody {  background-color: #e4f0f5;}

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}tbody > tr > td:last-of-type {  text-align: center;}

Result

This example demonstrates a table head section with two rows.

HTML

We extend the markup the table from thebasic example in this example by including two table rows (<tr>) within the<thead> element creating a multi-row table head. We included an additional column, splitting the student names into first and last names.

<table>  <thead>    <tr>      <th rowspan="2">Student ID</th>      <th colspan="2">Student</th>      <th rowspan="2">Major</th>      <th rowspan="2">Credits</th>    </tr>    <tr>      <th>First name</th>      <th>Last name</th>    </tr>  </thead>  <tbody>    <tr>      <td>3741255</td>      <td>Martha</td>      <td>Jones</td>      <td>Computer Science</td>      <td>240</td>    </tr>    <tr>      <td>3971244</td>      <td>Victor</td>      <td>Nim</td>      <td>Russian Literature</td>      <td>220</td>    </tr>    <tr>      <td>4100332</td>      <td>Alexandra</td>      <td>Petrov</td>      <td>Astrophysics</td>      <td>260</td>    </tr>  </tbody></table>

Cell spanning

In order to associate and line up the header cells with the correct columns and rows, thecolspan androwspan attributes are used on the<th> elements. The values set in these attributes specify how many cells each header cell (<th>) spans. Due to the way these attributes are set, the two second-row header cells are lined up with the columns they head. These each span one row and one column as the default values for thecolspan androwspan attributes are both1.

The column and row spanning demonstrated by this example are illustrated in the following figure:

CSS

The CSS is unchanged from theprevious example.

thead {  border-bottom: 2px solid rgb(160 160 160);  background-color: #2c5e77;  color: #fff;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}tbody {  background-color: #e4f0f5;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}tbody > tr > td:last-of-type {  text-align: center;}

Result

• Learn: HTML table basics
• <caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<tfoot>,<th>,<tr>: Other table-related elements
• background-color: CSS property to set the background color of each head cell
• border: CSS property to control borders of head cells
• text-align: CSS property to horizontally align each head cell content
• vertical-align: CSS property to vertically align each head cell content