The thead Element – Table Head Section

Technical Deep Dive & Specifications

The WHATWG HTML Living Standard Specification

The <thead> element represents the block of rows that consist of the column headers for the parent <table> element.

                                    +-----------------------+
                                    |        <table>        |
                                    +-----------------------+
                                                |
               +--------------------------------+-------------------------------+
               |                                |                               |
     +-------------------+            +-------------------+           +-------------------+
     |    <caption>      | (Optional) |    <colgroup>     | (Optional)|     <thead>       | (0 or 1)
     +-------------------+            +-------------------+           +-------------------+
                                                                                |
                                                                      +-------------------+
                                                                      |       <tr>        | (1 or more)
                                                                      +-------------------+
                                                                                |
                                                                      +-------------------+
                                                                      |     <th> / <td>   |
                                                                      +-------------------+

DOM Hierarchy & Placement Rules

1. Parent Element: Must be a <table> element.
2. Cardinality: Exactly zero or one <thead> element is permitted per <table>. Placing multiple <thead> elements inside a single table is invalid HTML.
3. Sequence Order: In HTML5, <thead> must appear after any <caption> and <colgroup> elements, but before any <tbody>, <tfoot>, or <tr> children.
4. Content Model: Zero or more <tr> (table row) elements. You cannot place <th> or <td> directly inside <thead> without an enclosing <tr>.

Specification Attribute Matrix

The CSS Table Model & Print Pagination Mechanics

By default, modern user agents apply the following User Agent (UA) stylesheet rule:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

The CSS display type table-header-group tells the layout engine's fragmentation model (paged media):

• When rendering to continuous media (screen), thead sits visually at the top of the table.
• When rendering to fragmented media (printing via window.print() or generating PDFs), the layout engine duplicates the <thead> box at the top of every page box fragment that contains subsequent <tbody> rows.

Accessibility Tree Mapping

In the W3C Accessibility API Mapping (AAM), <thead> maps to:

• ARIA Role: role="rowgroup"
• Accessible Name: Derived from contained headers or explicitly via aria-label / aria-labelledby.
• Assistive technologies like screen readers (JAWS, NVDA, VoiceOver) use this structural grouping to identify the boundary between navigational column labels and data payloads.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 15–20 (thead): Styles the entire head section with a dark slate background (#1e293b) and light text. Every contained <th> inherits these visual defaults.
• Line 33–48 (@media print): Configures print paged media rules. display: table-header-group ensures that if this invoice contains 100 line items spanning 4 pages, the header row will be stamped automatically at the top of pages 1, 2, 3, and 4.
• Line 44 (break-inside: avoid): Critical CSS rule preventing an individual table row from being sliced in half across a physical page boundary.
• Line 53 (<thead>): Declares the structural header section.
• Line 54 (<tr>): The header container row. Note that <thead> cannot contain loose text or direct <th> tags without an intermediate <tr>.
• Line 55–60 (<th scope="col">): Column headers. The scope="col" attribute explicitly associates each header with the cells in its vertical column.
• Line 63 (<tbody>): Begins the primary tabular data payload.

Expected Browser Render Output

+----------+-------------------------------+-------------+----------+------------+-----------+
| ITEM SKU | PRODUCT DESCRIPTION           | CATEGORY    | QUANTITY | UNIT PRICE | SUBTOTAL  |  <- Dark Slate (#1e293b), White Text
+----------+-------------------------------+-------------+----------+------------+-----------+
| SKU-8821 | Enterprise Server Rack 42U    | Hardware    | 2        | $1,200.00  | $2,400.00 |
| SKU-9943 | Cat6A Shielded Patch Cable 10m| Networking  | 50       | $14.50     | $725.00   |
| SKU-1102 | Managed 48-Port PoE+ Switch   | Hardware    | 4        | $850.00    | $3,400.00 |
+----------+-------------------------------+-------------+----------+------------+-----------+