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

KI-gestütztes Programmieren bringt IT-Herausforderungen mit sich

OutSystems-Studie: 62 Prozent der Befragten haben Sicherheits- und Governance-Bedenken bei Softwareentwicklung mit KI-Unterstützung.

16 Stunden ago

Studie: Ein Drittel aller E-Mails an Unternehmen sind unerwünscht

Der Cybersecurity Report von Hornetsecurity stuft 2,3 Prozent der Inhalte gar als bösartig ein. Die…

4 Tagen ago

HubPhish: Phishing-Kampagne zielt auf europäische Unternehmen

Die Hintermänner haben es auf Zugangsdaten zu Microsoft Azure abgesehen. Die Kampagne ist bis mindestens…

5 Tagen ago

1. Januar 2025: Umstieg auf E-Rechnung im B2B-Geschäftsverkehr

Cloud-Plattform für elektronische Beschaffungsprozesse mit automatisierter Abwicklung elektronischer Rechnungen.

5 Tagen ago

Google schließt schwerwiegende Sicherheitslücken in Chrome 131

Mindestens eine Schwachstelle erlaubt eine Remotecodeausführung. Dem Entdecker zahlt Google eine besonders hohe Belohnung von…

5 Tagen ago

Erreichbarkeit im Weihnachtsurlaub weiterhin hoch

Nur rund die Hälfte schaltet während der Feiertage komplett vom Job ab. Die anderen sind…

5 Tagen ago