Tabellen sind geordnet angezeigte Daten, oft als eine Anzahl von Listen in parallelen Spalten oder rechtwinkligen Anordnungen, die sich nach einer bestimmten Regel aufeinander beziehen. Tabellen eignen sich dazu, Informationen in (visuell) sinnvollen Untermengen zu organisieren.
Das Tabellenmodell von XHTML gestattet Webautoren die Anordnung von Daten – Text, vorformatiertem Text, Bildern, Links, Formularen, Formularfeldern oder anderen Tabellen – in Zellen, die in Zeilen und Spalten angeordnet sind.
Tabellen, Zeilen, Kopf- und Datenzellen: Die Elementtypen table, tr, th und td
Das Element table
bildet den Container für die Auszeichnung von Tabellen.
Das Element tr
fungiert als Behälter für eine Zeile, die mehrere
Zellen enthält.
Tabellenzellen können zwei Informationsarten enthalten:
Kopfinformationen und Daten. Diese Unterscheidung hilft
Benutzerprogrammen, Kopf- und Datenzellen unterschiedlich
darzustellen: Text in Kopfzellen könnte in fett gedruckter
Schrift angezeigt oder in einem anderen Tonfall vorgelesen
werden. Das Element th
definiert eine
Zelle, die Kopfinformationen enthält. Das Element td
definiert eine
Zelle, die Daten enthält.
Wie bereits in Kapitel 5.6 »Listen« erwähnt, lassen sich viele Listen auch als Tabelle darstellen. Listing 5.13 zeigt die Auszeichnung der Top 10 der 500 besten Alben aller Zeiten als einfache Tabelle (vgl. die Auszeichnung als Liste in Listing 5.9).
<table> <tr> <th>Rang</th> <th>Titel</th> <th>Interpret</th> </tr> <tr> <td>1</td> <td>Sgt. Pepper's Lonely Hearts Club Band</td> <td>The Beatles</td> </tr> <tr> <td>2</td> <td>Pet Sounds</td> <td>The Beach Boys</td> </tr> <tr> <td>3</td> <td>Revolver</td> <td>The Beatles</td> </tr> <!-- weitere Zeilen --> </table>
Tabellenüberschrift, Zusammenfassung und Abkürzungen: Der Elementtyp caption und die Attribute summary und abbr
Das Element caption
erzeugt eine
Tabellenüberschrift.
Oftmals ist es erwünscht, aus einer Tabellenüberschrift eine Tabellenunterschrift zu machen. Die Ausrichtung bestimmen Sie mit CSS (siehe Kapitel 7.11.7).
Die BITV fordert in Bedingung 5.5:
»Für Tabellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Zusammenfassungen bereitzustellen.«
In Bedingung 5.6 ist zu lesen:
»Für Überschriftenzellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Abkürzungen bereitzustellen.«
Erfüllen lassen sich diese Forderungen
über die Attribute summary
für Elemente vom Typ
table
und abbr
für
Elemente vom Typ th
beziehungsweise td
.
Das Attribut summary
bietet eine
Zusammenfassung der Intention und der Struktur einer Tabelle
für Benutzerprogramme, die den Inhalt für nicht
visuelle Medien wie Sprach- oder Braillebrowser ausgeben.
Das summary
-Attribut wird in visuellen
Browsern nicht angezeigt, dient Nutzern von Screenreadern jedoch
als gute Orientierungshilfe.
Das Attribut abbr
kann dazu
verwendet werden, eine abgekürzte Form von Zeilen- und
Spaltenüberschriften zur Verfügung zu stellen.
Diese Maßnahme hat zur Folge, dass in Sprachausgaben lediglich
beim ersten Lesen der Überschriftenzelle der komplette Text
vorgelesen wird, während bei weiteren Bewegungen in der
Tabelle nur die Kurzbezeichnung angesagt wird. Verwenden Sie das
Attribut abbr
nur bei sehr langen
Überschriftenzellen.
Zeilengruppen: Die Elementtypen thead, tfoot und tbody
Tabellenzeilen können mit den Elementen thead
,
tfoot
und tbody
in einen Tabellenkopf, einen Tabellenfuß und in einen oder
mehrere Rumpfbereiche unterteilt werden. Diese Teilung
ermöglicht es Benutzerprogrammen, das Scrollen von
Tabellenrümpfen unabhängig von Tabellenkopf und
-fuß zu unterstützen. Werden lange Tabellen gedruckt,
können Informationen des Tabellenkopfs und -fußes auf
jeder Seite mit Tabellendaten wiederholt werden. Tabellenkopf und
-fuß sollten Informationen über die Tabellenspalten
enthalten. Der Tabellenrumpf sollte Zeilen mit Tabellendaten
enthalten.
Vermutlich wären Sie nicht darauf gekommen, dass Sie die drei Bereiche
in der Reihenfolge thead
, tfoot
, tbody
notieren
müssen; der Tabellenfuß steht vor dem Tabellenrumpf,
damit Benutzerprogramme den Fuß darstellen können,
bevor alle (der eventuell zahlreichen) Datenzeilen empfangen
werden.
Listing 5.14 ergänzt die Tabelle aus Listing 5.13 um die entsprechenden Auszeichnungen für Tabellenkopf und -rumpf. Spannend wird das Dokument erst dann, wenn Sie sich die Druckvorschau ansehen oder das Dokument ausdrucken; die Spaltenüberschriften werden auf jeder Seite wiederholt (siehe Abbildung 5.16).
<table> <caption>Die Top 10 der 500 besten Alben aller Zeiten</caption> <thead> <tr> <th>Rang</th> <th>Interpret</th> <th>Titel</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Sgt. Pepper's Lonely Hearts Club Band</td> <td>The Beatles</td> </tr> <tr> <td>2</td> <td>Pet Sounds</td> <td>The Beach Boys</td> </tr> <tr> <td>3</td> <td>Revolver</td> <td>The Beatles</td> </tr> <!-- weitere Zeilen --> </tbody> </table>
Abb. 5.16: Wiederholung der Spaltenüberschriften
Spaltengruppen: Die Elementtypen colgroup und col
Die Darstellung einer Tabelle in visuellen Browsern ergibt sich aus den definierten Zeilen und Spalten (und natürlich aus den CSS-Regeln, die auf eine Tabelle angewendet werden), allerdings haben einige vor allem ältere Browser Schwierigkeiten beim Aufbau einer besonders umfangreichen Tabelle, wenn diese noch nicht vollständig geladen wurde. Die Definition von Spaltengruppen kann die Darstellung beschleunigen.
Das Element colgroup
erzeugt eine
Spaltengruppe. Für die Angabe der Anzahl der Spalten in der
Spaltengruppe gibt es zwei sich gegenseitig ausschließende
Möglichkeiten:
- Das
span
-Attribut des Elementscolgroup
gibt die Anzahl der Spalten in der Gruppe an. - Das
colgroup
-Element enthältcol
-Elemente, von denen jedes eine Spalte der Gruppe repräsentiert. Auch ancol
-Elementen lässt sich einspan
-Attribut notieren. Es gibt die Anzahl der Spalten an, die das Element umfasst.
Es ist erlaubt, mehrere Spaltengruppen innerhalb einer Tabelle zu definieren.
Das Attribut width
lässt sich
sowohl für colgroup
- als auch für
col
-Elemente notieren. Es gibt die
Standardbreite für jede Spalte der aktuellen Spaltengruppe
(colgroup
) an beziehungsweise die
Standardbreite für jede Spalte, über die sich das
aktuelle col
-Element erstreckt.
Das width
-Attribut kann drei Arten von
Werten annehmen:
- Einen Pixelwert (z. B.
width="50"
): eine feste Breitenangabe. - Einen Prozentwert (z. B.
width="25%"
): eine relative Breitenangabe, die auf dem Prozentsatz des horizontalen Raums basiert, der für die Tabelle zur Verfügung steht. Die Angabe25%
bedeutet folglich ein Viertel des verfügbaren Platzes. - Einen Proportionalwert (z. B.
width="3*"
): eine relative Breitenangabe der Spalten untereinander. Wenn Benutzerprogramme Spalten Platz zuweisen, weisen sie zuerst Pixel- und Prozentwerte zu, dann verteilen sie den verbleibenden verfügbaren Platz unter den relativen Maßen. Folglich werden, wenn 100 Pixel an Platz verfügbar sind, nachdem das Benutzerprogramm Pixel- und Prozentwerte zugewiesen hat, und die relativen Maße2*
,3*
und5*
sind, der2*
20 Pixel, der3*
30 Pixel und der5*
50 Pixel zugewiesen.
Wie genau das aussehen kann, wird klarer, wenn
Sie sich Listing 5.15 bis Listing 5.18 nebst den zugehörigen
Abbildungen anschauen. Damit Sie die Darstellung der Tabellen
besser vergleichen können, führe ich das Attribut
border
ein und weise der dritten
und vierten Tabelle eine Gesamtbreite von 100 Prozent zu.
Das Attribut border
gibt die Breite
des Rahmens um eine Tabelle und deren Zellen in Pixeln an.
Zugunsten entsprechender CSS-Eigenschaften (siehe Kapitel 7.5.4 bis Kapitel 7.5.7) können Sie auf dieses Attribut verzichten.
<table border="1"> <caption>Die Top 3 der 500 besten Alben aller Zeiten</caption> <colgroup width="50" /> <colgroup width="250" span="2" /> <thead> <tr> <th>Rang</th> <th>Titel</th> <th>Interpret</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Sgt. Pepper's Lonely Hearts Club Band</td> <td>The Beatles</td> </tr> <!-- weitere Zeilen --> </tbody> </table>
<table border="1"> <caption>Die Top 3 der 500 besten Alben aller Zeiten</caption> <colgroup> <col width="50" /> <col width="250" /> <col width="200" /> </colgroup> <thead> <tr> <th>Rang</th> <th>Titel</th> <th>Interpret</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Sgt. Pepper's Lonely Hearts Club Band</td> <td>The Beatles</td> </tr> <!-- weitere Zeilen --> </tbody> </table>
<table border="1" width="100%"> <caption>Die Top 3 der 500 besten Alben aller Zeiten</caption> <colgroup> <col width="10%" /> <col width="50%" /> <col width="200" /> </colgroup> <thead> <tr> <th>Rang</th> <th>Titel</th> <th>Interpret</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Sgt. Pepper's Lonely Hearts Club Band</td> <td>The Beatles</td> </tr> <!-- weitere Zeilen --> </tbody> </table>
<table border="1" width="100%"> <caption>Die Top 3 der 500 besten Alben aller Zeiten</caption> <colgroup> <col width="1*" /> <col width="5*" /> <col width="200" /> </colgroup> <thead> <tr> <th>Rang</th> <th>Titel</th> <th>Interpret</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Sgt. Pepper's Lonely Hearts Club Band</td> <td>The Beatles</td> </tr> <!-- weitere Zeilen --> </tbody> </table>
Abb. 5.17: Darstellung von Listing 5.15 in Firefox 3
Abb. 5.18: Darstellung von Listing 5.16 in Firefox 3
Abb. 5.19: Darstellung von Listing 5.17 in Firefox 3
Abb. 5.20: Darstellung von Listing 5.18 in Firefox 3
Gerade bei der Darstellung der vierten Tabelle werden Sie in unterschiedlichen Browsern teilweise völlig abweichende Darstellungen vorfinden. Je älter der Browser, desto größer die Abweichung. Daher rate ich von der Verwendung von Proportionalwerten ab. Ziehen Sie stattdessen Prozentwerte vor, entsprechend BITV, Bedingung 3.4:
»Es sind relative anstelle von absoluten Einheiten in den Attributwerten der verwendeten Markup-Sprache und den Style-Sheet-Property-Werten zu verwenden.«
Zellen miteinander verbinden: Die Attribute colspan und rowspan
Das Attribut rowspan
gibt die
Anzahl der Zeilen an, über die sich die aktuelle Zelle
erstreckt, das Attribut colspan
entsprechend
die Anzahl der Spalten. Der Standardwert beider Attribute ist
1
. Der Wert 0
bedeutet, dass
sich die Zelle von der aktuellen Zeile oder Spalte bis zur
letzten Zeile oder Spalte des Tabellenabschnitts (Kopf, Fuß
oder Rumpf) erstreckt, in dem die Zelle definiert ist.
<table> <tr> <td>Zelle 1, Zeile 1</td> <td colspan="2">Zellen 2 und 3, Zeile 1</td> </tr> <tr> <td>Zelle 1, Zeile 2</td> <td>Zelle 2, Zeile 2</td> <td>Zelle 3, Zeile 2</td> </tr> </table>
Natürlich lassen sich colspan
und
rowspan
miteinander kombinieren,
um eine Zelle über mehrere Zeilen und Spalten
auszudehnen.
<table> <tr> <td colspan="2" rowspan="2">Zelle 1 und 2, Zeilen 1 und 2</td> <td>Zelle 3, Zeile 1</td> </tr> <tr> <td>Zelle 3, Zeile 2</td> </tr> <tr> <td>Zelle 1, Zeile 3</td> <td>Zelle 2, Zeile 3</td> <td>Zelle 3, Zeile 3</td> </tr> </table>