HTML table – Tabellen

HTML table – Tabellen

HTML table legt Inhalte in die Zeilen und Spalten einer Tabelle, bildet ein konsistentes Raster und dient in erster Linie dem schnellen Vergleich ähnlicher Datensätze (z.B. in Preistabellen, Geschäftsberichten und Statistiken). Kalender sind eines der letzten Refugien für HTML-Tabellen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML-Tabelle: Zeile für Zeile

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

HTML Table Markup

Tabellen erben die Schrift und Schriftgröße von ihrem umfassenden Element, denn font-family und font-size gehören zu den CSS-Eigenschaften, die vererbt werden.

Der Inhalt von Tabellenzellen ist per Vorgabe vertikal zentriert.

HTML-Tabelle ohne Formatierung durch CSS
Top 15 of 6919 Total User Agents
#HitsUser Agent
122703010.86%Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
21663357.96%Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
3814403.90%Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36
4797823.82%Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36
Ohne CSS zentrieren die Browser den Inhalt von th-Tags, den Inhalt von td-Tags linksbündig.

HTML für Tabellen

<table>
    <caption>HTML-Tabelle ohne Formatierung durch CSS-Eigenschaften</caption>
    <col style="width: 5%">
    <colgroup span="2" style="width:10%"></colgroup>
    <col style="width: 75%">
    <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>
    <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>
     <tfoot>
        <tr>
            <td colspan="4">Ohne CSS zentrieren die Browser … </td>
        </tr>
    </tfoot>
</table>

Tabellen nehmen per Vorgabe nur den Platz ein, den ihre Inhalte brauchen und Text in Tabellenzeilen bricht erst um, wenn die Tabelle die Breite des umfassenden Elements erreicht hat.

Man sieht schon an diesem einfachen Beispiel, dass es nicht so einfach ist, tabellarische Daten in Tabellen zu packen. Da macht ein Tabellen-Generator Sinn: Tables Generator.

Tabellenzellen verbinden: rowspan und colspan

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

11121314
21222324
31323334
41424344
11 und 121314
21222324
31323334 und 44
414243
111213 und 14, 23 und 24
2122
31 und 323334
4344

colspan und rowspan

<table class="small">
    <tr>
        <td colspan="2">11 und 12</td><td>13</td><td>14</td>
    </tr>
    …
    <tr>
        <td>31</td><td>32</td><td>33</td><td rowspan="2">34 und 44</td>
    </tr>
    <tr>
        <td>41</td><td>42</td><td>43</td>
    </tr>
</table>

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

thead, tfoot

Neben tr- und td-Elementen für Tabellenzeilen und -spalten gibt es auch tbody, tfoot und thead. Diese Elemente müssen nicht verwendet werden, aber wenn sie fehlen, setzen die Browser sie automatisch ein.

Direkt innerhalb eines table-Elementen dürfen nur die folgenden Elemente stehen:

Für die Barrierefreiheit: Wird die HTML-Tabelle nur als Layout-Gerüst eingesetzt, sollen <th> und <caption> Tag nicht eingesetzt werden und auch kein summary-Attribut.

Attribute für table

border, cellpadding, cellspacing, frame, rules, summary und width waren Attribute für table, th und td in HTML4. Sie sind in HTML5 nicht mehr vertreten und werden heute durch CSS ersetzt.

CSS für table

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

table-layout: fixed baut große Tabellen schneller auf, caption-side legt fest, ob caption (Tabellenüberschrift) unter oder über der Tabelle gerendert wird.

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
mobile 13.221(50,39 %) 10.236(50,06 %) 33.392(52,72 %) 32,65 % 6,52
desktop 9.217(35,13 %) 7.383(36,11 %) 20.503(32,37 %) 23,46 % 7,74
tablet 3.801(14,49 %) 2.829(13,84 %) 9.445(14,91 %) 26,01 % 8,14

Diese Tabelle scrollt horizontal – aber mit welchem Hinweis würde der Leser das erkennen?

Mehr zu responsiven Tabellen

HTML-Tabellen in Newslettern

Tabellen sind weiterhin ein 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.