HTML + CSS: Tabellen

Kurz: Tabellen zeigen Daten, die in Zeilen und Spalten zusammengehören (Stundenplan, Preislisten, Ergebnisse). Verwende sie nie für das Seitenlayout, das ist Aufgabe von CSS.

Teil des Kurses HTML + CSS

Kapitel 7 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Tabellen zeigen Daten, die in Zeilen und Spalten zusammengehören (Stundenplan, Preislisten, Ergebnisse). Verwende sie nie für das Seitenlayout, das ist Aufgabe von CSS.

<table>
  <caption>Notenübersicht</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Mathe</th><th scope="col">Deutsch</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Mia</th><td>1</td><td>2</td></tr>
    <tr><th scope="row">Tom</th><td>3</td><td>1</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Schnitt</th><td>2,0</td><td>1,5</td></tr>
  </tfoot>
</table>
<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; text-align: left; }
  thead th { background: #e0e7ff; }
  caption { font-weight: bold; margin-bottom: 6px; }
</style>

Element	Bedeutung
<table>	die Tabelle
<caption>	Titel der Tabelle
<thead>, <tbody>, <tfoot>	Kopf, Körper, Fuß
<tr>	Zeile (table row)
<th>	Kopfzelle (header), fett und zentriert
<td>	Datenzelle
scope="col" / "row"	sagt Screenreadern, ob die Kopfzelle für eine Spalte oder Zeile gilt

Zellen verbinden

colspan verbindet Zellen nach rechts, rowspan nach unten:

<table>
  <tr><th colspan="3">Stundenplan Montag</th></tr>
  <tr><td>8:00</td><td rowspan="2">Mathe (Doppelstunde)</td><td>Raum 12</td></tr>
  <tr><td>9:00</td><td>Raum 12</td></tr>
  <tr><td>10:00</td><td>Sport</td><td>Halle</td></tr>
</table>
<style>table{border-collapse:collapse}th,td{border:1px solid #999;padding:6px 10px}</style>

Spalten gruppieren

<table>
  <colgroup>
    <col>
    <col style="background:#fef3c7">
    <col span="2" style="background:#dcfce7">
  </colgroup>
  <tr><th>Produkt</th><th>Preis</th><th>Menge</th><th>Summe</th></tr>
  <tr><td>Stift</td><td>1,50 €</td><td>10</td><td>15,00 €</td></tr>
</table>
<style>table{border-collapse:collapse}th,td{border:1px solid #999;padding:6px 10px}</style>

Tabellen gestalten

<style>
  table.zebra { border-collapse: collapse; width: 100%; font-family: sans-serif; }
  .zebra th, .zebra td { padding: 8px 12px; text-align: left; }
  .zebra thead { background: #1e3a8a; color: white; }
  .zebra tbody tr:nth-child(even) { background: #f1f5f9; }
  .zebra tbody tr:hover { background: #dbeafe; }
  .zebra td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
</style>
<table class="zebra">
  <thead><tr><th>Stadt</th><th>Einwohner</th><th>Fläche km²</th></tr></thead>
  <tbody>
    <tr><td>Berlin</td><td>3.700.000</td><td>892</td></tr>
    <tr><td>Hamburg</td><td>1.900.000</td><td>755</td></tr>
    <tr><td>München</td><td>1.500.000</td><td>310</td></tr>
    <tr><td>Köln</td><td>1.100.000</td><td>405</td></tr>
  </tbody>
</table>

Tabellen auf dem Handy

Breite Tabellen passen nicht auf kleine Bildschirme. Lass sie in einem scrollbaren Container laufen:

<div style="overflow-x: auto;" tabindex="0" role="region" aria-label="Preistabelle">
  <table>...</table>
</div>

Barrierefreiheit

• Immer <th> für Kopfzellen verwenden, mit scope
• <caption> beschreibt den Inhalt
• Bei sehr komplexen Tabellen (mehrere Kopfebenen) id und headers benutzen, oder besser: in einfachere Tabellen aufteilen
• Tabellen nicht für Layout “missbrauchen”

Merke

• Tabellen sind für Daten, nicht für Layout
• table, tr, th, td, caption, thead/tbody/tfoot
• scope ordnet Kopfzellen zu; colspan/rowspan verbinden Zellen
• Aussehen mit CSS: border-collapse, padding, nth-child für Zebrastreifen
• Breite Tabellen in einen scrollbaren Container legen

Übungsaufgabe

Baue eine Preistabelle mit Kopfzeile, drei Produkten, Summe in der Fußzeile und Zebrastreifen.

Quiz zur Selbstkontrolle

Welches Element ist eine Kopfzelle?

• <th> (richtig)
• <td>
• <tr>
• <head>

Wofür sind Tabellen gedacht?

• Für zusammengehörige Daten in Zeilen und Spalten (richtig)
• Für das Seitenlayout
• Für Menüs
• Für Bilder

Was macht colspan="3"?

• Die Zelle erstreckt sich über drei Spalten (richtig)
• Drei Zeilen werden verbunden
• Die Tabelle bekommt drei Spalten
• Die Zelle wird dreimal wiederholt

Weiter im Kurs

Zurück: Listen

Weiter: Formulare

Alle Kapitel: HTML + CSS im Überblick