HTML-Tabellen-Generator

HTML-Tabellen bauen: Zeilen und Spalten bearbeiten, CSV einfügen, Kopfzeile, Beschriftung und Stil wählen – barrierefreies HTML und CSS.

Der HTML-Tabellen-Generator erstellt barrierefreie Tabellen ohne Handarbeit. Du bearbeitest Zellen direkt, fügst Zeilen und Spalten hinzu oder kopierst Daten aus Excel oder einer CSV-Datei hinein. Kopfzeile, Kopfspalte, Beschriftung, Stil und Akzentfarbe sind einstellbar. Fertig sind sauberes HTML mit thead, th und scope sowie passendes CSS.

Daten aus Excel oder CSV einfügen

Kopierte Zellen oder CSV-Text

Beschriftung (caption)

Stil

Akzentfarbe

Erste Zeile als Kopfzeile Erste Spalte als Kopfspalte Kompakt

<div class="table-wrap">
  <table class="table">
    <caption>Tarife im Vergleich</caption>
    <thead>
      <tr>
        <th scope="col">Tarif</th>
        <th scope="col">Preis</th>
        <th scope="col">Speicher</th>
        <th scope="col">Support</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Basic</td>
        <td>5 €</td>
        <td>10 GB</td>
        <td>E-Mail</td>
      </tr>
      <tr>
        <td>Pro</td>
        <td>12 €</td>
        <td>100 GB</td>
        <td>E-Mail und Chat</td>
      </tr>
      <tr>
        <td>Business</td>
        <td>29 €</td>
        <td>1 TB</td>
        <td>Telefon</td>
      </tr>
    </tbody>
  </table>
</div>

Aufbau einer HTML-Tabelle

Element	Aufgabe
`<caption>`	Titel der Tabelle
`<thead>` / `<tbody>`	Kopf- und Datenbereich
`<th scope="col">`	Spaltenüberschrift
`<th scope="row">`	Zeilenüberschrift
`<td>`	Datenzelle

Tabellen in Markdown wandelst du mit Markdown zu HTML um, Zebrastreifen-Selektoren erklärt der nth-child-Tester.

Häufige Fragen

Wie übernehme ich Daten aus Excel?

Markiere die Zellen in Excel, LibreOffice oder Google Tabellen, kopiere sie und füge sie in das Feld „Daten einfügen“ ein. Tabulator, Semikolon und Komma werden als Trennzeichen erkannt.

Was macht die Tabelle barrierefrei?

Kopfzellen sind th-Elemente mit scope="col" bzw. scope="row", sodass Screenreader jede Zelle ihrer Überschrift zuordnen. Eine caption beschreibt den Inhalt. Für Layouts sollten Tabellen nicht verwendet werden, nur für Daten.

Wie wird die Tabelle auf dem Handy dargestellt?

Der umschließende Container mit overflow-x: auto macht breite Tabellen waagerecht scrollbar, statt das Layout zu sprengen.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.