Wie kann ich einen Tabellenkopf erstellen, der mehrere Zeilen in HTML umfasst?

Ich möchte eine Tabelle wie folgt erstellen:

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

Wie kann ich die Kopfzeile wie die Spaltenreihen erstellen, da es nur eine Zeile für TH-Elemente gibt? Hierarchische Tabellen scheinen keine gute Option zu sein, da die Spaltenbreiten nicht ausgerichtet sind und ich auch keine zwei Zeilen mit TH-Tags mit Colspan verwenden kann.

So würde ich es machen (Fiddle unter http://jsfiddle.net/7pDqb/ arbeiten ) In Chrome getestet.

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>

Haben Sie versehentlich rowspanstatt verwendet colspan? Oder haben Sie versehentlich ein schließendes </tr>Tag vergessen ?

Ausgehend von der Antwort von tvanfosson würde ich das scopeAttribut für die thElemente für semantische und Barrierefreiheitszwecke verwenden:

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>

Neben dem Fall einer Kopfzelle, die sich über mehrere Spalten erstreckt, werden auch sehr häufig Tabellen mit einer Kopfzelle angezeigt, die sich über zwei Zeilen erstreckt.

Hier ist ein Beispiel. Siehe col 5und data5unten:

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

Hier ist die Geige .

Auf der Website der Web Accessibility Initiative (WAI) von W3C wird die unten gezeigte Markup-Struktur verwendet.

(Beachten Sie, dass sich das gerenderte Markup in der Beispieltabelle auf der Website geringfügig von dem unterscheidet, das im Beispiel-Markup angezeigt wird. Siehe Link und überprüfen Sie die Beispieltabelle.)

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