W3docs
de
Anmelden

HTML-Tabellen

HTML-Tabellen ermöglichen die Anordnung von Daten wie Text, Bildern und Links in Zeilen und Spalten. Probiere HTML-Tabellenbeispiele aus!

In HTML können Sie Tabellen für Ihre Website mit dem <table>-Tag in Verbindung mit den Tags <tr>, <td> und <th> erstellen.

HTML-Tabellen ermöglichen die Darstellung von Daten (z. B. Bilder, Text, Links) in Spalten und Zeilen von Zellen. Tabellenzeilen können mithilfe der Elemente <thead>, <tfoot> und <tbody> in Kopf-, Fuß- und Rumpfabschnitte unterteilt werden.

In HTML5 kann <tfoot> entweder vor oder nach dem <tbody>-Tag platziert werden. Beide müssen nach allen <caption>-, <colgroup>- und <thead>-Elementen stehen.

Die meisten Attribute des <table>-Elements werden in HTML5 nicht mehr verwendet. Wenn Sie das Erscheinungsbild der Tabelle gestalten möchten, verwenden Sie stattdessen CSS.

Datentabellen vs. Layouttabellen. Verwenden Sie Tabellen ausschließlich für tabellarische Daten – also für Informationen, bei denen eine bedeutungsvolle Beziehung zwischen Zeilen und Spalten besteht. Nutzen Sie Tabellen nicht zur Seitengestaltung (z. B. für die Positionierung einer Seitenleiste oder einer Navigationsleiste). Layouttabellen verwirren Screenreader und erschweren responsives Design. Verwenden Sie für das Seitenlayout stattdessen CSS Flexbox oder Grid.

Syntax

Der <table>-Tag wird als Paar verwendet. Der Inhalt wird zwischen dem öffnenden <table>- und dem schließenden </table>-Tag geschrieben.

Beispiel des HTML-<table>-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Probier es selbst »

Ergebnis

MonthDate
January10.01.2014
February10.01.2014

Im gezeigten Beispiel wird mit dem <table>-Tag eine Tabelle erstellt. Anschließend wird der <tr>-Tag verwendet, um die Tabelle in Zeilen zu unterteilen. Der <th>-Tag wird für die Kopfzellen der Tabelle verwendet, in denen der Titel steht – die Tabellenzeile wird also in Überschriften aufgeteilt. Der <td>-Tag wird für Tabellenzellen verwendet, in denen die eigentlichen Daten stehen.

Zeilengruppierung mit <thead>, <tbody> und <tfoot>

Bei größeren Tabellen können Sie die Zeilen mithilfe der Elemente <thead>, <tbody> und <tfoot> in einen Kopfbereich, einen Rumpfbereich und einen Fußbereich gliedern. Das macht das Markup übersichtlicher, ermöglicht die unabhängige CSS-Formatierung jedes Abschnitts und hilft Browsern dabei, Kopf- und Fußzeile beim Drucken einer langen Tabelle über mehrere Seiten zu wiederholen.

Beispiel zur Gruppierung von Tabellenzeilen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Barrierefreiheit: Kopfzeilen und Beschriftungen

Tabellen können für Screenreader-Nutzer schwer zu verstehen sein, da eine einzelne Zelle (z. B. „$80") ohne den Kontext der zugehörigen Zeile und Spalte keine Bedeutung hat. Einige einfache Praktiken machen Ihre Tabellen für alle verständlich.

Kennzeichnen Sie Kopfzellen mit <th>. Eine <th>-Zelle wird als Überschrift ausgegeben, und Screenreader verwenden sie zur Beschriftung der darunter oder daneben liegenden Datenzellen. Wenn Sie <td> für Überschriften verwenden – oder Kopfzeilen durch fett formatierten <td>-Text imitieren – geht diese Beziehung verloren.

Fügen Sie ein scope-Attribut hinzu. Das scope-Attribut teilt assistiven Technologien mit, ob eine Kopfzeile für ihre Spalte oder ihre Zeile gilt. Verwenden Sie scope="col" für Spaltenüberschriften und scope="row" für Zeilenüberschriften. Dies ist besonders wichtig, wenn eine Tabelle sowohl oben als auch links Kopfzeilen hat.

Beispiel für Kopfzeilen mit dem scope-Attribut:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Monthly savings</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Savings</th>
      </tr>
      <tr>
        <th scope="row">January</th>
        <td>$100</td>
      </tr>
      <tr>
        <th scope="row">February</th>
        <td>$80</td>
      </tr>
    </table>
  </body>
</html>

Geben Sie der Tabelle eine <caption>. Eine <caption> ist ein Titel für die gesamte Tabelle. Sie ist das erste Kind des <table>-Elements und wird vor dem Tabelleninhalt ausgegeben, sodass Screenreader-Nutzer wissen, worum es in der Tabelle geht, bevor sie diese navigieren. Standardmäßig erscheint sie oben in der Tabelle; Sie können sie mit der CSS-Eigenschaft caption-side verschieben.

Beispiel einer Tabelle mit einer <caption>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
      caption {
        font-weight: bold;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Delivery schedule</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.02.2014</td>
      </tr>
    </table>
  </body>
</html>

Zellen über mehrere Zeilen und Spalten erstrecken

Es ist möglich, eine Zelle über mehrere Zeilen oder Spalten auszudehnen. Normalerweise kann eine Zelle nicht in den Bereich einer anderen Zelle darüber, darunter oder daneben reichen – aber die Attribute colspan und rowspan ermöglichen es einer Zelle, den Bereich mehrerer Zellen einzunehmen.

Wenn eine einzelne Überschrift über zwei oder mehr Spalten reichen soll, verwenden Sie das Attribut colspan an der Zelle mit der Anzahl der Spalten, die sie abdecken soll.

Beispiel des HTML-<table>-Tags mit dem colspan-Attribut:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Probier es selbst »

Ergebnis

Month and Date
January10.01.2014
February10.01.2014

Hier überspannt die einzelne <th colspan="2">-Überschrift sowohl die Spalte „Month" als auch die Spalte „Date".

Dasselbe lässt sich mit Zeilen erreichen, indem das Attribut rowspan verwendet wird. Eine Zelle mit rowspan="2" erstreckt sich nach unten in die darunter liegende Zeile, sodass die nächste Zeile eine Zelle weniger benötigt. Dies ist nützlich, wenn ein Wert für mehrere aufeinanderfolgende Zeilen gilt.

Beispiel des HTML-<table>-Tags mit dem rowspan-Attribut:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td rowspan="2">10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
    </table>
  </body>
</html>
Probier es selbst »

Ergebnis

MonthDate
January10.01.2014
February(teilt die Zelle oben)

In diesem Beispiel verwendet die Zelle 10.01.2014 den Wert rowspan="2", sodass sie sowohl die Zeile von Januar als auch die von Februar überspannt; die Zeile von Februar benötigt daher nur die Monatszelle.

Verwandte Tags

  • <table> — der Tabellen-Container
  • <tr> — eine Tabellenzeile
  • <th> — eine Kopfzelle
  • <td> — eine Datenzelle
  • <caption> — der Tabellentitel
  • <colgroup> — gruppiert Spalten zur Formatierung

Übungen

Übung
Welches Attribut an einer Kopfzelle teilt Screenreadern mit, dass die Überschrift die zugehörige Spalte beschriftet?
Welches Attribut an einer Kopfzelle teilt Screenreadern mit, dass die Überschrift die zugehörige Spalte beschriftet?
Übung
Wo muss das caption-Element innerhalb einer Tabelle platziert werden?
Wo muss das caption-Element innerhalb einer Tabelle platziert werden?
Was this page helpful?