HTML-Tabelle erstellen: barrierefrei aus Zellen oder CSV

So verwenden Sie es

Tippen Sie die Zellen im Raster ein oder fügen Sie CSV oder TSV unter CSV oder TSV einfügen ein und drücken Sie In die Tabelle übernehmen.
Setzen Sie die Haken bei Die erste Zeile ist eine Kopfzeile und Die erste Spalte ist eine Kopfspalte, um die Kopfzellen zu markieren.
Tippen Sie eine Beschriftung ein, die sagt, was die Tabelle zeigt. Setzen Sie den Haken bei Eine minimale Formatierung hinzufügen, wenn die Tabelle Rahmen braucht.
Kopieren Sie das Feld HTML oder drücken Sie Herunterladen, und fügen Sie den Code in Ihre Seite ein.

Warum Kopfzellen einen Geltungsbereich haben

Eine Kopfzelle ist ein th-Element und kein td. Ihr Attribut scope legt fest, welche Zellen sie beschriftet: col für eine Kopfzelle über einer Spalte und row für eine Kopfzelle am Anfang einer Zeile. Screenreader sagen diese Kopfzellen bei jeder Datenzelle an. So weiß ein Besucher, der das Raster nicht sieht, trotzdem, was eine Zahl bedeutet.

Die Beschriftung ist der Titel der ganzen Tabelle und steht als Erstes innerhalb der Tabelle. Schreiben Sie eine Beschriftung, die sagt, was die Tabelle zeigt, etwa Monatliche Umsätze, statt sie wegzulassen. Der Abschnitt HTML-Tabellen (englisch) beschreibt diese Elemente.

Kopfzelle über einer Spalte: th mit scope col;  Kopfzelle am Anfang einer Zeile: th mit scope row;  Daten: td

Einfügen aus einer Tabellenkalkulation und das Maskieren

CSV-Text trennt Zellen mit Kommas, Semikolons oder Tabulatoren. Eine Zelle, die eines dieser Zeichen enthält, steht in doppelten Anführungszeichen. Kopierte Zellen aus einer Tabellenkalkulation ergeben meist Text mit Tabulatoren. Tabellenkalkulationen in Sprachen, die den Dezimalteil mit einem Komma schreiben, speichern CSV-Dateien oft mit Semikolons. Erkennen liest die erste Zeile und wählt das Trennzeichen, das dort am häufigsten vorkommt.

Der Text jeder Zelle wird vor dem Schreiben maskiert. Ein Zeichen wie das Kleiner-als-Zeichen oder das kaufmännische Und wird zu einer Zeichenreferenz. Es erscheint daher auf der Seite als Text und wird nie als Auszeichnung gelesen. Eine kurze Zeile wird mit leeren Zellen aufgefüllt, sodass jede Zeile gleich viele Zellen hat.

Rechenbeispiel: eine zweispaltige Tabelle mit Kopfzeile und Kopfspalte

Nehmen Sie die Zellen Monat und Umsatz in der ersten Zeile und Jan und 1200 in der zweiten, mit der ersten Zeile und der ersten Spalte als Kopfzellen und der Beschriftung Umsatz.

Die Tabelle beginnt mit einem caption-Element, das Umsatz lautet. Dann folgt ein Kopfbereich mit zwei Kopfzellen, die jeweils den scope col haben. Danach kommt ein Textkörper, in dem Jan eine Kopfzelle mit dem scope row ist und 1200 eine Datenzelle.

Häufig gestellte Fragen

Was bewirkt das Attribut scope?

Es sagt Hilfsprogrammen für die Barrierefreiheit, welche Zellen eine Kopfzelle beschriftet. Ein scope von col bedeutet, dass die Kopfzelle über ihrer Spalte steht, und ein scope von row, dass sie am Anfang ihrer Zeile steht. Ohne scope muss ein Screenreader den Zusammenhang erraten.

Wann sollte ich die Kopfspalte verwenden?

Dann, wenn die erste Spalte jede Zeile benennt, etwa ein Produkt, eine Person oder einen Monat. Eine Tabelle aus Zahlen ohne Zeilennamen braucht keine Kopfspalte, also lassen Sie sie weg.

Warum braucht die Tabelle eine Beschriftung?

Eine Beschriftung gibt der Tabelle einen Titel, den Screenreader vor den Zellen ansagen. Sie hilft auch einem sehenden Besucher, auf einen Blick zu erkennen, worum es in der Tabelle geht. Schreiben Sie daher eine Beschriftung, wenn die Tabelle für sich allein steht.

Welches Trennzeichen sollte ich für eine Tabellenkalkulation wählen?

Wählen Sie Tabulator für Text, der aus einer Tabellenkalkulation kopiert wurde, und Semikolon für eine CSV-Datei, die in einer Sprache mit Komma als Dezimalzeichen gespeichert wurde. Erkennen funktioniert in den meisten Fällen, und die Vorschau zeigt das Ergebnis, bevor Sie kopieren.

Ändert die minimale Formatierung andere Tabellen auf meiner Seite?

Ja, wenn Sie sie unverändert in die Seite einfügen, denn das style-Element gilt für jede Tabelle der Seite. Lassen Sie es weg, wenn Ihre Seite die Tabellen schon formatiert, oder kopieren Sie nur die Regeln, die Sie brauchen.

Wird die Tabelle, die ich eintippe oder einfüge, irgendwohin gesendet oder gespeichert?

Nein. Die Tabelle, die Vorschau und das HTML entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet. Kopieren Sie daher das HTML oder laden Sie es herunter, bevor Sie die Seite verlassen.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.