up vote 50 down vote favorite
5

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.

share|improve this question
    
And why can't you use two rows and colspan? – tvanfosson Sep 8 '13 at 3:22
    
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 8 '13 at 3: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 8 '13 at 3:31
    
I don't think that's correct: jsfiddle.net/7pDqb – tvanfosson Sep 8 '13 at 3:38
1  
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 3:53
up vote 64 down vote accepted

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>
Expand snippet

share|improve this answer
up vote 16 down vote

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>
Expand snippet

share|improve this answer
    
THank you, exactly my case, accidentaly using rowspan – maximus Jan 18 '16 at 5:28
up vote 2 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.