¿Cómo puedo construir un encabezado de tabla que abarque varias filas en HTML?

Me gustaría construir una tabla de la siguiente manera:

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

Dado que solo hay 1 línea para los elementos TH, ¿cómo puedo construir la fila del encabezado, como la alineación de las columnas? Las tablas jerárquicas no parecen una buena opción porque los anchos de las columnas no se alinean y tampoco puedo usar dos filas con etiquetas TH con colspan.

Así es como lo haría (violín de trabajo en http://jsfiddle.net/7pDqb/ ) Probado en 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>

¿Estabas usando accidentalmente en rowspanlugar de colspan? ¿O olvidaste accidentalmente una </tr>etiqueta de cierre ?

Extendiendo la respuesta de tvanfosson, usaría el scopeatributo en los thelementos con fines semánticos y de accesibilidad :

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>

Sin embargo, además del caso de la celda de encabezado que abarca varias columnas, también se ven con mucha frecuencia las tablas que tienen una celda de encabezado que abarca dos filas.

Aquí hay un ejemplo. Ver col 5y a data5continuación:

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

Aquí está el violín .

El sitio web de la Iniciativa de Accesibilidad Web (WAI) del W3C dice que se use la estructura de marcado que se muestra a continuación.

(Tenga en cuenta que el marcado representado en la tabla de ejemplo del sitio web es ligeramente diferente al que se muestra en el marcado de muestra. Consulte el enlace e inspeccione la tabla de ejemplo)

Fuente: 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>