CSS, HTML und Javascript mit {stil}

HTML-Tag table – Tabellen auf Webseiten

Das table-Tag ist der Rahmen für Tabellen in Webseiten mit HTML. Eine Tabelle strukturiert Daten in Zeilen und Spalten und bildet ein Raster.

Früher wurden Tabellen für das Layout von Webseiten verwendet – heute hält CSS flexiblere Techniken parat. Tabellen dienen nur noch der Darstellung von tabellarischen Daten, aber heute sind Tabellen sind ein Hindernis für die kleinen Monitore der mobilen Geräte.

Die HTML-Tabelle unterbricht den normalen Fluss von Texten und Bildern (table ist ein Block-Element) und wird in der nächsten Zeile eingefügt. Am Ende des table-Tags wird der Fluss der Texte und Bilder in der nächsten Zeile wieder aufgenommen.

HTML-Tabelle ohne Formatierung durch CSS-Eigenschaften
Top 15 of 3219 Total User Agents
# Hits User Agent
Ohne formatierende CSS-Eigenschaften setzen die Browser die Inhalte von th-Tags zentriert, den Inhalt von td-Tags linksbündig. Die Inhalte aller Tabellenzellen werden vertikal zentriert.
149791316.27%Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11)
22678108.75%Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.11) Gec
31831575.99%Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1

Tabellenzeilen und -spalten organisieren

HTML-Tabellen sind zeilenorientiert – d.h. sie werden Zeile für Zeile aufgebaut. Das Innenleben einer Tabelle besteht aus Tabellenzeilen (<tr>), in denen die einzelnen Tabellenzellen td und th liegen, und dem caption-Tag.

Die HTML-Attribute rowspan und colspan fassen nebeneinander liegende Zellen einer Tabelle zeilen- oder spaltenweise zusammen. So verschmelzen Zellen über mehrere Spalten oder Zeilen.

1112 1314
2122 2324
3132 3334
4142 4344
11 und 12 13 14
21 22 23 24
31 32 33 34 und 44
41 42 43
11 12 13 und 14, 23 und 24
21 22
31 und 32 33 34
43 44

Die Spalten einer Tabelle werden durch das colgroup-Tag in Gruppen zusammengefasst und über das col-Tag formatiert.

Tabellenkopf und Tabellenfuß

Zudem gibt es seit HTML 4.0 drei weitere Tags für Tabellen: tbody, tfoot und thead.

Direkt innerhalb eines table-Elements dürfen nur die folgenden HTML-Tags stehen:

CSS-Eigenschaften für table-Elemente

Die CSS-Regel border-collapse: collapse für das table-Element verhindert den doppelten Rahmen zwischen nebeneinander liegenden Tabellenzellen. Die veralterten HTML-Attribute cellpadding und cellspacing werden durch die CSS-Eigenschaften padding und margin ersetzt.

Attribute für table

border
border ist das einzig verbleibende Attribut für HTML-Tabellen in HTML5 und legt einen Rahmen rund um die Tabelle. Die Linien des Rahmens werden schattiert dargestellt, um ihnen eine dreidimensionale Erscheinung zu verleihen. Die Breite des Rahmens wird als ganze Zahl von Pixeln angegeben. Die Vorgabe ist »kein Rahmen« (0 Pixel).

cellpadding, cellspacing, frame, rules, summary und width sind in HTML5 nicht mehr vertreten und werden heute durch CSS ersetzt.

HTML Table Quelltext

<table style="width:100%">
    <caption>HTML-Tabelle ohne Formatierung durch CSS-Eigenschaften</caption>
    <colgroup><col style="width:5%"><col style="width:25%">
    <col style="width:25%"><col style="width:45%"></colgroup>
    <thead>
        <tr>
            <th colspan="4">Top 15 of 3219 Total User Agents</th>
        </tr>
        <tr>
            <th>#</th>
            <th colspan="2">Hits</th>
            <th>User Agent</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">Ohne formatierende CSS-Eigenschaften … </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>497913</td>
            <td>16.27%</td>
            <td>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) </td>
        </tr>
    </tbody>
</table>

HTML table für mobile Geräte

Tabellen mit vielen Spalten waren schon auf den Desktop-Monitoren ein Stolperstein, auf kleinen Monitoren werden sie entweder so weit verkleinert, dass sie nicht lesbar sind oder lassen das Design der Seite aus dem Rahmen fallen.

Beispiel: Besucher mit mobilen Geräten
Gerätekategorie Besuche Seiten/Besuch
Auszug aus Analytics (Jan 2014)
desktop 36.648 8,05
mobile 11.247 5,86
tablet 7.446 8,01

Resonsive Data Tables von Chris Coyier zeigt Alternativen für HTML-Tabellen auf kleinen Monitoren.

HTML-Tabellen in Newslettern

Tabellen sind weiterhin ein bedeutendes Hilfsmittel beim Layout von Newslettern. Für die Positionierung von Inhalten in der Email zählt die Zuverlässigkeit der HTML table gegenüber einem CSS-basierten Layouts.