http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Tabellen

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

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.

Zum Seitenanfang

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>
Listing 5.13: Top 10 der 500 besten Alben aller Zeiten

Zum Seitenanfang

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.

Zum Seitenanfang

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>
Listing 5.14: Top 100 der 500 besten Alben aller Zeiten, vervollständigt


Abb. 5.16: Wiederholung der Spaltenüberschriften

Zum Seitenanfang

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 Elements colgroup gibt die Anzahl der Spalten in der Gruppe an.
  • Das colgroup-Element enthält col-Elemente, von denen jedes eine Spalte der Gruppe repräsentiert. Auch an col-Elementen lässt sich ein span-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 Angabe 25% 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ße 2*, 3* und 5* sind, der 2* 20 Pixel, der 3* 30 Pixel und der 5* 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>
Listing 5.15: Zwei Spaltengruppen mit fester Breite; die beiden letzten Spalten sind in einer Gruppe zusammengefasst
<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>
Listing 5.16: Eine Spaltengruppe mit drei definierten Spalten; feste Breitenangaben
<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>
Listing 5.17: Eine Spaltengruppe mit drei definierten Spalten; Breitenangaben prozentual und fest
<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>
Listing 5.18: Eine Spaltengruppe mit drei definierten Spalten; Breitenangaben proportional und fest


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.«

Zum Seitenanfang

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>


Abb. 5.21: Zellen zeilen- und spaltenübergreifend verbinden