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

80

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.

html html-table statguy
quelle
Und warum können Sie nicht zwei Zeilen und Colspan verwenden?
Tvanfosson
1
Mehrere Zeilen mit TH-Tags werden zu einer einzigen Zeile mit TH zusammengeführt. Wenn Sie mein Beispiel oben fortsetzen, wird die generierte Tabelle eine einzelne Kopfzeile der Hauptüberschriften 1, Hauptüberschriften 2, Minor1, Minor2, Minor3, Minor4 sein.
Statguy
Eine Lösung wäre, TD mit speziellem CSS anstelle von TH zu verwenden, aber im Idealfall möchte ich dem traditionellen HTML-Tabellenkonstrukt folgen.
Statguy
Ich denke nicht, dass das richtig ist: jsfiddle.net/7pDqb
tvanfosson
3
Als Off-Topic geschlossen?! "Kann ich einen Tabellenkopf mit mehreren Zeilen haben?" scheint eine vollkommen feine Frage zum Stapelüberlauf zu sein. Ich habe mich nur gefragt, ob es funktionieren würde, selbst mehrere Trs in einen Kopf zu stecken.
Andrew Koper

Antworten:

109

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>
Erweitern Sie das Snippet

Tvanfosson
quelle
24

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>
Erweitern Sie das Snippet

rink.attendant.6
quelle
DANKE, genau mein Fall, versehentlich mit Rowspan
Maximus
7

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 .

gm2008
quelle
4

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