HTML-Tabellen

Mit den Listen haben wir bereits ein Beispiel für ein strukturiertes HTML-Element behandelt. Ein weitaus flexibleres strukturiertes Element ist die Tabelle. Die Möglichkeiten, HTML-Elemente mit einer Tabelle zu organisieren sind tatsächlich so vielfältig, dass die Tabelle ein Hauptwerkzeug für die Layoutgestaltung von Webseiten ist. Der größte Nachteil dieses Ansatzes besteht darin, dass derartige Webseiten nicht barrierefrei sind. D. h., das Layout der Seiten passt sich nicht automatisch an unterschiedliche Ausgabegeräte an und widersetzt sich der automatischen Auswertung durch Programme, da oftmals kein logischer Zusammenhang zwischen den Textinhalten mehr besteht. Leseprogramme für Blinde können diese Seiten z. B. häufig nicht sinnvoll interpretieren, sodass diese Nutzergruppe ausgeschlossen bleibt.

In Tabellen werden Daten zweidimensional mit Hilfe von Zeilen und Spalten dargestellt. Daneben besitzen Tabellen in der Regel eine Kopfzeile, in der nähere Angaben zur Bedeutung der Tabellenspalten stehen.

Eine Notentabelle könnte z. B. so aussehen: 


Name       Vorname      Note

Müller     Peter        3,7
Meier      Christine    2,3
Schmidt    Torsten      1,7

Um diese Tabelle in HTML zu codieren ist zunächst einmal das Tabellenelement <table>...</table> erforderlich: 

<table>
</table>

Kopfzeileneinträge werden mit Hilfe einer Tabellenzeile erstellt, die durch das Element <tr>...</tr> (engl.: table row) ausgezeichnet wird. In die Kopfzeileneinträge werden die Überschriften mit dem Überschriftselement eingefügt: <th>...</th> (engl.: table header).

Damit ergibt sich für unsere Beispieltabelle: 

<table>
  <tr><th>Name</th><th>Vorname</th><th>Note</th></tr>  
</table>

Um Daten in die Tabelle einzufügen, wird wieder das Zeilenelement verwendet. Die Spaltendaten werden dann allerdings mit dem Datenelement <td>...</td> (engl.: table data) hinzugefügt: 

<table>
  <tr><th>Name</th><th>Vorname</th><th>Note</th></tr>

  <tr><td>Müller</td><td>Peter</td><td>3,7</td></tr>
  <tr><td>Meier</td><td>Christine</td><td>2,3</td></tr>
  <tr><td>Schmidt</td><td>Torsten</td><td>1,7</td></tr>  
</table>

Aufgaben:

Das Beispiel verdeutlicht die früher praktizierte Herangehensweise, mit Hilfe einer Tabelle und Größenangaben eine Webseite in unterschiedliche Bereiche aufzuteilen. Eine typische Aufteilung sieht dabei so aus, dass um einen relativ großen zentralen Bereich, in dem die Hauptinformationen der Webseite angezeigt werden, mehrere kleinere Bereiche angeordnet werden, in denen Hilfsinformationen, wie z. B. Menüs für das Verzweigen zu anderen Seiten, angezeigt werden.

Hierfür werden häufig nicht alle Spalten benötigt. In der ersten Zeile der Tabelle könnte z. B. die Überschrift eines Webauftrittes stehen. In diesem Fall würde in der ersten Zeile eine einzelne Spalte ausreichen.

Die Anzahl der zu verwendenden Spalten in einer Zeile bzw. Zeilen in einer Spalte wird mit Hilfe der Attribute rowspan und colspan in dem Zeilen- oder Spaltenelement festgelegt. Lesen Sie hierzu den Abschnitt Zellen verbinden.

Aufgaben:

Die klassische Methode der Webseitenaufteilung führt zu einem starren Layout der Seite und einer Vermischung von Inhalt und Gestaltung. Sie wurde daher durch das Layouten mit Hilfe von Cascading Style Sheets (CSS) ersetzt. Dies ist das Thema des nächsten Übungsblattes.

Aufgabe: Gestalten Sie mit der klassischen Methode eine Webseite, deren Seitenaufteilung dem unten abgebildeten Beispiel gleicht: