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

Digitale Souveränität: Provider entwickeln API-Standard

Lösung soll den Aufbau des EuroStacks unterstützen, der Europas souveräne digitale Infrastruktur werden soll.

1 Stunde ago

FlexiSpot als eine der „The Major German Brands 2025“ ausgezeichnet

Auszeichnung unterstreicht das Engagement von FlexiSpot für nachhaltiges und ergonomisches Design sowie seinen Beitrag zur…

2 Tagen ago

Test: Ergonomischer Bürostuhl Doro C300 von SIHOO punktet durch Tracking der Bewegungen

Der Büro- und Gamerstuhl erkennt Gewicht der Nutzer und unterstützt Lendenwirbel und Nacken in jeder…

4 Tagen ago

Bericht: Faltbares iPhone kommt frühestens 2026

Der Analyst Ming-Chi Kuo geht von einem Preis zwischen 2000 und 2500 Dollar aus. Trotzdem…

4 Tagen ago

Trojaner-Angriffe verdreifacht

Kaspersky meldet starke Zunahme mobiler Banking-Trojaner. Insgesamt 33,3 Millionen Angriffe auf mobile Nutzer im Jahr…

5 Tagen ago

Höherer Durchsatz in Glasfasernetzen

Optische Schalter mit Flüssigkristallspiegeln sollen die Datenpakete so stark verkleinern, dass mehr Daten durchs Netz…

5 Tagen ago