Formatierung in Webseiten

Ein wichtiges Gestaltungselement für Webseiten sind Tabellen. Diese sollen natürlich hauptsächlich dazu verwendet werden, um tabellarische Daten (mehrspaltige Listen u. ä.) auf Webseiten darzustellen. Sie können aber auch zum Schaffen eines Seitenlayout eingesetzt werden. Dies ist umstritten ("Tabellen sollen nach ihrem eigentlichen Zweck eingesetzt werden!", "Tabellen sollen nicht missbraucht werden!", ...) aber sehr verbreitet. Der Vorteil liegt darin, dass Seiteninhalt durch Tabellen relativ einfach strukturiert werden kann. Die Nachteile liegen aber auf der Hand: Nicht alle Browser stellen Tabellen immer gleich dar; manchmal wird so das Layout einer Seite verzerrt dargestellt. Auch können z. B. akustische Browser für Behbehinderte die Struktur von Tabellen (die durch Verschachteln derselben mitunter recht kompliziert werden kann) nicht gut erkennen, was die Navigation stark erschwert. Tabellen eignen sich deshalb nicht für das Layout von barrierefreien Webseiten.

Tabellen sind modular aufgebaut. Sie beginnen mit dem Tag <table> und enden mit </table>. Hier wird die Breite der Tabelle und auch (für die ganze Tabelle) der Rahmen festgelegt. Wenn der Rahmen unsichtbar sein soll, muss das Attribut border="0" heißen. Dazwischen befinden sich Zeilen (begrenzt durch <tr> und </tr>), innerhalb dieser stehen Zellen (zwischen <td> und </td>). Eine einfache Tabelle (3 Zeilen, 2 Spalten, 200 Pixel breit, Rahmenbreite 1) sieht so aus:

Folgende kleine Tabelle wurde nun durch Verschachtelung und Verbindung von Zellen etwas erweitert. Der zugehörige Code liest sich nun schon etwas schwieriger:

<table width="300" border="2" bgcolor="#99FFCC">
<tr>
<td colspan="2"><div align="center">Zellen &uuml;ber die ganze Breite verbunden</div></td>
<td rowspan="2">3. Spalte</td>
</tr>
<tr>
<td><table width="100%" border="1" bgcolor="#FFCCCC">
<tr>
<td>Hier</td>
<td>wurde</td>
<td>eine</td>
</tr>
<tr>
<td>ganze</td>
<td>Tabelle</td>
<td>herein-</td>
</tr>
<tr>
<td>gesetzt</td>
<td>(ver-</td>
<td>schachtelt)</td>
</tr>
</table></td>
<td>2. Spalte</td>
</tr>
</table>

Werden ganze Webseiten mit Hilfe von (mehrfach verschachtelten) Tabellen aufgebaut, so geht der Überblick - auch in einem Web-Editor - bald verloren. Auch Änderungen lassen sich dann nur mehr schwer anbringen, beispielsweise wenn Zellen wieder getrennt und anders verbunden werden sollen. Für überschaubare Strukturen innerhalb einer Webseite sind Tabellen jedoch - auch für nicht rein tabellarische Daten - recht brauchbar.

Übrigens lassen sich auch Tabellen durch CSS formatieren.