How can I construct a table header than spans multiple rows in HTML?

Question

I would like to construct a table as follows:

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

Seeing as how there is only 1 line for TH elements, how can I construct the header row such as the columns line up? Hierarchical tables doesn't seem like a good option because the column widths won't line up, and I also can't use two rows with TH tags with colspan.

Multiple rows of TH tags will merge into a single row of TH. Continuing my example above, the table generated will be a single header row of Major Heading 1, Major Heading 2, Minor1, Minor2, Minor3, Minor4. — statguy, Sep 08 '13 at 03:26
One solution would be to use TD with special CSS rather than TH, but ideally I'd like to follow the traditional html table construct. — statguy, Sep 08 '13 at 03:31
Closed as off-topic?! "Can I have a table header with multiple rows?" seems like a perfectly fine stack overflow question. I was just wondering if it would work to put multiple tr's in a thead myself. — Andrew Koper, Jan 11 '15 at 03:53

score 126 · Accepted Answer · edited Oct 31 '17 at 06:41

This is how I would do it (working fiddle at http://jsfiddle.net/7pDqb/) Tested in Chrome.

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

score 26 · Answer 2 · edited Oct 31 '17 at 06:40

Were you accidentally using rowspan instead of colspan? Or did you accidentally forget a closing </tr> tag?

Extending off of tvanfosson's answer, I'd use the scope attribute on the th elements for semantic and accessibility purposes:

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2" scope='colgroup'>Major Heading 1</th>
      <th colspan="2" scope='colgroup'>Major Heading 2</th>
    </tr>
    <tr>
      <th scope='col'>Minor1</th>
      <th scope='col'>Minor2</th>
      <th scope='col'>Minor3</th>
      <th scope='col'>Minor4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>

THank you, exactly my case, accidentaly using rowspan – maximus Jan 18 '16 at 05:28 — maximus, Jan 18 '16 at 05:28

gm2008 · Answer 3 · 2016-03-31T08:01:27.627

However, besides the case of header cell spanning multiple columns, tables that have header cell spanning two rows are also very often seen.

Here is an example. See col 5 and data5 below:

    <table>
        <thead>
            <tr>
                <th colspan="2">Major 1</th>
                <th colspan="2">Major 2</th>
                <th rowspan="2">col 5</th>
            </tr>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </tbody>
    </table>

Here is the fiddle.

score 4 · Answer 4 · answered Sep 24 '18 at 22:14

W3C's Web Accessibility Initiative (WAI) website says to use the markup structure shown below.

(Note that the rendered markup in the example table on the website is slightly different than what they show in the sample markup. See link and inspect the example table.)

Source: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

How can I construct a table header than spans multiple rows in HTML?

4 Answers4

Linked

Related