Как я могу построить заголовок таблицы, чем охватывать несколько строк в HTML?

Я хотел бы построить таблицу следующим образом:

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

Как видно, как есть только 1 строка для TH-элементов, как я могу построить строку заголовка, такую как строки столбцов? Иерархические таблицы не кажутся хорошим вариантом, потому что ширина столбцов не будет совпадать, и я также не могу использовать две строки с TH-тегами с colspan.

Ответ 1

Вот как бы я это сделал (рабочая скрипка http://jsfiddle.net/7pDqb/) Протестировано в 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>

Ответ 2

Вы случайно использовали rowspan вместо colspan? Или вы случайно забыли закрывающий тег </tr>?

Расширение ответа tvanfosson, я бы использовал атрибут scope для элементов th для семантики и доступность:

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>

Ответ 3

Однако, помимо случая, когда ячейка заголовка охватывает несколько столбцов, также очень часто видны таблицы с ячейкой заголовка, охватывающей две строки.

Вот пример. См. Ниже col 5 и data5:

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

Вот fiddle.