Ausführbare HTML-Docs: HTML Tabelle

Q: Wie erstelle ich eine Tabelle in HTML?

Umschließ sie mit , schreib ein pro Zeile und setz die Zellen hinein: für Kopfzellen und für Datenzellen. Jede Zeile sollte gleich viele Zellen haben, außer einige Zellen erstrecken sich über mehrere Spalten.

Q: Wie mache ich eine HTML-Tabelle responsiv?

Setz die Tabelle in einen Container mit overflow-x: auto. Auf einem schmalen Bildschirm scrollt die Tabelle dann innerhalb des Containers seitwärts, statt die ganze Seite breiter zu machen.

So erstellst du eine Tabelle in HTML

Eine Tabelle ist ein <table>-Element aus Zeilen (<tr>), und jede Zeile besteht aus Zellen: <th> für Kopfzellen und <td> für Datenzellen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

Die Tabelle hat keine eigenen Rahmen; die eine CSS-Regel fügt sie hinzu, damit du die Zellen siehst. Die Spalten ergeben sich aus den Zellen: Die erste Zelle jeder Zeile ist Spalte eins, die zweite Spalte zwei und so weiter. Jede Zeile sollte gleich viele Zellen haben. Lösch ein <td>, und diese Zeile endet zu früh und hinterlässt eine Lücke.

<th>-Zellen sind standardmäßig fett und zentriert. Das ist nur das Aussehen; entscheidend ist, dass sie Beschriftungen sind, und darum geht es im nächsten Abschnitt.

Die Tabellenelemente

Element	Was es ist
`<table>`	Die Tabelle
`<caption>`	Der Titel der Tabelle, das erste Kind von `<table>`
`<thead>`	Die Gruppe der Kopfzeilen
`<tbody>`	Die Gruppe der Zeilen im Tabellenkörper (eine Tabelle kann mehrere haben)
`<tfoot>`	Die Gruppe der Fußzeilen, etwa für Summen
`<tr>`	Eine Zeile
`<th>`	Eine Kopfzelle
`<td>`	Eine Datenzelle
`<colgroup>`, `<col>`	Spalten, um eine ganze Spalte zu stylen (Breiten, Hintergrund)

Rahmen erklärt die Seite zum HTML Tabellenrahmen, und Zellen, die sich über mehrere Spalten oder Zeilen erstrecken, die Seite zu colspan und rowspan.

Kopfzellen, scope und caption

Eine Tabelle mit Überschriften oben und an der Seite muss sagen, in welche Richtung jede Überschrift zeigt. scope="col" beschriftet die Spalte darunter, scope="row" die Zeile daneben. <caption> gibt der Tabelle einen sichtbaren Titel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Mit diesem Markup kann ein Screenreader, der zur Zelle 14:00 springt, „Saturday, Closes, 14:00“ ansagen, die Zahl wird also nie allein vorgelesen. Bei einer einfachen Tabelle mit einer Kopfzeile erkennen Browser die Überschriften meist auch ohne scope, aber es zu schreiben kostet nichts und nimmt das Raten weg.

Die caption ist auch das, was ein Screenreader ansagt, wenn er die Tabelle erreicht. Nimm sie lieber als eine Überschrift über der Tabelle, die nicht mit ihr verbunden ist.

thead, tbody und tfoot

Die drei Gruppen teilen die Zeilen in Kopf, Körper und Fuß. Der Fuß ist der Platz für Summen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Zwei Details machen die Zahlen lesbar: text-align: end richtet die Dezimalpunkte untereinander aus (jeder Preis hat zwei Nachkommastellen), und font-variant-numeric: tabular-nums gibt jeder Ziffer dieselbe Breite.

Wenn du <tr> direkt in <table> schreibst, wie im ersten Beispiel, fügt der Browser trotzdem ein <tbody> um die Zeilen ein. Deshalb trifft ein CSS-Selektor wie table > tr nie etwas: Auf der Seite stehen die Zeilen in tbody. Nimm table tr oder schreib das <tbody> selbst.

Eine Tabelle stylen: Streifen, Hover und Breite

:nth-child färbt abwechselnde Zeilen, :hover hebt die Zeile unter dem Mauszeiger hervor, und width: 100% streckt die Tabelle über ihren Container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start richtet den Text der Kopfzellen an den Daten darunter aus; sonst ist th zentriert. start statt left hält die Ausrichtung auch in Sprachen richtig, die von rechts nach links laufen.

Responsive Tabellen, die scrollen

Eine Tabelle kann nicht schmaler werden als ihr Inhalt. Auf einem Handy schiebt eine breite Tabelle die ganze Seite zur Seite. Setz sie stattdessen in einen Container, der scrollt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Der Container ist hier auf 300 Pixel begrenzt, damit er sich wie ein Handybildschirm verhält; scroll ihn seitwärts. tabindex="0" lässt Tastaturnutzer den Container fokussieren und mit den Pfeiltasten scrollen, und role="region" mit einem aria-label gibt diesem Halt einen Namen.

Tabellen sind für Daten

Nimm eine Tabelle, wenn der Inhalt wirklich Zeilen und Spalten hat: Preise, Zeitpläne, Vergleiche, Ergebnisse. Nimm keine, um Dinge auf der Seite nebeneinander zu platzieren. Layout-Tabellen verwirren Screenreader, die dann Zeilen und Spalten ansagen, die nichts bedeuten, und sie können sich nicht an kleine Bildschirme anpassen. Für Layout gibt es CSS Flexbox und Grid.

Häufige Fehler

Zeilen mit unterschiedlich vielen Zellen. Die kurzen Zeilen enden zu früh, und die Spalten stehen nicht mehr untereinander.
<td> mit fettem Text als Überschrift verwenden. Nimm <th>, damit die Überschriften echte Beschriftungen sind.
Die obsoleten Attribute border, cellpadding, cellspacing, bgcolor und align. Nimm stattdessen CSS.
Inhalt direkt in <tr> oder <table> setzen, außerhalb jeder Zelle. Browser schieben ihn aus der Tabelle heraus, meistens darüber.
Eine Überschrift über der Tabelle statt einer <caption>.
table > tr im CSS. Der Browser hat ein <tbody> eingefügt; schreib table tr oder tbody tr.

Häufig gestellte Fragen

Wie erstelle ich eine Tabelle in HTML?

Umschließ sie mit <table>, schreib ein <tr> pro Zeile und setz die Zellen hinein: <th> für Kopfzellen und <td> für Datenzellen. Jede Zeile sollte gleich viele Zellen haben, außer einige Zellen erstrecken sich über mehrere Spalten.

Was ist der Unterschied zwischen th und td?

<th> ist eine Kopfzelle, die eine Spalte oder Zeile beschriftet, und <td> ist eine Datenzelle. Browser zeigen <th> fett und zentriert an, und Screenreader lesen vor jeder Datenzelle die passende Überschrift vor, damit die Zahlen verständlich sind.

Wofür sind thead, tbody und tfoot da?

Sie gruppieren Zeilen in Kopf, Körper und Fuß (Summen) der Tabelle. Sie machen die Struktur für Hilfstechnologien klar, geben CSS etwas zum Ansprechen, und wenn eine lange Tabelle gedruckt wird, können Browser den <thead> auf jeder Seite wiederholen.

Warum hat meine HTML-Tabelle keine Rahmen?

Tabellen haben standardmäßig keine Rahmen. Füg sie mit CSS hinzu: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Das alte Attribut border="1" ist obsolet.

Wie mache ich eine HTML-Tabelle responsiv?

Setz die Tabelle in einen Container mit overflow-x: auto. Auf einem schmalen Bildschirm scrollt die Tabelle dann innerhalb des Containers seitwärts, statt die ganze Seite breiter zu machen.

Verwandte Konzepte