Webdesign lernen HTML

HTML-Tabellen Tutorial.

Tabellen erstellen, gestalten und responsive machen – ausführlich für Anfänger erklärt: von der einfachen Tabelle über colspan und rowspan bis zur barrierefreien, mobilen Darstellung.

Von Eduard Wischnewski, Webdesigner · aktualisiert am 29.10.2026

Tabellen erstellen, gestalten und responsive machen

Eine HTML-Tabelle ist ein Raster aus Zeilen und Spalten, mit dem du strukturierte Daten übersichtlich darstellen kannst. In diesem Tutorial lernst du, wie du HTML-Tabellen erstellst, gestaltest und responsive machst.

Eine Tabelle besteht aus wenigen Grundelementen:

<table> – der Container der ganzen Tabelle
<thead>, <tbody>, <tfoot> – Kopf-, Inhalts- und Fußbereich
<tr> – eine Tabellenzeile (table row)
<th> – eine Kopfzelle (table header)
<td> – eine Datenzelle (table data)
<caption> – die Tabellenüberschrift

HTML Tabellen Attribute – Überblick

Attribut	Element	Mögliche Werte	Beschreibung
`width`	`<table>`, `<td>`, `<th>`	Pixel (z.B. 300) oder Prozent (z.B. 100%)	Setzt die Breite des Elements
`height`	`<table>`, `<td>`, `<th>`	Pixel oder Prozent	Setzt die Höhe des Elements
`colspan`	`<td>`, `<th>`	Zahl (z.B. 2, 3)	Erstreckt die Zelle über mehrere Spalten
`rowspan`	`<td>`, `<th>`	Zahl (z.B. 2, 3)	Erstreckt die Zelle über mehrere Zeilen
`scope`	`<th>`	`col`, `row`, `colgroup`, `rowgroup`	Definiert die Beziehung der Kopfzelle zu Zeilen oder Spalten
`headers`	`<td>`	ID-Werte von Kopfzellen	Verknüpft Datenzelle mit Kopfzellen (für Barrierefreiheit)
`align`	`<td>`, `<th>`	`left`, `center`, `right`	Horizontale Ausrichtung des Zellinhalts
`valign`	`<td>`, `<th>`	`top`, `middle`, `bottom`, `baseline`	Vertikale Ausrichtung des Zellinhalts
`title`	Alle	Text	Tooltip-Text bei Maus-Hover
`id`	Alle	Text	Eindeutige ID für Verweise und Styles
`class`	Alle	Text	CSS-Klasse für Styling

Gut zu wissen: width, height, align, valign, cellpadding, cellspacing und border gelten in HTML5 als veraltet. Browser verstehen sie zwar noch, für neue Projekte solltest du das Aussehen aber mit CSS steuern – wie im Abschnitt „Gleiche Tabelle mit CSS“ unten.

Erklärungen zu ausgewählten Attributen

cellspacing definiert den Abstand zwischen Zellen in der Tabelle. Wird häufig über CSS mit border-spacing ersetzt.

cellpadding definiert den Innenabstand innerhalb einer Zelle – der Abstand zwischen Inhalt und Zellrand. Er wird typischerweise über das CSS padding festgelegt.

align gibt die horizontale Position des Inhalts in einer Zelle an. Werte sind:

left – Ausrichtung nach links
center – zentriert
right – Ausrichtung nach rechts

valign definiert die vertikale Ausrichtung des Inhalts in einer Zelle mit folgenden Werten:

top – Ausrichtung oben
middle – vertikal zentriert
bottom – Ausrichtung unten
baseline – richtet sich an der Schriftlinie aus

Beispiel: einfache Tabelle

Produkt	Preis	Verfügbarkeit
Lampe	25,99 €	Auf Lager

<table border="1"> erzeugt einen sichtbaren Rahmen (heute meist mit CSS gelöst).
Kopfzeilen <th> werden hervorgehoben und gelten meist als Überschriften für ihre Spalte.
<td> enthält die eigentlichen Werte.

html

<table border="1">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Preis</th>
      <th>Verfügbarkeit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lampe</td>
      <td>25,99 €</td>
      <td>Auf Lager</td>
    </tr>
  </tbody>
</table>

Tabellenzellen verbinden: colspan und rowspan

Kategorie	Produkt	Preisdetails
Elektronik	Smartphone	Einzelpreis	499,00 €
	Tablet	Einzelpreis	399,00 €
	Monitor	Einzelpreis	299,00 €
Gesamtpreis:			1.197,00 €

colspan (Spalten zusammenfassen)

Mit colspan kannst du eine Zelle über mehrere Spalten erstrecken.

html

<th colspan="2">Preisdetails</th>

Wenn du colspan="2" setzt, verbindest du zwei Spalten zu einer Zelle.
Dies ist praktisch für Überschriften, die über mehrere Spalten gelten oder für zusammengefasste Daten.

rowspan (Zeilen zusammenfassen)

rowspan lässt eine Zelle mehrere Zeilen hoch sein.

html

<td rowspan="3">Elektronik</td>

rowspan="3" bedeutet, die Zelle erstreckt sich über drei Zeilen.
Nützlich, wenn eine Gruppe von Daten zu einer Kategorie gehört.

html

<table border="1">
  <thead>
    <tr>
      <th>Kategorie</th>
      <th>Produkt</th>
      <th colspan="2">Preisdetails</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Elektronik</td>
      <td>Smartphone</td>
      <td>Einzelpreis</td>
      <td>499,00 €</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>Einzelpreis</td>
      <td>399,00 €</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>Einzelpreis</td>
      <td>299,00 €</td>
    </tr>
    <tr>
      <td colspan="3">Gesamtpreis:</td>
      <td>1.197,00 €</td>
    </tr>
  </tbody>
</table>

Tipp: Spalten- und Zeilen-Zusammenfassungen verbessern die Lesbarkeit komplexer Tabellen.

Barrierefreie Tabellen: scope, headers und caption

Screenreader nutzen die Verknüpfung zwischen Kopfzellen und Zellen, um den Inhalt verständlich vorzulesen.

Attribut scope

scope="col": Kopfzelle für eine Spalte
scope="row": Kopfzelle für eine Zeile

html

<th scope="col">Preis</th>
<th scope="row">Lampe</th>

Tipp: Nutze immer scope, wenn du Kopfzellen benutzt – das verbessert die Zugänglichkeit.

Attribut headers für komplexe Tabellen

headers verbindet <td>-Zellen mit <th>-Kopfzellen über IDs, wenn die Tabelle sehr verschachtelt ist.

html

<th id="produkt">Produkt</th>
<th id="preis">Preis</th>
<td headers="produkt">Lampe</td>
<td headers="preis">29,99 €</td>

headers ist für komplexe Tabellen wichtig, wenn die semantische Verbindung allein durch Struktur nicht klar ist.

Tabellenüberschrift mit caption

Das <caption>-Element beschreibt kurz den Inhalt der Tabelle, wird von Screenreadern vorgelesen und direkt nach dem öffnenden <table>-Tag platziert.

html

<table border="1">
  <caption>Preisliste Sommer 2024</caption>
  <!-- Tabelle -->
</table>

Tipp: Nutze <caption>, um deine Tabelle auch für Nutzer mit Screenreadern besser verständlich zu machen.

Beispiel: strukturierte Tabelle mit HTML-Attributen

Kategorie	Produkt	Preisdetails
Elektronik	Smartphone	Einzelpreis	499,00 €
	Tablet	Einzelpreis	399,00 €
	Monitor	Einzelpreis	299,00 €
Gesamtpreis:			1.197,00 €

html

<table border="1" cellpadding="6" cellspacing="0">
  <thead bgcolor="#005f8d">
    <tr align="center" valign="middle">
      <th><font color="white">Kategorie</font></th>
      <th><font color="white">Produkt</font></th>
      <th colspan="2"><font color="white">Preisdetails</font></th>
    </tr>
  </thead>
  <tbody>
    <tr align="center" valign="top">
      <td rowspan="3">Elektronik</td>
      <td>Smartphone</td>
      <td>Einzelpreis</td>
      <td>499,00 €</td>
    </tr>
    <tr align="center" valign="middle">
      <td>Tablet</td>
      <td>Einzelpreis</td>
      <td>399,00 €</td>
    </tr>
    <tr align="center" valign="bottom">
      <td>Monitor</td>
      <td>Einzelpreis</td>
      <td>299,00 €</td>
    </tr>
    <tr valign="middle">
      <td align="right" colspan="3">Gesamtpreis:</td>
      <td align="center">1.197,00 €</td>
    </tr>
  </tbody>
</table>

Gleiche Tabelle mit CSS

Moderner und sauberer: dasselbe Aussehen, aber komplett über CSS-Klassen gesteuert.

html

<style>
.product-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  text-align: left;
}
.product-table th,
.product-table td {
  border: 1px solid #0073aa;
  padding: 10px 15px;
  vertical-align: middle;
}
.product-table thead tr.header-row {
  background-color: #005f8d;
  color: white;
  font-weight: bold;
}
.center {
  text-align: center;
}
.right-align {
  text-align: right;
}
.top {
  vertical-align: top;
}
.middle {
  vertical-align: middle;
}
.bottom {
  vertical-align: bottom;
}
</style>

html

<table class="product-table">
  <thead>
    <tr class="header-row">
      <th class="center middle">Kategorie</th>
      <th class="center middle">Produkt</th>
      <th class="center middle" colspan="2">Preisdetails</th>
    </tr>
  </thead>
  <tbody>
    <tr class="center">
      <td rowspan="3" class="middle">Elektronik</td>
      <td class="center top">Smartphone</td>
      <td class="center top">Einzelpreis</td>
      <td class="center top">499,00 €</td>
    </tr>
    <tr class="center">
      <td class="center middle">Tablet</td>
      <td class="center middle">Einzelpreis</td>
      <td class="center middle">399,00 €</td>
    </tr>
    <tr class="center">
      <td class="center bottom">Monitor</td>
      <td class="center bottom">Einzelpreis</td>
      <td class="center bottom">299,00 €</td>
    </tr>
    <tr>
      <td class="right-align" colspan="3">Gesamtpreis:</td>
      <td class="center">1.197,00 €</td>
    </tr>
  </tbody>
</table>

Responsive Tabellen

Normale HTML-Tabellen sind oft sehr breit und können auf kleinen Bildschirmen (Smartphones, Tablets) schwer lesbar oder bedienbar sein. Eine gute Responsive Table passt sich flexibel an und bleibt benutzerfreundlich.

Methode 1 – Scrollbare Tabelle in Container

Einfacher Weg: Tabelle in einem Container mit horizontalem Scroll.

Produkt	Preis	Lagerbestand	Beschreibung
Tischlampe	29,99€	25 Stück	Schöne moderne Lampe mit warmem Licht.
Schreibtisch	199,00€	12 Stück	Robuster Schreibtisch aus Holz.

html

<div class="table-responsive">
  <!-- Deine Tabelle hier -->
</div>
<style>
.table-responsive {
  overflow-x: auto;
}
</style>

Methode 2 – Responsive Tabelle mit CSS

Hier verwandelst du die Tabelle für kleine Bildschirme in eine tabellarische Liste. Probier es mit den Buttons aus:

Produkt	Preis	Lagerbestand	Beschreibung
Tischlampe	29,99€	25 Stück	Schöne moderne Lampe mit warmem Licht.
Schreibtisch	199,00€	12 Stück	Robuster Schreibtisch aus Holz.

css

@media (max-width: 600px) {
  .mein-table,
  .mein-table thead,
  .mein-table tbody,
  .mein-table th,
  .mein-table td,
  .mein-table tr {
    display: block;
  }
  .mein-table thead tr {
    display: none;
  }
  .mein-table tbody tr {
    margin-bottom: 1em;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  .mein-table tbody td {
    padding-left: 40%;
    position: relative;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
  }
  .mein-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
    white-space: nowrap;
  }
}

Damit die Beschriftung erscheint, bekommt jede Zelle ein data-label-Attribut, z.B. <td data-label="Preis">29,99€</td>.

Tipps & Tricks

Klare und aussagekräftige Überschriften in <th> nutzen.
Tabellen nie für reines Layout verwenden – dafür CSS Grid oder Flexbox.
Auf Barrierefreiheit achten: scope und headers für Screenreader.
Semantisch sauberen HTML-Code schreiben für bessere SEO und Nutzerfreundlichkeit.

Weiterlernen

Für das Seitenlayout statt Tabellen nimmst du CSS Grid oder Flexbox. Wie sich Tabellen und ganze Seiten an Smartphones anpassen, erklärt Responsive Webdesign erstellen. Sonderzeichen wie €, × oder ✓ für deine Tabellen findest du in der HTML Sonderzeichen Liste.

Du hast viele Daten, die übersichtlich auf deine Webseite sollen? Ich setze das im Webdesign sauber und mobilfreundlich um.

FAQ: HTML-Tabellen

Kurz beantwortet: Tabellen in HTML

Wie erstelle ich eine Tabelle in HTML?

Du beginnst mit <table>, legst darin mit <tr> die Zeilen an und füllst sie mit Kopfzellen <th> oder Datenzellen <td>. Für bessere Struktur trennst du Kopf und Inhalt mit <thead> und <tbody>.

Was ist der Unterschied zwischen th und td?

<th> ist eine Kopfzelle und beschreibt eine Spalte oder Zeile, <td> enthält die eigentlichen Daten. Browser stellen <th> standardmäßig fett und zentriert dar, Screenreader lesen sie als Überschrift vor.

Wie verbinde ich Zellen in einer HTML-Tabelle?

Mit colspan verbindest du Zellen über mehrere Spalten, mit rowspan über mehrere Zeilen. colspan="2" macht eine Zelle zwei Spalten breit, rowspan="3" drei Zeilen hoch.

Wie bekomme ich einen Rahmen um meine Tabelle?

Am saubersten mit CSS: table { border-collapse: collapse; } und th, td { border: 1px solid #ccc; }. Das Attribut border="1" funktioniert zwar noch, gilt in HTML5 aber als veraltet.

Wie mache ich eine HTML-Tabelle responsive?

Die einfachste Lösung ist ein Container mit overflow-x: auto, damit die Tabelle auf kleinen Bildschirmen horizontal scrollt. Alternativ wandelst du die Zeilen per Media Query in Kartenblöcke um und zeigst die Spaltennamen über data-label an.

Passt dazu Weitere Tutorials

Weiter lernen.

Responsive Webdesign Webseiten, die sich Smartphone, Tablet und Desktop anpassen – Viewport, Media Queries, Flexbox, Grid. Zum Tutorial → HTML Sonderzeichen Liste Pfeile, Formen und Symbole als HTML-Entity, Unicode und CSS-Code – zum Kopieren. Zum Tutorial → CSS Grid lernen für Anfänger Moderne, flexible und responsive Layouts mit CSS Grid aufbauen – einfach erklärt mit Beispielen. Zum Tutorial →

Keine Zeit, es selbst umzusetzen? Ich baue Ihre Webseite schnell und sauber.

Jetzt kontaktieren