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

80

Я хотел бы построить такую ​​таблицу:

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

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

html html-table статный парень
источник
А почему нельзя использовать две строки и colspan?
tvanfosson 08
1
Несколько строк тегов TH объединятся в одну строку тегов TH. Продолжая мой пример выше, сгенерированная таблица будет представлять собой одну строку заголовка: Major Heading 1, Major Heading 2, Minor1, Minor2, Minor3, Minor4.
statguy 08
Одним из решений было бы использовать TD со специальным CSS, а не TH, но в идеале я хотел бы следовать традиционной конструкции таблицы html.
statguy 08
Я не думаю, что это правильно: jsfiddle.net/7pDqb
tvanfosson 08
3
Закрыт как не по теме ?! «Могу ли я иметь заголовок таблицы с несколькими строками?» кажется прекрасным вопросом о переполнении стека. Мне просто было интересно, сработает ли сам вставлять несколько tr в thead.
Эндрю Копер

Ответы:

109

Вот как я бы это сделал (рабочая скрипка на 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>
Развернуть фрагмент

tvanfosson
источник
24

Вы случайно не использовали 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>
Развернуть фрагмент

каток. сопровождающий.6
источник
СПАСИБО, именно в моем случае, случайно использовавшем rowspan
maximus
7

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

Вот пример. См. 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>

Вот скрипка .

GM2008
источник
4

Веб-сайт W3C Web Accessibility Initiative (WAI) рекомендует использовать структуру разметки, показанную ниже.

(Обратите внимание, что отображаемая разметка в примере таблицы на веб-сайте немного отличается от того, что они показывают в образце разметки. См. Ссылку и просмотрите пример таблицы.)

Источник: 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>
кантера
источник