HTML <thead> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <thead> element in HTML is used to group the header content of a table. It typically contains rows of column headings that describe the data contained in the corresponding columns of the table. By separating the header from the body (<tbody>) and footer (<tfoot>), <thead> makes tables more organized, readable, and semantically meaningful.

Structurally, <thead> is placed immediately after the opening <table> tag and before the <tbody> element. It usually contains one or more <tr> (table row) elements, and within each row, <th> (table header) elements are used to define individual column headers. Unlike regular table cells (<td>), header cells inside <thead> are typically displayed in bold and centered by default, emphasizing their role as descriptive labels for the table’s data.

Using <thead> also has practical benefits for styling and scripting. For example, CSS can target <thead> separately to apply distinct styles, such as a background color or font styling, making headers stand out. Additionally, in long tables that span multiple pages when printed, browsers can repeat the <thead> on each page to maintain context. In dynamic tables, JavaScript can leverage <thead> to identify headers for sorting or filtering functions.

Properties

Permitted Parents: A <table> element. The <thead> must appear after any <caption> or <colgroup> element, even implicitly defined, but before any <tbody>, <tfoot> and <tr> element
Content: <tr>
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<table border = "1">

  <thead>

    <tr><td colspan="2">Table Header (thead)</td></tr>

  </thead>

  <tfoot>

    <tr><td colspan="2">Table Footer (tfoot)</td></tr>

  </tfoot>

  <tbody>

    <tr>

      <td>Cell 1</td>

      <td>Cell 2</td>

    </tr>

    <tr>

      <td>Cell 3</td>

      <td>Cell 4</td>

    </tr>

    <tr>

      <td>Cell 5</td>

      <td>Cell 6</td>

    </tr>

  </tbody>

</table>

Result

Editor

Attributes

None

Global Attributes

The <thead> tag also supports the Global Attributes in HTML5

Event Attributes

The <thead> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <thead> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.