HTML-Tabellen-Generator

So erstellen Sie eine HTML-Tabelle

1. Füllen Sie das Raster aus. Nutzen Sie Zeile hinzufügen, Spalte hinzufügen, Letzte Zeile entfernen und Letzte Spalte entfernen oder die ×-Schaltflächen neben jeder Zeile und Spalte. Neue leere Tabelle beginnt wieder mit einem leeren 3 × 3-Raster.
2. Um vorhandene Daten zu übernehmen, fügen Sie CSV oder aus Excel, LibreOffice oder Google Sheets kopierte Zellen unter CSV- oder Tabellendaten importieren ein, prüfen das Trennzeichen und klicken auf Importieren. Sie können einen Block Tabellenzellen auch direkt in eine beliebige Zelle des Rasters einfügen.
3. Ergänzen Sie eine Beschriftung und legen Sie fest, ob Erste Zeile ist Kopfzeile und Erste Spalte ist Kopfspalte gelten.
4. Wählen Sie unter Gestaltung Keine Stile, CSS-Klasse oder Inline-Stile und passen Sie bei Bedarf Rahmenfarbe, Hintergrund der Kopfzeile und Zebrastreifen an.
5. Prüfen Sie die Vorschau und klicken Sie dann auf HTML kopieren oder laden Sie den Code als .html-Datei herunter.

Barrierefreies Tabellen-Markup

Barrierefrei ist eine Tabelle erst, wenn Screenreader erkennen, welche Zellen Überschriften sind und was sie beschreiben. Dieses Tool schreibt die Struktur, die der HTML-Standard und die WCAG-Techniken empfehlen:

• <caption> gibt der Tabelle einen Namen. Screenreader lesen ihn beim Betreten der Tabelle vor, und er hilft allen Lesern zu verstehen, was sie vor sich haben. Halten Sie ihn kurz und aussagekräftig.
• <thead> und <tbody> trennen die Kopfzeile von den Datenzeilen. Browser können den <thead> auf jeder gedruckten Seite wiederholen.
• <th scope="col"> kennzeichnet jede Spaltenüberschrift, und mit Erste Spalte ist Kopfspalte kennzeichnet <th scope="row"> die erste Zelle jeder Zeile. Springt eine Screenreader-Nutzerin in eine Datenzelle, kann das Programm die passenden Überschriften vorlesen, etwa „Pro, Preis, 12 €“.

Verwenden Sie Tabellen nur für tabellarische Daten, nie für das Seitenlayout. Vermeiden Sie verbundene Zellen, wo es geht: Einfache Raster mit einer Kopfzeile und bei Bedarf einer Kopfspalte sind mit assistiven Technologien am leichtesten zu lesen.

Gestaltungsoptionen

• Keine Stile erzeugt schlichtes Markup, das die Tabellenstile Ihrer Website übernimmt. Das ist die beste Wahl für ein CMS oder eine Website mit Designsystem.
• CSS-Klasse fügt class="…" zur <table> hinzu und zeigt einen passenden CSS-Block, den Sie in Ihr Stylesheet übernehmen. Der Klassenname wird auf Buchstaben, Ziffern, Bindestriche und Unterstriche bereinigt, damit er immer ein gültiger Selektor ist.
• Inline-Stile setzt style-Attribute auf jedes Element. Das ist ausführlich, aber genau das, was HTML-E-Mails brauchen, weil viele E-Mail-Programme <style>-Blöcke ignorieren. Beim Herunterladen wird das CSS in einem <style>-Element ergänzt, wenn Sie eine Klasse verwenden.

Nur echte Hexadezimalfarben aus den Farbwählern gelangen ins CSS, sodass nichts Unerwartetes in Ihren Stilen landen kann.

Escaping und Sicherheit

Jede Zelle wird escapt: <, > und & werden zu <, > und &. Text wie <b> oder a < b erscheint daher genau so, wie Sie ihn eingegeben haben, statt als Markup interpretiert zu werden. Zeilenumbrüche in importierten Zellen werden zu <br>. Die Vorschau entsteht ausschließlich aus diesem escapten Markup und durchläuft einen Sanitizer, der nur Tabellenelemente übrig lässt – ein eingefügtes Skript kann also nie ausgeführt werden.