Datentabellen

Früher wurden Tabellen in HTML oft zur Darstellung des Layouts benutzt. Im modernen Webdesign sollten Tabellen jedoch nur zur Strukturierung von Daten benutzt werden. Dafür stehen folgende Elemente zur Verfügung:

Elemente für Datentabellen

table
Tabelle

  • summary="Zusammenfassung des Inhalts"
caption
Tabellenbeschriftung als erstes Kindelement einer table
colgroup (column group)
Spaltengruppe

  • optional: span="positive Ganzzahl" gibt die Anzahl der Spalten an
col (column)
Spalte; col steht innerhalb einer colgroup ohne span-Attribut
  • span="positive Ganzzahl"

Zeilen und Zeilengruppen

tr (table row)
Tabellenzeile
thead (table head)
fasst Zeilen zum Tabellenkopf zusammen bzw. zeichnet eine Zeile als solchen aus
tfoot (table foot)
fasst Zeilen zum Tabellenfuß zusammen bzw. zeichnet eine Zeile als solchen aus
tbody (table body)
fasst Zeilen zum Tabellenkörper zusammen, hier stehen die eigentlichen Inhalte der Tabelle

Im Quelltext muss die Reihenfolge Tabellenkopf, Tabellenfuß und Tabellenkörper eingehalten werden.

Zellen

td (table data)
Tabellenzelle

  • colspan="n" fasst die Zelle mit den folgenden n Zellen in der Spalte zusammen.
  • headers="id1 id2" gibt die IDs der Überschriften für diese Zelle an.
  • rowspan="n" fasst die Zelle mit den folgenden n Zellen in der Zeile zusammen.
th (table header)
Tabellenkopfzelle

  • scope="col|colspan|row|rowspan" gibt an, dass die Zelle eine Spalte, Spaltengruppe, Zeile bzw. Zeilengruppe beschreibt
  • zusätzlich die Attribute des td-Elements

Beispiel-Quelltext für eine Datentabelle

<table>
  <caption>Beschriftung</caption>
  <thead>
    <tr>
      <td>...</td>
      <th scope="col">Überschrift</th>
      [...]
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">...</th>
      <td>...</td>
      [...]
    </tr>
  </tbody>
</table>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.