Tabellen

Tabellen sind ein häufig verwendetes Gestaltungsmittel für Informationen. Sie werden ebenfalls nach dem „Schachtel-Prinzip“ aufgebaut und auch hier können die Tags durch Optionen „verfeinert“ werden.

Zunächst ein Beispiel für eine einfache Tabelle:

<table border="1">
  <caption>Pfannkuchenteig</caption>
  <tr>
    <th>Menge</th>
    <th>Zutat</th>
  </tr>
  <tr>
    <td>500 g</td>
    <td>Mehl</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Eier</td>
  </tr>
  <tr>
    <td>1 l</td>
    <td>Milch</td>
  </tr>
  <tr>
    <td>1 Prise</td>
    <td>Salz</td>
  </tr>
</table>

Dieser Code erzeugt eine Tabelle mit folgendem Aussehen:

Wie Sie sehen, nimmt Ihnen der Browser bei der Darstellung der Tabelle einige Arbeit ab: Der Text im Tabellenkopf wird fett und ggf. zentriert dargestellt, und um die Linien müssen Sie sich auch nicht kümmern.

Zunächst zum allgemeinen Aufbau:

• Eine Tabelle wird durch <table> und </table> begrenzt.
• Der Text zwischen <caption> und </caption> dient als Tabellenüberschrift.
• Zeilen werden in <tr> und </tr> gefasst.
• Eine Zelle beginnt mit <td> und endet mit </td> (im Kopf <th> und </th>).

Wie gewohnt können Sie auch das Erscheinungsbild von Tabellen in vielfältiger Weise modifizieren. Mit den im <table>-Tag erlaubten Optionen cellspacing= und cellpadding= können Sie beispielsweise sowohl den Abstand zwischen den Zellen als auch das „Polster“ zwischen Zelleninhalt und -rahmen definieren. Geben Sie hinter diesen Optionen einfach die gewünschten Werte in Pixeln an, z. B. <table cellspacing="2" cellpadding="4">. Darüber hinaus kann die Hintergrundfarbe aller Tabellenelemente frei gewählt werden. Geben Sie hierzu die Option bgcolor= gefolgt von einem Farbwert oder -namen an, zum Beispiel <td bgcolor="red">.

Außerdem können Sie mehrere Zellen zusammenfassen, und zwar sowohl neben- als auch übereinander stehende Zellen. Die hierfür zur Verfügung stehenden Optionen heißen colspan= für horizontal zusammengefasste Zellen und rowspan= für die Verschmelzung übereinander stehender Zellen. Geben Sie hinter diesen Optionen jeweils an, wie viele Zellen zusammengefasst werden sollen, zum Beispiel <td rowspan="2">. Die dadurch entfallenden Zellen dürfen Sie dann nicht definieren. Beispiele hierfür:

…
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td colspan="2">2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
…

…
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td rowspan="2">2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
…

…
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
  <td>1</td>
  <td rowspan="2" colspan="2">2</td>
  <td>3</td>
</tr>
<tr><td>1</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
…

Die horizontale Ausrichtung des Zelleninhaltes geben Sie mit der Option align= an, die vertikale Ausrichtung legen Sie mit valign= fest. Hinter align= können Sie die Werte "left" (Standard), "center" oder "right" angeben, hinter valign= sind die Angaben "top", "middle" (Standard) und "bottom" möglich.

Die folgende Tabelle enthält einige der vorgestellten Optionen:

Und deren HTML-Code sieht folgendermaßen aus:

<table border="0" cellspacing="0" cellpadding="2">
  <caption>Pfannkuchenteig</caption>
  <tr bgcolor="gray">
    <td rowspan="6"></td>
    <th>Menge</th>
    <th>Zutat</th>
    <td rowspan="6"></td>
  </tr>
  <tr bgcolor="#f0f0f0"><td align="right">500 g</td><td>Mehl</td></tr>
  <tr bgcolor="#e0e0e0"><td align="right">4</td><td>Eier</td></tr>
  <tr bgcolor="#f0f0f0"><td align="right">1 l</td><td>Milch</td></tr>
  <tr bgcolor="#e0e0e0"><td align="right">1 Prise</td><td>Salz</td></tr>
  <tr><td colspan="2" bgcolor="gray"></td></tr>
</table>

Wie Sie sehen, können Sie den Quelltext nahezu beliebig auf mehrere Zeilen verteilen und einrücken. Machen Sie von diesen Möglichkeiten Gebrauch – es gibt in HTML kaum Schlimmeres, als unübersichtlichen Tabellencode überarbeiten zu müssen! Die Tabelle ist inhaltlich wirklich simpel – und trotz passender Umbrüche und Einrückungen ist der Code nur schlecht lesbar.

Tipp: Wenn Sie einmal eine Tabelle überarbeiten müssen und sich erst einen Überblick verschaffen möchten, dann versehen Sie beispielsweise die Zellen bzw. die <td>-Tags dieser Tabelle nacheinander mit einer Option, die einen sichtbaren Effekt erzeugt (z. B. bgcolor="lime") und sehen sich das Ergebnis nach jeder Änderung im Browser an.

Weiter zu: Kommentare · Tabellen als Gestaltungsmittel

Nach oben