Websiteentwicklung: XHTML: Tabellen

Aus Wikibooks

Websiteentwicklung XHTML Tabellen

Tabellen dienen zur Strukturierung von Daten in einer tabellarischen Form. Sie werden aber von vielen Webentwicklern fehlerhaft eingesetzt. Sie dürfen nicht zur Ausrichtung und Gestaltung von Objekten auf der Webseite benutzt werden! Diese Methode ist zwar einfach, spätestens bei komplexeren Layouts kommt es aber zu einem erheblichen Verwaltungsaufwand. Auch die Größe und damit der Traffic der Webseite wächst, Screenreader haben Probleme mit dem Lesen von Layouttabellen, und Anerkennung von den professionnellen Webentwicklern sollte man keinenfalls erwarten.

Dieses Kapitel geht nur auf die XHTML-Grundlagen einer Tabelle ein. Die Verwendung von CSS und fortgeschrittenen Tabellentags wird hier nicht behandelt. Diese bieten jedoch erheblich mehr Möglichkeiten für die Gestaltung und Struktur von Tabellen.

[Bearbeiten] Grundgerüst einer Tabelle

Zur Umsetzung von Tabellen sind grundsätzlich 3 Tags notwendig. <table> dient zur Einleitung der Tabelle. <tr> definiert eine neue Tabellenzeile und <td> eine neue Tabellenzelle. In dieser Reihenfolge müssen die Tags auch ineinander verschachtelt werden. Ein sehr einfaches Beispiel ist folgendes:

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Überschrift, 1. Spalte</th>
        <th>Überschrift, 2. Spalte</th>
        <th>Überschrift, 3. Spalte</th>
    </tr>
    <tr>
        <td>1. Zeile, 1. Spalte</td>
        <td>1. Zeile, 2. Spalte</td>
        <td>1. Zeile, 3. Spalte</td>
    </tr>
    <tr>
        <td>2. Zeile, 1. Spalte</td>
        <td>2. Zeile, 2. Spalte</td>
        <td>2. Zeile, 3. Spalte</td>
    </tr>
    <tr>
        <td>3. Zeile, 1. Spalte</td>
        <td>3. Zeile, 2. Spalte</td>
        <td>3. Zeile, 3. Spalte</td>
    </tr>
</table>

Die Tabelle wird mit <table> eingeleitet. Auf die verwendeten Attribute gehen wir später ein. <tr> eröffnet jetzt die erste Tabellenzeile. Mit der Sonderform <th> wird nun eine Tabellenzelle erstellt, die als Tabellenkopf definiert ist. <th> funktioniert genau wie <td>. Nun wird der Tabelleninhalt gesetzt, in unserem Fall nur Text. Der Tabellenkopf muss danach wieder geschlossen werden. Es folgen nun zwei weitere Tabellenkopfzellen in der selben Zeile. Wenn sie dann keine neue Zelle für diese Zeile benötigen, wird diese mit </tr> abgeschlossen. Sie können nun wieder so viele neue Zeilen definieren wie Sie möchten. Die Tabelle wird dann mit </table> abgeschlossen.

[Bearbeiten] Spannweite von Zellen

Wer das obige Beispiel so verändert hat, das er keine balancierte Tabelle mehr hat, wird merken das er Löcher erhält mit denen sich nichts anfangen lässt. Manchmal möchte man diesen Zustand aber nutzen um Zellen verschiedene Spannweiten zu geben. Das bedeutet, das eine Zelle die Höhe oder Weite wie zwei oder mehr andere Zellen hat. Dafür sind die Attribute colspan und rowspan vorhanden. Als Wert bekommen sie die Spannweite bzw -höhe. Diese müssen direkt im Tag der Tabellenzelle angegeben werden. Ein Beispiel:

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">Zelle mit colspan="2"</td>
        <td rowspan="3">Zelle mit rowspan="3"</td>
    </tr>
    <tr>
        <td>2. Zeile, 1. Spalte</td>
        <td>2. Zeile, 2. Spalte</td>
    </tr>
    <tr>
        <td>3. Zeile, 1. Spalte</td>
        <td>3. Zeile, 2. Spalte</td>
    </tr>
</table>

Man sieht das die erste Zelle mit colspan sich über zwei Zellen erstreckt. Die Zelle mit rowspan spannt sich über alle drei Zeilen. Zu beachten ist das sich Zellen immer von nach Rechts bzw. nach Unten spannen, und man die Zellen über die gespannt wird, rausnehmen muss.

[Bearbeiten] Tabellenformatierung

[Bearbeiten] Breite und Höhe

Eine Tabelle besitzt keine definierbare Höhe^[1]. Sie ergibt sich automatisch aus dem Inhalt der Tabelle. Die Breite lässt sich über das Attribut width festlegen. Wird keine Breite festgelegt, wird wie bei der Höhe ein Mindestwert genommen, der sich aus dem Inhalt der Tabelle ergibt. Als Wert für width kann man eine Breite in Pixel oder in Prozent nehmen.

<table ... width="60%">
    ...
</table>

[Bearbeiten] Hintergrundfarbe

Der XHTML-Standard lässt außerdem über das Attribut bgcolor eine Hintergrundfarbe zu. Die Definiton der Farben steht im Kapitel Farben. Wird keine Hintergrundfarbe angegeben, ist die Tabelle transparent.

<table ... bgcolor="Green">
    ...
</table>

[Bearbeiten] Ausrichtung

Das Attribut align dient zur Ausrichtung der Tabelle. Gültige Werte sind left, center und right. Wird das Attribut nicht angegeben, ist die Tabelle linksbündig.

<table ... align="center">
    ...
</table>

[Bearbeiten] Zellenzwischenraum

Über das Attribut cellspacing lässt sich die Größe des Raumes zwischen den Zellen definieren. Als Wert wird eine Größe in Pixel oder Prozent genommen. Man beachte das dieser Wert verdoppelt wird, da jede Zelle diesen Raum um sich herum zieht.

<table ... cellspacing="3">
    ...
</table>

[Bearbeiten] Zellenrand

cellpadding gibt den inneren Abstand in einer Zelle an. Dieser sagt wie weit der Inhalt einer Zelle vom Rand der Zelle entfernt ist. Als Wert wird eine Größe in Pixel oder Prozent genommen.

<table ... cellpadding="2">
    ...
</table>

[Bearbeiten] Rahmen

Die Stärke (oder Dicke) des Tabellen- und Zellenrahmens wird über das Attribut border festgelegt. Man beachte auch hier wieder, das sowohl jede Zelle als auch die Tabelle ans Ganzes diesen Rahmen bekommen. Wird das Attribut nicht angegeben, hat die Tabelle keinen Rahmen.

<table ... border="1">
    ...
</table>

[Bearbeiten] Zellenformatierung

Folgende Attribute stehen zur weiteren Formatierung von Tabellenzellen zur Verfügung:

[Bearbeiten] Breite und Höhe

Eine Zelle hat sowohl eine Breite width als auch eine Höhe height. Als Wert wird eine Größe in Pixel oder Prozent erwartet. Die Weite und Höhe sind exklusive der Rahmendicke, des inneren Randes und des äußeren Randes.

...
    <td width="200" height="80">...</td>
...

[Bearbeiten] Hintergrundfarbe

Über das Attribut bgcolor lässt sich eine Hintergrundfarbe definieren. Die Definiton der Farben steht im Kapitel Faben. Wird keine Hintergrundfarbe angegeben, ist die Tabelle transparent.

...
    <td bgcolor="Gold">...</td>
...

[Bearbeiten] Ausrichtung des Inhalts

Die Attribute align (horizontale Ausrichtung) und valign (vertikale Ausrichtung) sind zum Ausrichten des Inhalts der Zelle. Das Attribut align kann die Werte left, center, right und justify (Blocksatz) haben. Für die vertikale Ausrichtung gibt es die Werte top, middle, bottom und baseline.

...
    <td align="center" valign="top">...</td>
...

[Bearbeiten] Beispiel

In diesem Beispiel werden alle hier erwähnten Tags und Attribute eingesetzt.

<table border="1" cellpadding="6" cellspacing="2" align="center" bgcolor="#008000" width="60%">
    <tr>
        <td align="center" colspan="2">Zelle mit colspan="2"</td>
        <td rowspan="3">Zelle mit rowspan="3"</td>
    </tr>
    <tr>
        <td valign="top" bgcolor="green">2. Zeile, 1. Spalte</td>
        <td height="20">2. Zeile, 2. Spalte</td>
    </tr>
    <tr>
        <td width="60%">3. Zeile, 1. Spalte</td>
    </tr>
</table>

Fußnoten

1. ↑ Siehe http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Transitional

Zurück zu Bilder | Hoch zu XHTML | Vor zu Formulare