CSS Grundlagen: Tabellen responsive gestalten: CSS-Strategien für ein benutzerfreundliches Design

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

<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>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Rahmen in 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.

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 zusammenfallssen.

Abstände in HTML Tabellen anpassen

Die Tabellenzellen werden standardmäßig nur so groß, dass sie den Inhalt der Zellen darstellen können. Dies sieht nicht besonders schön 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.

td, th {
  padding: 0.5em 1.0em; }

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.

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

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

td {
  padding: 0.5em;
  font-size: 1.0em;
  font-weight: normal;
  text-align: left;
  color: #000000;
}

<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>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Tabellen-Gestaltung mit Zebrastreifen

Eine Tabelle mit Zebrastreifen verwendet abwechselnde Farben für die Zeilen, z. B. abwechselnd einen hellen und dunklen Hintergrund. Dadurch ist die Tabelle 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.

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

th {
  padding: 0.5em 1.0em 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: 1.0em;
  font-weight: normal;
  text-align: left;
  color: #000000;
}

<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>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.