TL
Tool Lab
💰Spenden
💰Spenden

HTML-Tabellengenerator

Erstellen Sie HTML-Tabellen mit einem visuellen Editor und kopieren Sie den Code sofort.

HTML-Ausgabe
<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

Über dieses Tool

Der HTML-Tabellengenerator ermöglicht es Ihnen, Zeilen und Spalten einzustellen, Zellen direkt zu bearbeiten und sofort verwendbaren HTML-Tabellencode zu erhalten. Sie können Kopfzeile, Rahmen, Streifenzeilen und Zellauffüllung visuell konfigurieren.

Der generierte HTML-Code folgt semantischem Markup mit korrekter thead- und tbody-Struktur, was für Barrierefreiheit und Screenreader besser ist. Der Code wird in Echtzeit aktualisiert, während Sie bearbeiten.

Anleitung

  1. Legen Sie die Anzahl der Zeilen und Spalten fest.
  2. Schalten Sie Kopfzeile, Rahmen und gestreifte Zeilen mit Kontrollkästchen um.
  3. Passen Sie den Zellauffüllungswert an.
  4. Klicken Sie auf eine beliebige Zelle, um Ihren Inhalt direkt einzugeben.
  5. Kopieren Sie den Code unter "HTML-Ausgabe" und verwenden Sie ihn in Ihrem Projekt.

Anwendungsfälle

Ideal für Datenvergleichstabellen, Preistabellen, Zeitpläne, Produktspezifikationstabellen und alle in Tabellenform dargestellten Informationen auf einer Webseite.

Häufige Fragen

  • Kann ich die Tabelle ohne CSS gestalten? — Ja. Der generierte HTML-Code enthält Border-Attribute und Cellpadding, sodass grundlegende Stile ohne CSS angewendet werden.
  • Kann ich colspan oder rowspan hinzufügen? — Dieses Tool generiert eine grundlegende Tabellenstruktur. Bearbeiten Sie den generierten Code direkt, um colspan/rowspan-Attribute hinzuzufügen.
  • Wie mache ich die Tabelle responsiv? — Wickeln Sie die Tabelle in ein div mit overflow-x: auto ein, oder verwenden Sie CSS-Media-Queries, um horizontales Scrollen auf kleinen Bildschirmen zu ermöglichen.