a_11 – HTML-Tags: Tabellen

Einfache Tabellenstruktur

Eine Tabelle mit Kopfzeile (<th>) und Datenzeilen (<td>):

<table>
  <!-- Kopfzeile mit <th> statt <td> -->
  <tr>
    <th>Kopfzeile: Spalte 1</th>
    <th>Kopfzeile: Spalte 2</th>
    <th>Kopfzeile: Spalte 3</th>
  </tr>
  <!-- Datenzeilen mit <td> -->
  <tr>
    <td>Daten Zeile 1 Spalte 1</td>
    <td>Daten Zeile 1 Spalte 2</td>
    <td>Daten Zeile 1 Spalte 3</td>
  </tr>
  <tr>
    <td>Daten Zeile 2 Spalte 1</td>
    <td>Daten Zeile 2 Spalte 2</td>
    <td>Daten Zeile 2 Spalte 3</td>
  </tr>
</table>

Kopfzeile: Spalte 1	Kopfzeile: Spalte 2	Kopfzeile: Spalte 3
Daten Zeile 1 Spalte 1	Daten Zeile 1 Spalte 2	Daten Zeile 1 Spalte 3
Daten Zeile 2 Spalte 1	Daten Zeile 2 Spalte 2	Daten Zeile 2 Spalte 3
Daten Zeile 3 Spalte 1	Daten Zeile 3 Spalte 2	Daten Zeile 3 Spalte 3

Komplexere Tabellenstruktur

Tabellen können zusätzlich in Kopf, Körper und Fuß untergliedert werden. Die Attribute rowspan und colspan erlauben es, Zellen über mehrere Zeilen oder Spalten zu spannen:

<table>
  <thead>  <!-- Kopfbereich -->
    <tr>
      <th>Spieler</th> <th>Punkte 1</th> <th>Punkte 2</th> <th>Gesamt</th>
    </tr>
  </thead>

  <tbody>  <!-- Datenbereich -->
    <tr>
      <th>Gerhard</th>
      <td>10</td> <td>10</td> <td>20</td>
    </tr>
    <tr>
      <!-- rowspan="2": diese Zelle überspannt 2 Zeilen -->
      <th rowspan="2">Trudi</th>
      <td>20</td> <td>10</td> <td>30</td>
    </tr>
  </tbody>

  <tfoot>  <!-- Fußbereich -->
    <tr>
      <!-- colspan="3": diese Zelle überspannt 3 Spalten -->
      <th colspan="3">Summe</th>
      <td>100</td>
    </tr>
  </tfoot>
</table>

Spieler	Punkte 1	Punkte 2	Gesamt
Gerhard	10	10	20
Trudi	20	10	30
Trudi	60	-10	20
Franz	30	20	50
Summe			100