Kapitel druckenKapitel drucken

Modul: Text & Tabellen

HTML

Tabellen

HTML-Tabellen werden durch das Tag <table> eingeleitet. Struktur und Inhalte befinden sich innerhalb dieses Tabellenelementes.

HTML-Tabelle als Baumstruktur

Das table-Element kann ein caption-Element für die Tabellenüberschrift, das Element thead mit dem Tabellenkopf und das tbody-Element mit allen weiteren Tabellenzeilen enthalten. Im Tabellenkopf stehen die Tabellenspalten, jede in ein th-Element gehüllt. Das h im th steht für header. Das tbody-Element enthält für jede Zeile ein tr-Element, das wiederum für jede Tabellenzelle ein Element td enthält. table caption thead tbody th tr td Tabellenüberschrift Tabellenkopf (oberste Tabellenzeile) Tabellenkörper Zeile Zelle

Der Tabellenkopf wird in Fettschrift ausgegeben, wenn nichts anderes eingestellt ist. Die Zeilen- und Zellenelemente können selbstverständlich mehrfach vorhanden sein. Beispiel:

   <table>
      <caption>Tabellenüberschrift</caption>
      <thead>
         <th>11</th>
         <th>12</th>
         <th>13</th>
      </thead>
      <tbody>
         <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
         </tr>
         <tr>
            <td>31</td>
            <td>32</td>
            <td rowspan="2">33 und 43 verbunden</td>
         </tr>
         <tr>
            <td colspan="2">41 und 42 verbunden</td>
         </tr>
      </tbody>
   </table>

Das Attribut rowspan verbindet untereinander stehende Zellen miteinander, colspan nebeneinander stehende. Der Wert dieser Attribute gibt an, wie viele Zellen verbunden werden sollen; im Beispiel sind das jeweils zwei. Das wird wie folgt dargestellt:

Tabellenüberschrift
11 12 13
21 22 23
31 32 33 und 43 verbunden
41 und 42 verbunden

Wie Design und Lesbarkeit verbessert werden können, erfahren Sie auf der nächsten Seite.