Як я можу створити заголовок таблиці, який охоплює кілька рядків у HTML?

Я хотів би побудувати таблицю наступним чином:

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

Побачивши, як існує лише 1 рядок для елементів TH, як я можу побудувати рядок заголовка, такий як колонки? Ієрархічні таблиці не здаються хорошим варіантом, оскільки ширина стовпців не вирівнюється, і я також не можу використовувати два рядки з тегами TH із colspan.

Ось як би я це зробив (робоча скрипка на 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>

Ви випадково використовували 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>

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

Ось приклад. Дивіться 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>

Ось скрипка .

Веб-сайт Ініціативи веб-доступності (WAI) W3C каже, що слід використовувати структуру розмітки, показану нижче.

(Зверніть увагу, що відображена розмітка у прикладі таблиці на веб-сайті дещо відрізняється від тієї, яку вони показують у прикладі розмітки. Дивіться посилання та перевіряйте таблицю прикладів.)

Джерело: 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>