HTML-Tabellen-Generator

Wofür es gut ist

Das Tool erzeugt semantischen HTML-Code für Tabellen (mit thead und tbody) aus Daten, die du schon in einer Tabellenkalkulation oder Liste hast. Einfach einfügen und das Ergebnis in deine Website oder deinen Artikel kopieren.

Erkannte Formate

Jede Zeile ist eine Tabellenzeile; Zellen können durch Komma, Semikolon oder Tabulator getrennt sein (so kannst du direkt aus Excel oder Google Sheets einfügen), und das Trennzeichen wird an den ersten Zeilen erkannt: Ein Tabulator gewinnt immer, wenn es einen gibt, denn eine aus Excel kopierte Zelle kann Kommas enthalten. Eine Zelle in doppelten Anführungszeichen kann das Trennzeichen und sogar einen Zeilenumbruch enthalten, wie in echten CSV-Dateien: „"Müller, Hans"“ bleibt eine einzige Zelle, während ein Anführungszeichen mitten im Text, wie in „55"“, ein Zeichen wie jedes andere ist. Das Einlesen funktioniert genauso wie bei CSV in HTML-Tabelle. Sonderzeichen werden automatisch maskiert.

Was herauskommt, und warum es so gebaut ist

Heraus kommt kein Block aus Elementen vom Typ div im Rasterlayout, sondern eine echte Tabelle, mit der Kopfzeile in thead und den Überschriftszellen als th. Der Unterschied ist nicht kosmetisch. Ein Screenreader nennt beim Erreichen einer Zelle die Spalte, zu der sie gehört („Preis: 12 Euro“), nur wenn diese Spalte als Überschrift deklariert ist; bei Elementen vom Typ div liest er eine Zahlenreihe ohne Zusammenhang vor, und das ist der Unterschied zwischen einer Tabelle, in der man nachschlagen kann, und einer Zahlenwüste.

Aus demselben Grund ist der erzeugte Code sauber und frei von Inline-Styles: Farbe und Rahmen sind Aufgabe des CSS der Website, die ihn einbindet, und eine ungestylte Tabelle fügt sich ein, statt sich mit dem Rest zu beißen.

Tabellen sind für Daten, nicht fürs Layout

Die Regel ist zwanzig Jahre alt und gilt noch immer: Eine Tabelle nimmst du, wenn die Daten Zeilen und Spalten mit Bedeutung haben, wie bei einer Preisliste, einem Fahrplan, einem Vergleich oder einer Abrechnung. Du nimmst keine, um zwei Dinge auf einer Seite nebeneinanderzustellen: Dafür gibt es CSS-Grids, und die passen sich dem Bildschirm an, während eine fürs Layout missbrauchte Tabelle auf dem Handy unlesbar wird.

Auf dem Handy braucht sie einen Container, der scrollt

Eine Tabelle mit fünf Spalten passt nicht auf ein Handy: Entweder quetscht sie sich in unlesbar schmale Spalten, oder sie läuft über und lässt die ganze Seite seitwärts scrollen, und das ist der schlimmere Fehler, weil er auch alles andere kaputt macht. Die Lösung ist eine Zeile: Pack die Tabelle in einen Container mit overflow-x: auto und gib ihr eine min-width. Dann scrollt sie von selbst, und die Seite bleibt stehen.

Siehe auch

Kommen die Daten aus einer Tabellenkalkulation, lohnt sich vorher ein Durchgang durch CSV bereinigen; müssen sie zurück nach Excel, ist die richtige Seite CSV in Excel. Für eine Markdown-Tabelle, die du in ein Dokument oder eine Antwort einfügen willst, gibt es den Markdown-Tabellen-Generator, und um eine Tabelle aus einem PDF zu holen: Tabellen aus PDF extrahieren.