W3docs
de
Anmelden

CSS Tabellen

Tabellen mit CSS gestalten: Farbe, Rahmen zusammenführen, Breite, Höhe, Textausrichtung und Innenabstand. Mit Beispielen erklärt.

Standardmäßig sind HTML-Tabellen schlicht gestaltet: dünne Doppelrahmen, beengte Zellen und keine optische Trennung zwischen den Zeilen. Mit CSS lassen sie sich in übersichtliche, gut lesbare Datendarstellungen verwandeln. Dieses Kapitel behandelt die wichtigsten Eigenschaften für Tabellen — Rahmen, Abstände, Ausrichtung und Zeilenstyling — und schließt mit Mustern, die immer wieder gebraucht werden: Trennlinien, Hover-Hervorhebung, Zebra-Streifen und horizontales Scrollen auf kleinen Bildschirmen.

Jedes Beispiel unten ist eine vollständige, lauffähige Seite, sodass du es öffnen, einen Wert anpassen und die Wirkung sofort sehen kannst.

Eigenschaften zur Tabellengestaltung

Hier sind die CSS-Eigenschaften zur Gestaltung einer Tabelle. Die Eigenschaften background-color und color legen die Hintergrund- bzw. Textfarbe fest. Die Eigenschaft border-collapse führt Tabellenrahmen zusammen. Die Eigenschaft text-align legt die horizontale Textausrichtung fest. Zusätzlich können height, width und padding für Layout-Anpassungen verwendet werden.

Beispiel zur Tabellengestaltung:

Beispiel zur Gestaltung von HTML-Tabellen

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Ergebnis

Tabellenbeispiel

Erläutern wir den obigen Code.

Wie zu sehen ist, besteht unsere Tabelle aus zwei Hauptbereichen: dem Abschnitt <thead> für die Überschriften und dem Abschnitt <tbody> für die Datenzeilen. Die Tabelle verwendet schwarze Rahmen, die über die Eigenschaft border gesetzt werden. Du kannst jede beliebige Farbe und jeden Rahmenstil verwenden.

Tabellenfarbe

Die Kopfzeile (<thead>) ist blau mit weißem Text. Die blaue Füllung stammt von der Eigenschaft background-color, und der weiße Text von der Eigenschaft color — beide werden auf den Selektor thead angewendet, sodass alle Überschriftszellen darin sie erben. Die Körperzellen verwenden standardmäßig schwarzen Text auf weißem (oder zebra-gestreiftem) Hintergrund.

Rahmen zusammenführen

Standardmäßig zeichnet eine Tabelle zwei Rahmen zwischen benachbarten Zellen — einen für jede Zelle — was eine sichtbare Lücke und eine doppelte Linie erzeugt. Die Eigenschaft border-collapse steuert dieses Verhalten:

  • border-collapse: separate (Standard) lässt die Rahmen jeder Zelle eigenständig.
  • border-collapse: collapse führt benachbarte Rahmen zu einer einzigen Linie zusammen und ergibt das saubere, rasterartige Aussehen, das in allen Beispielen auf dieser Seite verwendet wird.

Für Datentabellen ist collapse fast immer die bessere Wahl.

Tabellenbreite und -höhe

Verwende width am Selektor table, um den horizontalen Platzbedarf der Tabelle zu steuern — width: 100% lässt sie den Container ausfüllen, was die häufigste Wahl ist. Verwende height an th (oder td), um den Zeilen mehr Luft zu geben. Beide akzeptieren Pixel (50px) für eine feste Größe oder Prozentwerte (100%) für eine relative Größe zum Elternelement. Zu beachten ist, dass ein prozentualer height-Wert nur funktioniert, wenn das Elternelement eine bekannte Höhe hat — daher sind feste Werte für Zeilen zuverlässiger.

Textausrichtung in Tabellen

Die Eigenschaft text-align legt die horizontale Ausrichtung des Zellinhalts fest. Browser richten <th>-Text standardmäßig zentriert und <td>-Text linksbündig aus, daher wird text-align nur gesetzt, wenn man diese Standardwerte überschreiben möchte — zum Beispiel text-align: center für th, um Überschriften zentriert zu halten, oder text-align: right, um numerische Spalten an ihren Ziffern auszurichten. Der nächste Abschnitt zeigt ein vollständiges Beispiel.

Tabelleninnenabstand

Um den Abstand zwischen Rahmen und Inhalt in einer Tabelle zu steuern, verwende die padding-Eigenschaft bei <td>- und <th>-Elementen:

Innenabstand bei HTML-Tabellen

td, th {
  padding: 15px;
}

Horizontale Ausrichtung mit der text-align-Eigenschaft

Mit der CSS-Eigenschaft text-align lässt sich die horizontale Ausrichtung des Inhalts in <th>- oder <td>-Elementen festlegen.

Standardmäßig ist der Inhalt von <td>-Elementen linksbündig und der Inhalt von <th>-Elementen zentriert ausgerichtet. Im folgenden Beispiel wird der Inhalt von <th>- und <td>-Elementen rechtsbündig ausgerichtet:

Beispiel zur rechtsbündigen Ausrichtung von <th>- und <td>-Elementen:

Beispiel zur rechtsbündigen Ausrichtung von <th>- und <td>-Elementen

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
       text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Whatson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Vertikale Ausrichtung mit der vertical-align-Eigenschaft

Mit der CSS-Eigenschaft vertical-align lässt sich die vertikale Ausrichtung des Inhalts in <th>- oder <td>-Elementen festlegen.

Standardmäßig ist der Inhalt in <th>- und <td>-Elementen vertikal mittig ausgerichtet.

Im folgenden Beispiel wird der Inhalt von <td>-Elementen am unteren Rand ausgerichtet:

Beispiel zur vertikalen Ausrichtung des Inhalts von <td>-Elementen am unteren Rand:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td {
        height: 50px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$300</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Horizontale Trennlinien

Durch Hinzufügen der CSS-Eigenschaft border-bottom zu <td>- und <th>-Elementen lassen sich horizontale Trennlinien erzeugen.

Beispiel zur Erstellung horizontaler Trennlinien:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal dividers example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Tabellen mit Hover-Effekt

Durch Verwendung des CSS-Selektors :hover am <tr>-Element lässt sich eine Tabelle mit Hover-Effekt erstellen.

Beispiel zur Erstellung einer Tabelle mit Hover-Effekt:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr {
        background-color: #f5f5f5;
      }
      th,
      td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
      tr:hover {
        background-color: #cdcdcd;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable table example</h2>
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Zebra-gestreifte Tabelle

Mit dem Selektor nth-child() und der CSS-Eigenschaft background-color für ungerade (oder gerade) Tabellenzeilen lässt sich eine zebra-gestreifte Tabelle erstellen.

Beispiel zur Erstellung einer zebra-gestreiften Tabelle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Striped table example</h2>
    <table>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Responsive Tabellen

Eine breite Tabelle kann auf schmalen Bildschirmen überlaufen und das Seitenlayout zerstören. Um eine Tabelle responsiv zu gestalten, packe sie in ein Container-Element (hier ein <div>) und wende overflow-x: auto auf diesen Container an. Wenn die Tabelle breiter als der viewport ist, zeigt der Container eine horizontale Scrollleiste, anstatt die Seite zu dehnen — die Zeilen bleiben intakt und der Nutzer scrollt einfach seitwärts.

Beispiel zur Erstellung einer responsiven Tabelle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 8px 5px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Responsive table example</h2>
    <div>
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sherlock</td>
            <td>Holmes</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
          </tr>
          <tr>
            <td>John</td>
            <td>Watson</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Watson</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
Probier es selbst »

Verwandte Themen

Übungen

Übung
Welche CSS-Eigenschaften können auf Tabellen angewendet werden?
Welche CSS-Eigenschaften können auf Tabellen angewendet werden?
Was this page helpful?