Webdesign, Tutorials und mehr - Webmasterpro.de

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

2 Code-Struktur

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

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.

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!

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.

 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.

 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.

 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

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:

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.

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 | 8]

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

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

Neuen Kommentar schreiben

Code-Struktur

Beantworten

Hi, ich arbeite momentan an einer Seite auf der Daten in Tabellenform dargestellt werden. Da die Daten Spaltenweise zusammengehören, möchte ich die Daten im Quelltext auch gerne zusammen stehen haben. Wenn ich das richtig sehe, sind alle Beispiele hier so, dass die Daten einer Zeile zusammen im Quelltext. Auch in anderen Beispielen, habe ich nur die hier beschriebene Form gefunden. Gibt es keine andere?

Limmerle am 27.02.2009 um 18:08

Kleiner Fehler

Beantworten

In 2.2 "<tr> und <th/td>":
In der Klammer "(td = table data = Tabellendatum)" herrscht ein kleiner Übersetzungsfehler. Entweder heißt es dann "table date" für Tabellendatum, oder "table data" für Tabellendaten. Das zweite ist vermutlich logischer ;-)

Aber ansonsten TOP!
PS: Hab davor noch nie colgroup/col benutzt, oder was von summary gehört. Nützlich, danke!

Roman Martin am 23.02.2009 um 03:26

Re: Kleiner Fehler

Beantworten

Danke für den Hinweis. Jetzt könnte man eine Diskussion starten, was mit "table data" tatsächlich ursprünglich gemeint war - also "Tabellendaten" (plural) oder "Tabellendatum" (singular). Die Einzahl von "Daten" (auch von den "Computerdaten") ist "Datum". So wurde es dann eben auch übersetzt, da es sich ja bei einem Zelleneintrag um mehrere Daten oder ein einzelnes Datum handeln kann - also alles Definitionssache :) Ich habe es aber dennoch mal geändert, da es vermutlich eher ersteres sein sollte (ich lasse mich aber gerne eines Besseren belehren! :)

Thomas am 23.02.2009 um 20:53

Re: Kleiner Fehler

Beantworten

Nun, data ist das plural von date. Eine zuverlässige Quelle sollte das Problem lösen.
Ich persönlich vermute es heißt "table data", Tabellendaten.

Roman Martin am 24.02.2009 um 00:35

Re: Kleiner Fehler

Beantworten

Edit: Ich nehm mein letzten Post zurück. Man lernt nie genug :-)

Ich find es relativ verwirrend:
http://en.wiktionary.org/wiki/date
http://en.wiktionary.org/wiki/dates
http://en.wiktionary.org/wiki/data
http://en.wiktionary.org/wiki/datum

Roman Martin am 24.02.2009 um 00:42

Vertippt?

Beantworten

Kann es sein, dass du dich bei der Beschreibung der Tags etwas versehen hast? Ich meine den <tfoot> Teil:

Umfasst den Tabellen-Fuß
innerhalb von <table>,
unterhalb von <thead>
, oberhalb von <tbody>

Nach deiner Schema etwas weiter unten, liegt <tfoot> aber unter <tbody> und nicht darüber. Müsste es daher nicht "unterhalb von <tbody>" heißen?

Thomas Rix am 19.02.2009 um 11:33

Re: Vertippt?

Beantworten

tfoot ist immer unter thead und über tbody

Fabian "q-rios" Krause-Willenberg am 19.02.2009 um 14:29

Re: Vertippt?

Beantworten

Es steht auf deutsch immer "dazwischen" :)

Also die Struktur ist (wie im Code-Listing zu sehen) immer:

<thead></thead>
<tfoot></tfoot>
<tbody></tbody>

Unter http://www.edition-w3.de/TR/1999/REC-html401-19991224/struct/tables.html#h-11.2.3 findest du auch eine Erläuterung, warum:

TFOOT muss vor TBODY innerhalb einer TABLE-Definition stehen, so dass Benutzerprogramme den Fuß darstellen können, bevor alle (der eventuell zahlreichen) Datenzeilen empfangen werden.

-grüße

Thomas am 20.02.2009 um 20:20