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

SEO-Beratung von Spezialisten wie WOXOW: Deshalb wird sie immer wichtiger

Wer bei Google mit den passenden Suchbegriffen nicht in den Top-Rankings gefunden wird, der kann…

12 Stunden ago

Umfrage: Weniger als die Hälfte der digitalen Initiativen sind erfolgreich

Unternehmen räumen der Entwicklung technischer und digitaler Führungskompetenzen ein zu geringe Priorität ein. Gartner fordert…

14 Stunden ago

Google schließt zwei Zero-Day-Lücken in Android

Betroffen sind Android 12, 13, 14 und 15. Google sind zielgerichtete Angriffe auf die beiden…

1 Tag ago

Gefährliche Weiterentwicklung der APT36-Malware ElizaRAT

Schadprogramm der pakistanischen Hackergruppe APT36 weitet seine Aktivitäten aus und verbessert seine Techniken.

2 Tagen ago

Google schließt weitere schwerwiegende Sicherheitslücken in Chrome 130

Tenable vergibt für beide Schwachstellen einen CVSS-Basis-Score von 9,8. Zwei Use-after-free-Bugs erlauben möglicherweise das Einschleusen…

2 Tagen ago

Microsoft nennt weitere Details zu kostenpflichtigen Patches für Windows 10

Erstmals liegen Preise für Verbraucher vor. Sie zahlen weniger als Geschäftskunden. Dafür beschränkt Microsoft den…

3 Tagen ago