Navigation



Tabellen

Tabellen sind in HTML dazu gedacht, um tabellarische Daten abzubilden. Leider werden sie auch oft für Layoutzwecke missbraucht.

Für blinde Benutzer ist es schwierig zu erkennen, wie die Daten in einer Tabelle organisiert sind. Deshalb gibt es eine Reihe von Meta-Attributen, welche die Struktur der Daten innerhalb der Tabelle beschreiben:

  • Im summary-Attribute eine Zusammenfassung der Struktur der Tabelle angeben
  • Mit dem <caption>-Tag der Tabelle eine Überschrift geben
  • Mit <thead> und <th> Kopfzeilen definieren

Preise für Früchte in Europa
Äpfel Birnen
Schweiz 2.30€ 2.50€
Deutschland 1.80€ 2.10€ 

 
<table summary="Tabelle mit einfacher Spalten- und Zeilenüberschrift">
    <caption>Preise für Früchte in Europa</caption>
    <tr>
        <td></td>
        <th>Äpfel</th>
        <th>Birnen</th>
    </tr>
    <tr>
        <th>Schweiz</th>
        <td>2.30€</td>
        <td>2.50€</td>
    </tr>
    <tr>
        <th>Deutschland</th>
        <td>1.80€</td>
        <td>2.10€</td>
    </tr>
</table>
 

Layout-Tabellen

Tabellen verleiten gerne dazu, sie als Gerüst für das Layout von Inhalten zu verwenden. Davon wird jedoch stark abgeraten, da sie zwei entscheidende Nachteile haben:

  • Ein durch Tabellen erstelltes Layout ist absolut starr, und kann durch Stylesheets nicht mehr angepasst werden.
  • Tabellen wurden für Daten entworfen und nicht für Layoutzwecke, deshalb werden sie von Screenreadern auch fix zeilenweise vorgelesen und Inhalte damit verstückelt.