HTML-Tabellengenerator

HTML-Tabellen von Hand zu schreiben ist repetitiv und unforgiving: Jede Zeile wiederholt dieselben Tags, und ein fehlendes schließendes Tag bricht das gesamte Layout. Dieser Generator bietet stattdessen ein visuelles Raster. Legen Sie die Größe fest, klicken Sie Zellen zum Tippen an, schalten Sie einige Styling-Optionen um und kopieren Sie sauberes semantisches HTML5 samt passendem CSS in eine Website, einen Blogbeitrag oder eine E-Mail-Vorlage. Editor, Live-Vorschau und Code-Ausgabe liegen auf einer Seite, sodass Sie genau sehen, was eingefügt wird, bevor Sie kopieren.

Eine Tabelle Schritt für Schritt erstellen

1. Legen Sie die Anzahl der Zeilen und Spalten fest und drücken Sie dann auf Größe aktualisieren. Das Raster startet bei 3 mal 3.
2. Klicken Sie eine beliebige Zelle an, um sie direkt zu bearbeiten. Ein Eingabefeld ersetzt den Zelltext; Enter speichert den Wert, Escape verwirft die Bearbeitung und stellt den vorherigen Wert wieder her.
3. Schalten Sie Rahmen, Streifen, Hover und Kopfzeile um und tippen Sie optional eine Beschriftung ein. Jede Änderung zeichnet Vorschau und Code sofort neu.
4. Nutzen Sie die beiden Kopieren-Schaltflächen, um HTML und CSS getrennt zu entnehmen, und fügen Sie beides in Ihr Projekt ein.

Ein generiertes Beispiel

Eine Tabelle mit 2 Spalten und 2 Zeilen, einer Beschriftung und den standardmäßig aktiven Umschaltern erzeugt Markup dieser Form:

<table class="handytools-table bordered striped hoverable">
  <caption>Pricing</caption>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$12</td>
    </tr>
  </tbody>
</table>

Das passende CSS setzt width: 100% und border-collapse: collapse auf die Basisklasse, fügt jeder Zelle acht Pixel vertikalen und zwölf Pixel horizontalen Innenabstand bei linksbündigem Text hinzu und hängt dann Regeln für die jeweils aktivierten Optionen an.

Gestaltungsoptionen erklärt

Umschalter	Ergänzt im HTML	Ergänzt im CSS
Rahmen	Klasse bordered	1px solid #ddd Rahmen an th und td
Streifen	Klasse striped	Heller Hintergrund bei tbody tr:nth-child(even)
Hover	Klasse hoverable	Hintergrundwechsel bei tbody tr:hover
Kopfzeile	thead mit th-Zellen	Schattierung und Fettdruck für th

Die Klassennamen sind additiv, das Ausschalten eines Umschalters entfernt also einfach den Modifikator und seine Regel. Weil alles eine gemeinsame Basisklasse teilt, bedeutet späteres Umgestalten das Bearbeiten einer einzigen Regel statt der Suche nach Inline-Styles. Die Kopfzeilen-Option ist etwas speziell: Ist sie aktiv, wird die erste Zeile in thead und die übrigen in tbody gehüllt, und die th-Schattierungsregel wird ausgegeben. Ist sie aus, bleiben alle Zeilen in tbody, doch die Zellen der ersten Zeile werden weiterhin als th geschrieben, weil das Raster sie so speichert. Brauchen Sie gewöhnliche Zellen in der ersten Zeile, bearbeiten Sie das kopierte Markup nach dem Erzeugen.

Zellinhalte schreiben

Zellwerte werden bei der Ausgabe HTML-escapt, das Tippen von <, >, &, " oder ' erzeugt also sicheren Text statt kaputtem Markup. Das macht das Tool praktisch für Vergleichstabellen, die Code oder Operatoren erwähnen, etwa „a < b“ oder „Preis & Steuer“. Das Escaping geschieht im erzeugten Code, nicht im Editor am Bildschirm, sodass das Raster zeigt, was Sie getippt haben, während die Ausgabe das sichere Äquivalent zeigt. Formatierungssteuerungen gibt es nicht: kein Fett, kein Kursiv, keine Links und keine Zeilenumbrüche innerhalb einer Zelle. Für reichhaltigere Inhalte erzeugen Sie das Grundgerüst und bearbeiten anschließend das kopierte HTML von Hand.

Größenänderung und Randfälle

Die wichtigste Einschränkung ist das zerstörende Ändern der Größe: Größe aktualisieren ruft den Tabellen-Generator neu auf und leert damit jede Zelle. Das Raster ist ansonsten schlicht — es gibt kein Zusammenführen oder Teilen, kein rowspan oder colspan, keine Ausrichtungssteuerung und keine Schaltflächen zum Einfügen von Zeilen oder Spalten in der Oberfläche. Zeilen sind auf 50 und Spalten auf 20 begrenzt; eine außerhalb dieses Bereichs eingegebene Zahl wird auf die Grenze gesetzt statt abgelehnt. Brauchen Sie eine Struktur, die das Raster nicht ausdrücken kann, erzeugen Sie einen Ausgangspunkt und verfeinern Sie das kopierte Markup von Hand.

Wohin die Ausgabe passt

• Blog- und CMS-Inhalte: Vergleichs- oder Preistabellen einbauen, ohne Code anzufassen.
• Dokumentation und README-Dateien: schnell konsistente Datentabellen erzeugen.
• E-Mail-Vorlagen: eine Tabelle bauen und das CSS dann inline setzen, falls ein Client Style-Blöcke entfernt.
• Prototyping: ein Layout skizzieren und das erzeugte CSS behalten oder ersetzen.

Ein Hinweis zu E-Mail: :hover und nth-child werden von manchen Mail-Clients ignoriert, Streifen- und Hover-Effekte überleben dort also möglicherweise nicht, obwohl das Markup gültig ist. Rahmen und Kopfzeilen-Schattierung, die gewöhnliche Eigenschaften nutzen, reisen zuverlässiger.

Hinweise zur Barrierefreiheit

Das erzeugte Markup ist ein vernünftiger Ausgangspunkt für Barrierefreiheit. Kopfzellen nutzen th innerhalb von thead, wodurch Screenreader eine Spaltenüberschrift den darunterliegenden Werten zuordnen können, und das caption-Element gibt der Tabelle einen zugänglichen Namen, den assistive Technologie ansagen kann. Was der Generator nicht hinzufügt, sind scope-Attribute an den Kopfzellen oder eine längere Zusammenfassung des Tabellenzwecks. Bearbeiten Sie bei einer großen oder komplexen Tabelle das kopierte HTML, um jeder Kopfzelle scope="col" oder scope="row" hinzuzufügen. Streifen verbessern die Lesbarkeit für sehende Nutzer, sind aber kein Ersatz dafür, die Kopfzeile semantisch auszuzeichnen. Halten Sie die Beschriftung kurz und beschreibend, denn sie ist der erste Teil der Tabelle, den ein Screenreader ansagt.

Verwandte Tools

• Markdown-Tabellengenerator
• HTML-Encoder
• CSV-Viewer
• CSS-Formatierer