Skip to content

Multiple Header Rows

You can add multiple header rows by placing more than one row before the separator line. All rows above the first separator become <th> cells inside <thead>.

Two header rows

| Group 1  | Group 2  |
| A        | B        |
| -------- | -------- |
| 1        | 2        |
Group 1 Group 2
A B
1 2 
<table>
<thead>
<tr>
<th>Group 1</th>
<th>Group 2</th>
</tr>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

Three header rows

| Level 1A | Level 1B |
| Level 2A | Level 2B |
| Level 3A | Level 3B |
| --------- | --------- |
| data      | data      |
Level 1A Level 1B
Level 2A Level 2B
Level 3A Level 3B
data data 
<table>
<thead>
<tr>
<th>Level 1A</th>
<th>Level 1B</th>
</tr>
<tr>
<th>Level 2A</th>
<th>Level 2B</th>
</tr>
<tr>
<th>Level 3A</th>
<th>Level 3B</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>

Combined with column spanning

Multiple header rows pair naturally with column spanning to build rich hierarchical headers.

|              | Q1           || Q2           ||
|              | Jan  | Feb   | Mar  | Apr    |
| :----------- | ---: | ----: | ---: | -----: |
| Product A    | 100  | 120   | 90   | 130    |
| Product B    | 200  | 180   | 210  | 195    |
Q1 Q2
Jan Feb Mar Apr
Product A 100 120 90 130
Product B 200 180 210 195 
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th colspan="2" style="text-align:right">Q1</th>
<th colspan="2" style="text-align:right">Q2</th>
</tr>
<tr>
<th style="text-align:left"></th>
<th style="text-align:right">Jan</th>
<th style="text-align:right">Feb</th>
<th style="text-align:right">Mar</th>
<th style="text-align:right">Apr</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Product A</td>
<td style="text-align:right">100</td>
<td style="text-align:right">120</td>
<td style="text-align:right">90</td>
<td style="text-align:right">130</td>
</tr>
<tr>
<td style="text-align:left">Product B</td>
<td style="text-align:right">200</td>
<td style="text-align:right">180</td>
<td style="text-align:right">210</td>
<td style="text-align:right">195</td>
</tr>
</tbody>
</table>