CSS Grundlagen: Responsive HTML Tabellen gestalten – So einfach erstellst du sie mit CSS für alle Geräte

English

HTML-Tabellen mit CSS gestalten


Wie man eine HTML-Tabelle erstellt, wird im Beitrag HTML Tabellen erstellen beschrieben. Auf dieser Seite werden die wichtigsten Grundlagen beschrieben, die für eine ansprechende Gestaltung von HTML-Tabellen notwendig sind. Auf dieser Seite wird Schritt für Schritt gezeigt, wie man HTML-Tabellen stylen kann, damit sie attraktiv gestaltet und gleichzeitig leichter lesbar sind.

Ein einfaches Beispiel für eine HTML-Tabelle mit den Standard-Einstellungen

Beispiel HTML 
<h2>HTML Tabelle ohne Anpassung durch CSS</h2>

<table>
<tr>
  <th>Spalte 1</th>
  <th>Spalte 2</th>
  <th>Spalte 3</th>
</tr><tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
</tr><tr>
  <td>Zelle 4</td>
  <td>Zelle 5</td>
  <td>Zelle 6</td>
</tr><tr>
  <td>Zelle 7</td>
  <td>Zelle 8</td>
  <td>Zelle 9</td>
</tr><tr>
  <td>Zelle 10</td>
  <td>Zelle 11</td>
  <td>Zelle 12</td>
</tr>
</table>
Ausgabe des HTML-Codes

HTML-Tabelle ohne Anpassung durch CSS

Spalte 1 Spalte 2 Spalte 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Zelle 10 Zelle 11 Zelle 12
Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Rahmen für HTML Tabellen festlegen

Rahmen sind ein wesentliches Element bei der Gestaltung von Tabellen. Sie dienen dazu, die Lesbarkeit der Daten zu verbessern, indem sie eine visuelle Trennung zwischen Zellen, Zeilen und Spalten erzeugen. Dieser Abschnitt beschreibt, wie Rahmen für Tabellen erstellt und angepasst werden können.

Die Eigenschaft border ist optimal, um einen Rahmen für die gesamte Tabelle und die Tabellenzeilen zu definieren.

Beispiel CSS 
table {
  border: 1px solid #000000;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #000000;
}

Mit border-collapse: collapse wird festgelegt, dass die Rahmen benachbarter Tabellenzellen zusammenfallen.

Abstände in HTML Tabellen anpassen

Tabellenzellen werden standardmäßig nur so groß, dass sie den Inhalt der Zellen darstellen können. Dies sieht nicht besonders gut aus und hat zur Folge, dass die Tabelle nur schwer lesbar ist. Um mehr Platz zwischen dem Inhalt der Tabellenzellen und den Rändern der Zellen zu erhalten, kann man die CSS-Eigenschaft Padding verwenden.

Beispiel CSS 
td, th {
  padding: 0.5em 1em; }

Gestaltung von Kopf und Daten-Zellen

In einer Tabelle werden mit TH (Englisch für Table Header) die Kopfzellen ausgezeichnet. Kopfzellen werden sowohl für Spaltenköpfe (oben) als auch für Zeilenköpfe (links) verwendet. Standardmäßig werden Kopfzellen fett gedruckt und horizontal zentriert.

Die auf diese Weise formatierten Tabellenzellen werden als Überschriften für die zugehörigen Spalten bzw. Zeilen verwendet. Die Darstellung der Table Header lässt sich mit CSS individuell an die eigenen Bedürfnisse anpassen.

Beispiel CSS 
table {
  border: 1px solid #000000;
  border-collapse: collapse;
}

th {
  padding: 0.5em 1em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background: #cccccc;
  color: #000000;
  border: 1px solid #000000;
}

td {
  padding: 0.5em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  color: #000000;
}
Beispiel HTML 
<h2>HTML Tabelle mit Spaltenüberschriften</h2>

<table>
<thead>
<tr>
  <th>Spalte 1</th>
  <th>Spalte 2</th>
  <th>Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
</tr><tr>
  <td>Zelle 4</td>
  <td>Zelle 5</td>
  <td>Zelle 6</td>
</tr><tr>
  <td>Zelle 7</td>
  <td>Zelle 8</td>
  <td>Zelle 9</td>
</tr><tr>
  <td>Zelle 10</td>
  <td>Zelle 11</td>
  <td>Zelle 12</td>
</tr>
</tbody>
</table>
Ausgabe des HTML-Codes

HTML-Tabelle mit Spaltenüberschriften

Spalte 1 Spalte 2 Spalte 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Zelle 10 Zelle 11 Zelle 12
Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Tabellen-Gestaltung mit Zebrastreifen

Eine Tabelle mit Zebrastreifen verwendet abwechselnde Hintergrundfarben für die Zeilen, z. B. abwechselnd einen hellen und dunklen Hintergrund. Dadurch ist die Tabelle viel leichter zu lesen, da die Tabellenzeilen klar voneinander zu unterscheiden sind. Dies ist besonders nützlich für große Tabellen mit vielen Spalten, da die Benutzer so den Überblick behalten, ohne dass sie die Tabellenzeile verwechseln.

Mit der Pseudoklasse nth-child kann man die Hintergrundfarben für gerade (Englisch: even) und ungerade (Englisch: odd) Tabellenzeilen festlegen.

Beispiel CSS 
table {
  border: 1px solid #000000;
  border-collapse: collapse;
}

th {
  padding: 0.5em 1em 0.5em 0.4em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background: #cccccc;
  color: #000000;
  border: 1px solid #000000;
}

tbody tr:nth-child(even) {
  background: #90ee90;
}

tbody tr:nth-child(odd) {
  background: #f5f5dc;
}

td {
  padding: 0.5em;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  color: #000000;
}
Beispiel HTML 
<h2>HTML Tabelle mit Zebrastreifen</h2>

<table>
<thead>
<tr>
  <th>Spalte 1</th>
  <th>Spalte 2</th>
  <th>Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
</tr><tr>
  <td>Zelle 4</td>
  <td>Zelle 5</td>
  <td>Zelle 6</td>
</tr><tr>
  <td>Zelle 7</td>
  <td>Zelle 8</td>
  <td>Zelle 9</td>
</tr><tr>
  <td>Zelle 10</td>
  <td>Zelle 11</td>
  <td>Zelle 12</td>
</tr>
</tbody>
</table>
Ausgabe des HTML-Codes

HTML Tabelle mit Zebrastreifen

Spalte 1 Spalte 2 Spalte 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Zelle 10 Zelle 11 Zelle 12
Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Wie kann man eine responsive Tabelle erstellen?

Tabellen werden in der Regel verwendet, um eine große Menge von Daten übersichtlich darzustellen. Die tabellarische Darstellung von Daten erfordert aber relativ viel Platz. Spätestens seit dem Jahr 2017 muss jede Website für mobile Geräte optimiert werden, denn Google bestraft Websites, die nicht für mobile Geräte geeignet sind.

Beim Responsive Web-Design werden identische Inhalte für unterschiedliche Display-Größen optisch optimiert dargestellt. Eine große Tabelle mit vielen Spalten passt aber nicht auf ein Smartphone-Display. Es sei denn, die Schrift wird unlesbar klein. Aus diesem Grund verliert eine Tabelle auf einem Smartphone fast immer entweder an Übersichtlichkeit oder ist nicht lesbar.

Unser Ziel ist es, dass die Tabelle auf jedem Gerät so gut wie möglich dargestellt wird und einfach zu lesen ist.

Responsive HTML-Tabelle Variante I:

Beispiel CSS 
table.rspCols {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 1px solid #000000;
  table-layout: fixed;
}

table.rspCols tr {
  background: #ffd700;
  border: 1px solid #000000;
}

table.rspCols th {
  padding: 0 1.5em 1em 0.5em;
  height: 3em;
  font-size: 1.2em;
  text-align: left;
  vertical-align: top;
  background: #d0d0d0;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td {
  padding: 0.5em;
  font-size: 1em;
  color: #000000;
  vertical-align: middle;
  border: 1px solid #000000;
}

table.rspCols td:last-child {
  text-align: right;
}


@media screen and (max-width: 720px) {
  table.rspCols,       table.rspCols thead,
  table.rspCols tbody, table.rspCols tr,
  table.rspCols th,    table.rspCols td {
    display: block;
  }

  table.rspCols thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.rspCols {
    background: transparent;
    border: initial;
  }

  table.rspCols tr {
    margin: 0 0 2em 0;
  }

  table.rspCols tr:last-child {
    margin-bottom: 0;
  }

  table.rspCols td {
    padding: 0.25em 0.5em;
    text-align: right;
    background: #ffd700;
    border: none;
  }

  table.rspCols td::before {
    font-weight: bold;
    float: left;
    content: attr(data-label);
  }

  table.rspCols td:last-child {
    padding-bottom: 0;
  }
}

Für die Tabelle wird ein Media Breakpoint definiert. Für eine Fensterbreite kleiner oder gleich 600px wird das Tabellenlayout angepasst, so dass eine responsive Tabelle dargestellt wird. Für jede Zeile der Tabelle werden die Spalten untereinander platziert.

Beispiel HTML 
<h2>einfache Responsive Tabelle</h2>

<table class="rspCols">
<thead>
<tr>
  <th>Kategorie</th>
  <th>Domain</th>
  <th>Registriert seit</th>
  <th>Preis</th>
</tr>
</thead>
<tbody>
<tr>
  <td data-label="Kategorie">Internet</td>
  <td data-label="Domain">website-erstellen.de</td>
  <td data-label="Registriert seit">01.01.2005</td>
  <td data-label="Preis">1.998,- EUR</td>
</tr><tr>
  <td data-label="Kategorie">Beratung</td>
  <td data-label="Domain">cms-vergleich.com</td>
  <td data-label="Registriert seit">01.05.2007</td>
  <td data-label="Preis">998,- EUR</td>
</tr><tr>
  <td data-label="Kategorie">Web-Grundlagen</td>
  <td data-label="Domain">css-basics.net</td>
  <td data-label="Registriert seit">15.08.2009</td>
  <td data-label="Preis">1.125,- EUR</td>
</tr><tr>
  <td data-label="Kategorie">Portal</td>
  <td data-label="Domain">versicherungsvergleich.de</td>
  <td data-label="Registriert seit">15.09.2018</td>
  <td data-label="Preis">2.499,- EUR</td>
</tr>
</tbody>
</table>
Ausgabe des HTML-Codes

einfache Responsive Tabelle

Kategorie Domain Registriert seit Preis
Internet website-erstellen.de 01.01.2005 1.998,- EUR
Beratung cms-vergleich.com 01.05.2007 998,- EUR
Web-Grundlagen css-basics.net 15.08.2009 1.125,- EUR
Portale versicherungsvergleich.de 15.09.2018 2.499,- EUR
Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Ändere die Größe des Browser-Fensters oder den Zoom-Faktor, um den Effekt zu sehen.

Responsive Tabelle Variante II

Nicht-responsive Tabellen können einem leicht das responsive Web-Layout ruinieren. Dies führt zu einer schlechten Usability. Bei der hier gezeigten Variante werden die Kopfzellen der Tabelle für kleine Displays visuell durch das Pseudo-Element before nachgebildet.

Der HTML-Code für Variante II ist derselbe wie für Variante I.

Beispiel CSS 
table.rspCols {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 1px solid #000000;
  table-layout: fixed;
}

table.rspCols tr {
  border: 1px solid #000000;
}

table.rspCols th {
  padding: 0 0.5em 1em;
  height: 3em;
  font-size: 1.2em;
  text-align: left;
  vertical-align: top;
  background: #dfdfdf;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td {
  padding: 0.5em;
  font-size: 1em;
  vertical-align: middle;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td:last-child {
  text-align: right;
}


@media screen and (max-width: 720px) {
  table.rspCols {
    display: block;
    border: initial;
  }

  table.rspCols thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.rspCols tr {
    margin: 0 0 2em 0;
    width: 100%;
    border-top: none;
    float: left;
  }

  table.rspCols tr:last-child {
    margin-bottom: 0;
  }

  table.rspCols td {
    padding: 0 0.5em 0 0;
    width: 100%;
    text-align: right;
    line-height: 400%;
    background: #eeeeee;
    border: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px;
    border-bottom: none;
    border-left: 1px;
    float: left;
  }

  table.rspCols td:last-child {
    padding-bottom: 0;
  }

  table.rspCols td::before {
    padding: 0 0.5em;
    width: 8em;
    font-weight: bold;
    text-align: left;
    background: #dfdfdf;
    border-right: 1px solid #000000;
    content: attr(data-label);
    float: left;
  }
}
Ausgabe des HTML-Codes

Responsive Tabelle Variante II

Kategorie Domain Registriert seit Preis
Internet website-erstellen.de 01.01.2005 1.998,- EUR
Beratung cms-vergleich.com 01.05.2007 998,- EUR
Web-Grundlagen css-basics.net 15.08.2009 1.125,- EUR
Portale versicherungsvergleich.de 15.09.2018 2.499,- EUR
Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Ändere die Größe des Browser-Fensters oder den Zoom-Faktor, um den Effekt zu sehen.