Tabellen im Web – Teil 2 – Die richtige Code-Struktur

von Thomas | 0 | 7747 Aufrufe

2 Code-Struktur

Anzeige Hier werben

Voraussetzung für die effektive Arbeit an der Abbildung einer Tabelle im Web ist, wie im Print, die wohl strukturierte Vorbereitung. Meist liegt dem Gestalter ein Manuskript in digitaler oder analoger Form vor, welches für das Medium Web aufbereitet werden soll.

Nach der obligatorischen gedanklichen Einarbeitung und Strukturierung der Vorlage, kann sich der Gestalter an die konkrete Umsetzung und Definition der Grundstruktur der Tabelle mittels (X)HTML wagen.

2.1 <Tags> und Attribute im Überblick

<Tag>Beschreibung
<table> Leitet die Tabelle ein
<caption> Ein klarer Titel für die Tabelle
innerhalb von <table>
<thead> Umfasst den Kopfbereich der Tabelle
innerhalb von <table>
<tfoot> Umfasst den Tabellen-Fuß
innerhalb von <table>,
unterhalb von <thead>
, oberhalb von <tbody>
<tbody> Umfasst den eigentlichen Inhalt („Körper“) der Tabelle
innerhalb von <table>,
unterhalb von <tfoot>
<tr> Beschreibt eine einzelne Reihe
innerhalb von <thead>
innerhalb von <tbody>
innerhalb von <tfoot>
<th/td> Beschreibt eine einzelne Zelle in Kopf/Fuß (<th>) oder Körper (<td>) einer Zeile
innerhalb von <tr>
<colgroup/col> Gibt dem Browser Anweisungen, wie viele Spalten (<colgroup>) mit welchen Eigenschaften (<col>) anzulegen sind
innerhalb von <table>
unterhalb von <caption>
AttributBeschreibung
colspan="#" Gibt an, über wie viele (#) Spalten sich die Zelle erstrecken soll
Attribut von <th/td>
rowspan="#" Gibt an, über wie viele (#) Zeilen sich die Zelle erstrecken soll
Attribut von <th/td>

Oben finden Sie alle wichtigen (X)HTML-Tags zum Aufbau der Tabellen-Struktur im Überblick. Nachfolgend gehen wir auf diese genauer und an Hand verschiedener Beispiele ein.

2.2 Aufbau der Grundstruktur

<table> und <caption>

Die gesamte Tabelle wird stets von einem <table> umschlossen.

Noch vor der weiteren Gliederung sollte als erstes Element innerhalb der Tabelle ein <caption> eingefügt werden, um die Tabelle selbst klar zu überschreiben. Der Inhalt des <caption>-Tags wird in der Regel oberhalb der Tabelle dargestellt.

Table-Caption
Codebeispiel  
HTML
1
2
3
<table>
    <caption>Tabellentitel</caption>
</table>
<thead>, <tbody> und <tfoot>

Die nächsten Schritte entsprechen der logischen Gliederung einer Tabelle wie zuvor bereits beschrieben.

Zunächst werden die Bereiche <thead> (Kopf), <tbody> (Körper) und <tfoot> (Fuß) eingeführt. Eine Einteilung in diese Grundbereiche ist zwar optional, bietet sich jedoch zur Übersichtlichkeit sowie zur späteren differenzierten Ansprache bspw. durch Stylesheets unbedingt an. Es kann dabei jeweils nur 1 <thead> und 1 <tfoot>, jedoch beliebig viele <tbody> angelegt werden!

thead tbody tfoot
Codebeispiel  
HTML
1
2
3
4
5
6
7
<table>
    <caption>Tabellentitel</caption>
    <!-- Die 3 Grundbereiche -->
    <thead></thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>
<tr> und <th/td>

Innerhalb dieser 3 grundlegenden Bereiche erfolgt nun eine Einteilung in die jeweils benötigte Anzahl einzelner Zeilen mittels des <tr>-Tags (tr = table row = Tabellenzeile).

Jede einzelne Zeile gliedert sich ihrerseits in eine bestimmte Anzahl Spalten. Dabei kommt innerhalb des <thead> sowie des <tfoot> zur Einteilung der <th>-Tag (th = table head = Tabellenkopf), im <tbody> der <td>-Tag (td = table data = Tabellendaten) zum Einsatz.

Zu beachten ist, dass an Hand der Zellen- und damit Spalten-Zahl in der ersten Zeile des Kopfes die Spaltenanzahl der Tabelle festgelegt wird – d.h. alle nachfolgenden Zeilen müssen dieselbe Anzahl Zellen/Spalten aufweisen.

Um bspw. eine zweispaltige Tabelle mit einem Kopf, einem Körper aus zwei Zeilen und einem Fuß zu definieren, wird folgende Struktur angelegt.

Bild zu Tabellen im Web – Teil 2 – Die richtige Code-Struktur
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
    <caption>Tabellentitel</caption>
    <!-- Die 3 Grundbereiche -->
    <thead>
        <tr>
            <!-- Spalten -->
            <th>Name</th>
            <th>Wohnort</th>
        </tr>
    </thead>
    <tbody>
        <!-- Die eigentlichen Daten -->
        <tr>
            <td>Franz</td>
            <td>Bayern</td>
        </tr>
        <tr>
            <td>Friedrich</td>
            <td>Hamburg</td>
        </tr>
    </tbody>
</table>
Zellen über mehrere Zeilen/Spalten: colspan und rowspan

Mit Hilfe der beiden Attribute colspan und rowspan lässt sich die Einschränkung der tabellenweit immer gleichen Spalten- oder Zeilenzahl auflösen. Somit lassen sich alle erdenklichen Tabellenstrukturen erstellen.

Bild zu Tabellen im Web – Teil 2 – Die richtige Code-Struktur
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table>
    <caption>Tabellentitel</caption>
    <!-- Die 3 Grundbereiche -->
    <thead>
        <tr>
            <!-- Spalten -->
            <th>Name</th>
            <th>Wohnort</th>
            <th>Bundesland</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Franz</td>
            <td>München</td>
            <td>Bayern</td>
        </tr>
        <tr>
            <!-- Die nachfolgende Zelle erstreckt sich über 2 Zeilen -->
            <td rowspan="2" >Friedrich</td>
            <td>Augsburg</td>
            <td>Bayern</td>
        </tr>
        <tr>
            <!-- Die erste Zelle entfällt -->
            <!-- Die nachfolgende Zelle erstreckt sich über 2 Spalten -->
            <td colspan="2" >Hamburg</td>
        </tr>
    </tbody>
</table>
Leere Zellen

Leere Tabellenzellen, also Zellen die keinen Inhalt tragen, werden je nach Browser als „nicht vorhanden“ interpretiert und somit überhaupt nicht dargestellt. In diesem Fall ist die korrekte Notation für leere Zellen <td>&#160;</td>.

Arbeiten mit Spalten: <colgroup> und <col>

Der Browser beginnt mit dem Zeichnen der Tabelle erst, wenn er alle Spalten eingelesen hat. Das bedeutet, dass sich bei umfangreichen Tabellen der Seitenaufbau verzögern kann.

Um dieses Problem zu umgehen, lassen sich schon im ersten Teil der Tabelle die Spalten definieren.

Bild zu Tabellen im Web – Teil 2 – Die richtige Code-Struktur
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table width="100%" >
    <caption>Tabellentitel</caption>
    <!-- Benötigte Spalten -->
    <colgroup>
        <col width="30%"/>
        <col width="70%"/>
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Wohnort</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Franz</td>
            <td>Bayern</td>
        </tr>
        <tr>
            <td>Friedrich</td>
            <td>Hamburg</td>
        </tr>
    </tbody>
</table>

Der tabellenspezifische Tag <colgroup> (colgroup = column group = Spaltengruppe) lässt sich auf zwei unterschiedliche Arten einsetzen:

Werden bspw. 6 gleichbreite Tabellenspalten benötigt, so nutzt man die Notation <colgroup width="150" span="6"></colgroup> – auf diese Weise werden 6 Spalten mit jeweils 150px Breite erstellt.

Sollen die Spalten unterschiedliche Breiten aufweisen, so nutz man die Notation

Bild zu Tabellen im Web – Teil 2 – Die richtige Code-Struktur
 
HTML
1
2
3
4
5
6
<colgroup span=3>
    <col width="50" />
</colgroup>
<colgroup span=3>
    <col width="150" />
</colgroup>

So erhält man sechs Spalten, die ersten drei mit 50px, die zweiten drei mit 150px Breite.

Interessant wird es jedoch, wenn man beide Möglichkeiten kombiniert. Hat man eine Tabelle mit 6 Spalten, bei der sich die Spaltenbreiten von 50px und 150px abwechseln sollen, notiert man einfach folgendes:

Bild zu Tabellen im Web – Teil 2 – Die richtige Code-Struktur
 
HTML
1
2
3
4
<colgroup span="6">
    <col width="50" />
    <col width="150" />
</colgroup>

Die HTML 4.01-Spezifikation (http://www.edition-w3.de/TR/1999/REC-html401-19991224/struct/tables.html#h-11.2.4) erlaubt die Definition von beliebig vielen Spaltengruppen für eine Tabelle.

Kopfspalte statt -zeile: scope

Die Kopfzellen einer Tabelle können nicht nur im Kopfbereich einer Tabelle eingesetzt werden. Je nach Manuskript und darzustellenden Daten ergibt sich unter Umständen der Bedarf, auch einen Rand der Tabelle als Zeilenbeschriftung zu nutzen. Um eine eindeutige Zuordnung (gerade auch für Screenreader) zu gewährleisten, lassen sich <th>-Zellen Spalten oder Zeilen zuordnen. Diese Zuordnung erfolgt mit Hilfe des Attributes scope="col" (scope = Bereich; col = column = Spalte) für Spalten und scope="row" (row = Zeile) für Zeilen. Ohne eine weitere Angabe geht der Browser also von scope="col" aus: Die Kopfzelle bezieht sich auf die darunterliegende Spalte.

Zusammenfassung einer Tabelle: summary

Insbesondere bei umfangreichen Tabellen bietet sich eine knappe textliche Zusammenfassung an. Hierfür ist das Attribut summary vorgesehen.

 
HTML
1
2
3
<table summary="Knappe Zusammenfassung der nachfolgenden Tabelle">
    <!-- Der eigentliche Tabellen-Inhalt -->
</table>

Weitere ähnliche Artikel

Tabellen im Web – Teil 1 – Eine Einführung

Einige Erläuterungen zu den Möglichkeiten und Notwendigkeiten der Gestaltung von Tabellen im Web, für alle diejenigen, die sich auch an ordentlichen Tabellen in Drucksachen erfreuen würden und ebenfalls der Meinung sind, dass das Web dem nicht zu weit nachstehen sollte. [lesen]

Tabellen im Web – Teil 2 – Die richtige Code-Struktur

Voraussetzung für die effektive Arbeit an der Abbildung einer Tabelle im Web ist eine strukturierte Vorbereitung. Nach der obligatorischen gedanklichen Einarbeitung und Strukturierung der Vorlage, kann sich der Gestalter an die konkrete Umsetzung und Definition der Grundstruktur der Tabelle mittels (X)HTML wagen. [lesen]

Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML

Obwohl man heute dank CSS (aktuell in Version 2) die Möglichkeit hat, Inhalt und Design strikt voneinander zu trennen, ist es dennoch möglich, alleine mit (X)HTML-Angaben auf das Erscheinungsbild der Tabelle Einfluss zu nehmen. [lesen]

Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS

Geht es darum, gezielt in das Erscheinungsbild einer Tabelle einzugreifen, spielt CSS seine Stärken aus. Seit CSS der Version 2 sind im Standard vielfältige Funktionen zur visuellen Anpassung von Tabellen vorgesehen, die größtenteils auch bereits in den aktuellen Versionen der gängigen Browser implementiert wurden. [lesen]

Tabellen im Web – Teil 5 – Interaktion

Einen nennenswerten Vorteil von tabellarischen Darstellungen im Web stellt die Möglichkeit dar, Inhalte interaktiv zu präsentieren. Tabellen lassen sich mit Hilfe von nutzerseitigen Scriptsprachen (JavaScript) mit Zusatzfunktionen belegen, welche den Nutzwert erheblich erhöhen können. [lesen]

Über den Autor: Thomas
Thomas ist Diplom-Designer (FH) und arbeitet derzeit als Flash Developer/Screendesigner in Frankfurt a.M. Seine Fachgebiete sind interaktive Medien und Design.
Profilseite betrachten