CSS/Tutorials/Tabellen mit CSS gestalten

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Beim Layout für Tabellen steht eine Sache im Vordergrund - nicht wie gut die Tabelle aussieht, sondern wie schnell und einfach der Benutzer Daten in den richtigen Spalten und Zeilen erfassen kann.

In diesem Artikel soll Ihnen gezeigt werden, wie Sie Tabellen mit CSS3 ansprechender und zugleich besser lesbar machen können.

Das HTML[Bearbeiten]

Für unser Beispiel verwenden wir eine Tabelle, in der die Marktanteile der einzelnen Browser in Deutschland dargestellt sind.

In die Tabelle wurde ein tbody-, thead und tfoot-Element eingefügt, da die Browser es sowieso erzeugen. Reihen werden mit tr eingeleitet.

Der Tabellenkopf besteht aus th-, die einzelnen Zellen mit td-Elementen.

Zellenübergreifende Spaltengruppen[Bearbeiten]

Da der Internet Explorer im Unterschied zu den anderen Browsern keine automatischen Updates erhält, ist es interessant zu wissen, auf welche Versionen sich der Marktanteil verteilt:

Beispiel ansehen …
<thead>
  <tr>
    <td rowspan="2"></td>
    <th scope="col" rowspan="2">Chrome</th>
    <th scope="col" rowspan="2">Firefox</th>
    <th scope="colgroup" colspan="3">Internet Explorer</th>
    <th scope="col" rowspan="2">Egde</th>
    <th scope="col" rowspan="2">Opera</th>
    <th scope="col" rowspan="2">Safari</th>
  </tr>
  <tr>
    <th scope="col">IE 8</th>
    <th scope="col">IE 9</th>            
    <th scope="col">IE 10-11</th>
  </tr>
</thead>
In der oberen Reihe erhalten alle Tabellenzellen mit rowspan="2" die doppelte Höhe. Die Zelle mit dem Inhalt Internet Explorer erstreckt sich mit colspan="3" über drei Zellen.
In der zweiten Reihe gibt es nur drei Zellen, die den Raum unter der dreifach breiten, aber nur einfach hohen Zelle einnehmen.

Tabellenüberschrift[Bearbeiten]

Sie können einer Tabelle mit dem caption-Element eine kurze Erklärung oder Überschrift zuordnen. Die Deklaration muss unmittelbar nach dem einleitenden table-Tag erfolgen, kann durch CSS aber auch unterhalb der Tabelle positioniert werden.

Beispiel: Positionierung einer Tabellen-Unterschrift ansehen …
table {
  caption-side: bottom;
}
<table>
  <caption>Verzeichnis der Teilnehmer</caption>
  <thead>
    <tr>
  ...
In diesem Beispiel erhält die Tabelle eine caption, diese wird mit caption-side an den unteren Rand positioniert.

Jede Spalte hat eine Kopfzelle (th) im Tabellenkopf (thead), die mit scope="col" der Spalte zugeordnet wird.

Analog dazu dient die linke Spalte mit scope="row" als Tabellenkopf für die einzelnen Reihen.

Das CSS[Bearbeiten]

Grundeinstellungen[Bearbeiten]

Beispiel ansehen …
table, th,td {
  border: 1px solid black;
  border-collapse: separate;
}
Die browsereigenen Einstellungen stellen Tabellen ohne Linien dar. Hier wurde nur zur Deutlichmachung ein Rahmen von 1px festgelegt.

Mit der Eigenschaft border-collapse können Sie festlegen, ob Rahmen benachbarter Tabellenelemente getrennt (border-collapse: separate;) oder zusammenfallend (border-collapse: collapse;) dargestellt werden.

Schrift in Kopf- und Datenzellen wird in der Standardschriftgröße - Schrift in Kopfzellen wird fett dargestellt.


Empfehlung:
  • Verwenden Sie Linien in Tabellen nur sparsam!
    Verwenden Sie entweder horizontale oder vertikale Linien.
  • Gliedern Sie evtl. durch die Verwendung von Hintergrundfarben.
  • Verkleinern sie die Schriftgröße, bzw. erhöhen Sie die Werte für Abstände und Ränder!

Gestaltung von Kopf und Datenzellen[Bearbeiten]

In den browsereigenen Standardeinstellungen sieht man nur einen gleichförmigen Zahlensalat. Mit CSS können Sie Kopf- und Datenzellen so gestalten, dass die Zahlen besser lesbar sind.


Beispiel ansehen …
table {
  border-collapse: separate;
  border-spacing: 0.2em;
}
  
th,td {
  padding: 0.2em 0.5em;
  border-radius: 0.1em;  
}  

thead th {
  background-color: #ffebe6;
  color: #c32e04;
}

td {
  font-style:italic;
  text-align: right;
  box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,0.5);
}   

td:empty{
  box-shadow: none;
}
Mit border-spacing wird der Abstand der Rahmen der Tabellenelemente vergrößert. Dies funktioniert natürlich nur, wenn für die Tabelle border-collapse: separate; festgelegt ist.

Die Tabellenköpfe erhalten eine Hintergrund - und Textfarbe.
Die Schrift in den Datenzellen soll kursiv und rechtsbündig sein, damit große Werte gleich herausstechen.

Damit die leere Datenzelle oben links keinen Schatten erhält, werden leere Zellen mit der Pseudoklasse empty angesprochen und der Schatten wieder entfernt.
Empfehlung: Wählen Sie Farben und Kontraste immer so, dass der Text noch gut lesbar ist (siehe auch: Barrierefreiheit: Farben und Kontraste).

Zebrastreifen[Bearbeiten]

Gerade bei größeren Tabellen ist es übersichtlicher jede zweite Zeile einzufärben.

Beispiel ansehen …
tbody tr:nth-child(even) { 
  background-color: #e4ebf2; 
  color: #000; 
}
Mit der strukturellen Pseudoklasse nth-child erhält jede zweite (even = gerade) Zeile eine andere Hintergrundfarbe.

Zeilenüberschriften[Bearbeiten]

Erinnern Sie sich noch an die Kopfzellen in jeder Zeile?

Beispiel ansehen …
tbody tr:nth-child(even) td { 
  background-color: #e4ebf2; 
  color: #000; 
}

th[scope=row] { 
  color: #c32e04;
  text-align: right; 
}
Mit th[scope=row] werden alle th-Elemente angesprochen, deren Attributwert für das scope-Attribut row beträgt. Um weitere Festlegungen für den Hintergrundfarbe zu vermeiden, wird der Zebralook gegenüber dem obigen Beispiel für die Datenzellen der geraden Zeilen festgelegt.

Überschrift gestalten[Bearbeiten]

Die im caption-Element enthaltene Überschrift wird nun mit einem ribbon gestaltet:


Beispiel ansehen …
table {
  border-collapse: separate;
  border-spacing: 0.2em;
  margin-left:2em;
  box-shadow: 0 0 0.1em #666;
  position: relative;
  z-index:1;
}
  
caption {
  color: white;
  background: hsl(13, 96%, 39%);
  font-size: 1.5em;
  box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%);
  padding: 0.2em 0.2em 0.2em 2em;
  width: 10em;
  margin-left: -.6em;
  position: relative;
}

caption::before {
  content: "";
  position: absolute;
  display: block;
  height: 0;
  width: 0;
  top: 1em;
  left: -0.6em;
  border-style: solid;
  border-width: 0.6em;
  border-color: transparent hsl(13, 96%, 35%) transparent transparent;
  z-index: -1;
}
Die caption erhält eine andere Hintergrund- und Textfarbe. Gegenüber der für eine Unterschrift passenden Normalschriftgröße wird hier eine anderthalbfache Schriftgröße gewählt.

Das Band erhält durch ein links vorgelagertes Pseudoelement ein räumliches Aussehen.

Auch die Tabelle erhält nun einen Schatten.
Beachten Sie: Um das Pseudoelement mit z-index: -1; hinter das Band ordnen zu können, müssen Sie der Tabelle ebenfalls einen Wert für position und z-index zuordnen.

Markierung von Zeilen bei :hover[Bearbeiten]

Wenn Benutzer mit der Maus über die Tabelle fahren, wird die jeweilige Datenzelle und dazugehörende Tabellenzeile farbig markiert:

Beispiel ansehen …
tbody tr:hover, tfoot tr:hover { 
  background-color:#fffbf0;
}

tbody td:hover, tfoot td:hover { 
  background-color: #fce4a2; 
}
Es werden alle Datenzellen im Tabellenkörper und Tabellenfuß bei :hover mit einer anderen background-color versehen.

Beispiel 2: grau in grau[Bearbeiten]

Im Folgenden sollen nun in einem zweiten Beispiel die Bundesländer der Bundesrepublik vorgestellt werden.

Beispiel ansehen …
table, th, td { 
  border-collapse: collapse;
  padding:0.3em 0.5em; 
}

table {
 margin-left: 1em;}

th, caption { 
  background-color: #666; 
  color: #fff; 
  border: 1px solid #666;
}

td {
 background-image: linear-gradient(#f9f9f9, #e3e3e3);
 border-left: 1px solid #666;
 border-right: 1px solid #666;
}

tfoot {
  border-bottom: 1px solid #666;
}

caption {
  font-size: 1.5em;
  border-radius: 0.5em 0.5em 0 0;
  padding: 0.5em 0 0 0
}

/* 3. und 4. Spalte rechtsbündig */
td:nth-of-type(3),td:nth-of-type(4) {
  text-align: right;
}
Diese Tabelle verzichtet auf viele Farben. Überschrift und Tabellenkopf werden hell auf dunkel dargestellt.
Die Tabelle erhält nur vertikale Linien; der Datenzellen-Hintergrund wird als Verlauf ausgeführt und sorgt für eine horizontale Gliederung.

Siehe auch[Bearbeiten]



Weblinks[Bearbeiten]