Categories: Software

HTML-Tabellen korrekt und barrierefrei aufbauen

Jeder Webentwickler hat inzwischen wohl verinnerlicht, dass Tabellen für das Seitenlayout verpönt sind. Manche schießen allerdings über das Ziel hinaus und verzichten völlig auf den Einsatz von Tabellen. Der ursprüngliche Zweck von HTML-Tabellen war die Darstellung von Daten in Tabellenform. In diesem Artikel geht es daher noch einmal um die Grundlagen und die vielen Features, die das HTML-Element <table> mit sich bringt.

Daten organisieren

Die grundlegende Syntax von HTML-Tabellen ist für Entwickler sicher nichts neues, aber einige sehr nützliche Features geraten oft in Vergessenheit. Das folgende Code-Listing zeigt eine einfache Tabelle mit einer Kopfzeile sowie Daten in jeder Tabellenzelle.

Die Beispieltabelle weist neben dem Basiselement <table> drei Zeilen (<tr>-Element) mit jeweils zwei Zellen auf. Die erste Zeile verwendet Header-Elemente (<th>) für die Zellen der Kopfzeile.

Obwohl dieses erste Beispiel die Standardelemente einer Tabelle enthält, gibt es noch viele weitere Elemente, die man verwenden kann. Das <caption>-Element kann zum Beispiel für eine Kurzbeschreibung der Tabelle verwendet werden. Standardmäßig stellen die meisten Browser es zentriert oberhalb der Tabelle dar.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

Ermittlern gelingt weiterer Schlag gegen Ransomware-Gruppe LockBit

Sie decken die Identität des Kopfs der Gruppe auf. Britische Behörden fahnden mit einem Foto…

8 Stunden ago

Apple stellt neuen Mobilprozessor M4 vor

Er treibt das neue iPad Pro mit OLED-Display an. Apple verspricht eine deutliche Leistungssteigerung gegenüber…

22 Stunden ago

Cyberabwehr: Mindestens zwei kritische Vorfälle pro Tag

Davon entfällt ein Viertel auf staatliche Einrichtungen und 12 Prozent auf Industrieunternehmen.

23 Stunden ago

Tunnelvision: Exploit umgeht VPN-Verschlüsselung

Forscher umgehen die Verschlüsselung und erhalten Zugriff auf VPN-Datenverkehr im Klartext. Für ihren Angriff benötigen…

23 Stunden ago

Online-Banking: 42 Prozent kehren Filialen den Rücken

Weitere 40 Prozent der Deutschen erledigen ihre Geldgeschäfte überwiegend online und gehen nur noch selten…

1 Tag ago

Google veröffentlicht neues Sicherheitsupdate für Chrome

Zwei Schwachstellen in Chrome gehören nun der Vergangenheit an. Von ihnen geht ein hohes Risiko…

1 Tag ago