HTML-Tabellen Tutorial

Ausführliche Erklärung für Anfänger

Eine HTML-Tabelle ist ein Raster aus Zeilen und Spalten, mit dem du strukturierte Daten übersichtlich darstellen kannst. Dabei kommen verschiedene HTML-Elemente und Attribute zum Einsatz.

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

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.

<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.

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

Unterschied:

  • 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.

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

Unterschied:

  • rowspan="3" bedeutet, die Zelle erstreckt sich über drei Zeilen.
  • Nützlich, wenn eine Gruppe von Daten zu einer Kategorie gehört.
<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.

Barrierefreiheit und Attribut scope

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

scope

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

Beispiel:

<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.

Beispiel:

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

Unterschied: 

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 unter dem <table>-Tag platziert.

<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 für einfache, strukturierte Tabelle mit HTML Attribute

Kategorie Produkt Preisdetails
Elektronik Smartphone Einzelpreis 499,00 €
Tablet Einzelpreis 399,00 €
Monitor Einzelpreis 299,00 €
Gesamtpreis: 1.197,00 € 
<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

Kategorie Produkt Preisdetails
Elektronik Smartphone Einzelpreis 499,00 €
Tablet Einzelpreis 399,00 €
Monitor Einzelpreis 299,00 €
Gesamtpreis: 1.197,00 € 
<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>

<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="top-align 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="middle-align center">
      <td class="center middle">Tablet</td>
      <td class="center middle">Einzelpreis</td>
      <td class="center middle">399,00 €</td>
    </tr>
    <tr class="bottom-align center">
      <td class="center bottom">Monitor</td>
      <td class="center bottom">Einzelpreis</td>
      <td class="center bottom">299,00 €</td>
    </tr>
    <tr class="middle-align">
      <td class="right-align" colspan="3">Gesamtpreis:</td>
      <td class="center-align">1.197,00 €</td>
    </tr>
  </tbody>
</table>

Responsive Tabellen

Tutorial für mobile-optimierte Web-Tables

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. 
<div class="table-responsive">
  <!-- Deine Tabelle hier -->
</div>

<style>
.table-responsive {
  overflow-x: auto;
}
</style>

Methode 2 – Responsive Tabelle mit CSS

Hier verwandeln wir die Tabelle für kleine Bildschirme in eine tabellarische Liste.

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. 
@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: 10%;
    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;
  }
}

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.
Webdesign Programmierung 3D Objekte Service Preiskalkulator

Kontakt

Webdesignstudio WedDesign

Eduard Wischnewski

Am Justusberg 7
41849 Wassenberg

Telefon:
02432 90 75 51		E-Mail:
info (at) weddesign.de

    Ja, ich möchte den Newsletter erhalten