thead HTML Tag - Table Header

The thead HTML tag sets the header of an HTML table. The table header is marked by the opening <thead> and closing </thead> tags. The table header contains one or more th cells.

Syntax

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>$99</td>
    </tr>
  </tbody>
</table>

• 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

1. Table headers don't render differently from table body and footer by default. It can be styled differently with CSS.
2. Browsers can use sticky thead and tfoot elements to enabling scrolling of a high table body independently.
3. When printing large tables spanning multiple pages the header and footer can be printed on each page.

<table>
  <thead class="blue">
    <tr>
      <th>Product</th><th>Price</th>
    </tr>
  </thead>
  <tbody class="green">
    <tr>
      <td>Rubik's Cube</td><td>$9</td>
    </tr>
    <tr>
      <td>Pyraminx</td><td>$7</td>
    </tr>
  </tbody>
  <tfoot class="black">
    <tr>
      <td>Sum</td><td>$16</td>
    </tr>
  </tfoot>
</table>

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.

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: <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

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">Head1</th>
    </tr>
    <tr>
      <th>Head2</th>
      <th rowspan="2">Head4</th>
    </tr>
    <tr>
      <th>Head3</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot1</td>
      <td>Foot2</td>
    </tr>
  </tfoot>
</table>

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
    <tr>
      <th>G</th>
      <th>H</th>
      <th>I</th>
    </tr>
  </thead>
</table>

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.

<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">Head 1</div>
      <div class="divTableHead">Head 2</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">Cell 1</div>
      <div class="divTableCell">Cell 2</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Cell 3</div>
      <div class="divTableCell">Cell 4</div>
    </div>
  </div>
</div>

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.