Modul: Text & Tabellen

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

HTML-Tabelle als Baumstruktur

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:

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