Barrierefreier HTML-Tabellen-Generator: CSV zu HTML mit Beschriftung | We.Inc
Füge CSV ein oder beginne mit einer Preislisten- oder Öffnungszeiten-Vorlage. Erhalte eine sichere HTML-Tabelle mit Beschriftung, Kopfzellen und scope sowie einen kleinen responsiven CSS-Block zum Kopieren.
Füge Zeilen aus einer Tabellenkalkulation oder CSV ein oder beginne mit einer Vorlage für eine Preisliste oder Öffnungszeiten. Du erhältst eine echte HTML-Tabelle mit Beschriftung, Kopfzellen und scope-Attributen für Screenreader sowie einen kurzen CSS-Block, der die Tabelle auf Smartphones lesbar hält. Jeder Wert wird escaped, damit eingefügter Text deine Seite nicht beschädigen kann. Alles läuft in deinem Browser. Nichts, was du eingibst, wird an We.Inc oder andere gesendet; wenn du den Tab schließt, ist es weg.
Wähle eine Vorlage oder füge eigene Zeilen ein. Kommas, Tabulatoren (aus Tabellenkalkulationen) und Semikolons funktionieren; zitierte Werte mit Kommas bleiben zusammen.
Wähle aus, ob die erste Zeile Spaltenüberschriften enthält und ob die erste Spalte jede Zeile beschriftet. Daraus werden th-Zellen mit scope-Attributen.
Schreibe eine Beschriftung. Sie benennt die Tabelle für Screenreader und wird für alle oberhalb der Tabelle angezeigt.
Wähle einen Stil und prüfe die Vorschau in Desktop- und Smartphone-Breite. Auf kleinen Bildschirmen lassen sich breite Tabellen in ihrem eigenen Feld seitlich scrollen, statt zusammengedrückt zu werden.
Kopiere HTML und CSS oder lade beides als eine Datei herunter.
Verwende Tabellen nur für Daten mit Zeilen und Spalten, zum Beispiel Preise oder Öffnungszeiten. Für das Seitenlayout gibt es CSS.
Halte Überschriften kurz. Screenreader wiederholen sie bei jeder Ansage.
Füge Einheiten in die Überschrift ein (Preis, USD) und nicht in jede Zelle.
Verbinde Zellen nur, wenn es nötig ist. Zusammengeführte Zellen sind mit Screenreader schwer nachzuvollziehen.
Prüfe deine Tabelle in Smartphone-Breite. Sind mehr als ein seitlicher Wisch nötig, teile sie auf.
Häufige Fragen
Was macht eine HTML-Tabelle barrierefrei?
Eine Beschriftung, th-Kopfzellen für Spalten- und Zeilenüberschriften sowie scope-Attribute, die angeben, ob eine Überschrift zu einer Spalte oder Zeile gehört. Screenreader verwenden sie, um anzusagen, zu welcher Überschrift ein Wert gehört. Dieser Generator ergänzt alle drei Elemente.
Warum sollte ich die Tabelle nicht mit divs erstellen?
Ein Raster aus divs kann wie eine Tabelle aussehen, aber assistive Technologien können nicht erkennen, welche Zelle zu welcher Überschrift gehört. Ein echtes Tabellenelement vermittelt diese Bedeutung automatisch.
Wie wird eine responsive Tabelle dargestellt?
Die Tabelle befindet sich in einem Feld, das auf schmalen Bildschirmen seitlich scrollbar ist. Das Feld ist fokussierbar und mit der Tabellenbeschriftung versehen, damit auch Tastaturnutzer darin scrollen können.
Werden meine Daten escaped?
Ja. Und-Zeichen, spitze Klammern und Anführungszeichen in deinen Zellen werden in HTML-Entities umgewandelt. Eine Zelle mit <script> wird daher als Text angezeigt, statt ausgeführt zu werden.
Kann ich direkt aus Excel oder Google Sheets einfügen?
Ja. Kopierte Zellen sind durch Tabulatoren getrennt, die das Tool automatisch erkennt.
Ist das kostenlos?
Ja, ohne Anmeldung. Es läuft in deinem Browser.
Preislisten und Öffnungszeiten sind Tabellen
Die meisten Websites kleiner Unternehmen haben mindestens zwei Tabellen: Preise und Öffnungszeiten. Beides sind echte tabellarische Daten und sollte als Tabelle ausgezeichnet werden, wobei jeder Preis mit seiner Leistung und jede Uhrzeit mit ihrem Wochentag verknüpft ist.
Die Vorlagen geben dir diese beiden Formen vor. Ersetze die Beispielzeilen vor der Veröffentlichung durch deine eigenen Angaben; es sind Platzhalter, keine echten Preise.