HTML-Tabellengenerator

Was eine gute HTML-Tabelle ausmacht

HTML-Tabellen sind dazu da, echte tabellarische Daten darzustellen – Zeilen und Spalten, bei denen die Position eines Werts eine Bedeutung trägt, etwa eine Preismatrix, ein Zeitplan oder eine Vergleichstabelle. Eine korrekte Tabelle ist mehr als ein Raster aus Zellen; sie wird aus einer kleinen Familie von Elementen aufgebaut, die Rollen beschreiben: table umschließt alles, thead und tbody trennen den Kopf vom Körper, th kennzeichnet eine Kopfzelle und td enthält eine Datenzelle. Dieser Generator gibt diese vollständige Struktur für Sie aus, sodass das Ergebnis sauber und standardkonform ist.

Die richtige Struktur ist deshalb wichtig, weil Browser, Suchmaschinen und assistive Technologien sich alle darauf verlassen. Ein mit divs vorgetäuschtes Raster mag wie eine Tabelle aussehen, vermittelt aber keine der Beziehungen, während ein korrektes Tabellen-Markup jedem Nutzer der Seite genau mitteilt, wie die Daten organisiert sind.

Zwei Wege, Ihre Daten einzugeben

Sie können eine Tabelle interaktiv im Grid-Editor aufbauen, Zeilen und Spalten hinzufügen und löschen und direkt in jede Zelle tippen, was sich ideal für kleine Tabellen oder schnelle Bearbeitungen eignet. Für alles, was bereits in einer Tabellenkalkulation liegt, ist der Reiter CSV-Import schneller: Fügen Sie Ihre Daten ein, und sie werden in einem Schritt in das Raster eingelesen.

Der Importer ist flexibel, was Trennzeichen angeht. Er akzeptiert durch Komma, Tabulator, Semikolon und Pipe getrennten Text, sodass eine Kopie direkt aus Excel oder Google Sheets (das Tabulatoren verwendet) ebenso funktioniert wie eine heruntergeladene CSV (die Kommas verwendet). Markieren Sie Erste Zeile ist Kopfzeile, wenn Ihre oberste Zeile Spaltentitel enthält, und diese Werte werden statt zu gewöhnlichen Daten zu th-Zellen im thead.

Ein durchgespieltes Beispiel

Fügen Sie drei Zeilen in den CSV-Import ein, wobei die erste als Kopfzeile markiert ist: Name, Email, Phone in der ersten Zeile, dann zwei Zeilen mit Kontakten. Das Werkzeug erzeugt eine Tabelle, deren thead eine einzelne Zeile mit drei th-Zellen enthält und deren tbody zwei tr-Zeilen mit td-Zellen enthält. Aktivieren Sie Mit Rahmen und Gestreifte Zeilen, und das Markup erhält die Klassen und Stile, die Zellenrahmen zeichnen und Zeilen abwechselnd schattieren, sodass die Vorschau exakt dem entspricht, was auf Ihrer Seite erscheinen wird, noch bevor Sie den Code überhaupt kopiert haben.

Optionen zur visuellen Gestaltung

Die Grundoptionen decken die Gestaltung ab, zu der Sie am häufigsten greifen. Mit Rahmen zeichnet Linien um die Zellen, Gestreifte Zeilen schattiert abwechselnde Zeilen, damit lange Tabellen leichter zu überblicken sind, und der Hover-Effekt hebt die Zeile unter dem Mauszeiger hervor, was den Lesern hilft, breite Zeilen zu verfolgen. Jede Option wird live in der Vorschau widergespiegelt.

Für eine feinere Steuerung machen die Erweiterten Optionen den Innenabstand und Abstand der Zellen, die Rahmenbreite und -farbe sowie den border-collapse-Modus zugänglich, der entscheidet, ob benachbarte Zellenrahmen zu einzelnen Linien verschmelzen (collapse) oder als getrennte Doppellinien bestehen bleiben (separate). Sie können außerdem eine eigene ID und Klasse vergeben, sodass sich die Tabelle in Ihr vorhandenes Stylesheet einklinkt, statt sich allein auf Inline-Stile zu verlassen.

Beschriftungen und Header-Scope für Barrierefreiheit

Eine Beschriftung gibt der Tabelle einen sichtbaren, programmatisch zugeordneten Titel, und Sie können sie oben oder unten platzieren. Sie ist die barrierefreie Art, eine Tabelle zu benennen – weitaus besser als ein benachbarter Absatz, weil Screenreader sie als Label der Tabelle ansagen.

Die Option Header-Scope ist hier die mit Abstand wichtigste Einstellung für die Barrierefreiheit. Setzt man scope bei Kopfzellen auf col, teilt das der assistiven Technologie mit, dass jede th die Spalte darunter beschriftet; setzt man es auf row, beschriftet es die Zeile daneben; und die kombinierte Option behandelt Tabellen, die sowohl eine Kopfzeile als auch eine Kopfspalte haben. Mit korrekt gesetztem scope kann ein Screenreader die relevanten Kopfzeilen ansagen, während ein Nutzer von Zelle zu Zelle wandert, sodass ein Wert als Phone: 555-1234 vorgelesen wird statt als nackte, kontextlose Zahl.

Der Vorbehalt zur Responsivität

Tabellen sind von Natur aus breit, und eine Tabelle mit vielen Spalten läuft über einen Handybildschirm hinaus. Die Option Responsive Tabelle löst dies, indem sie die Tabelle so umschließt, dass sie innerhalb ihres Containers horizontal scrollt, statt das Seitenlayout zu zerbrechen, wodurch jede Spalte unversehrt und erreichbar bleibt. Das ist der sichere Standard für Datentabellen auf kleinen Bildschirmen.

Es lohnt sich, den Kompromiss zu verstehen: Horizontales Scrollen erhält die Daten getreu, verlangt dem Leser aber das Scrollen ab. Es gibt keine Möglichkeit, eine echte Datentabelle in eine einzelne schmale Spalte umzubrechen, ohne die Beziehungen zwischen Zeilen und Spalten zu verlieren, sodass Scrollen bei wirklich tabellarischen Inhalten die ehrliche Lösung ist und kein Notbehelf.

Häufige Fehler, die Sie vermeiden sollten

Der häufigste Missbrauch besteht darin, zu einer Tabelle zu greifen, um das Seitenlayout zu steuern, statt um Daten darzustellen; modernes CSS wie flexbox und grid ist das richtige Werkzeug für das Layout, und Tabellen sollten tabellarischen Inhalten vorbehalten bleiben. Ein weiterer verbreiteter Fehltritt ist das vollständige Weglassen von Kopfzellen, was Nutzern von Screenreadern den Spaltenkontext nimmt, also stufen Sie Ihre erste Zeile immer zu einer Kopfzeile hoch, wenn sie Titel enthält. Verstecken Sie schließlich die Gestaltung nicht in langen Inline-style-Attributen, wenn eine Klasse sauberer und leichter zu pflegen wäre; nutzen Sie die Felder ID und Klasse, um die Tabelle mit einem Stylesheet zu verbinden.