Tabellen mit CSS gestalten

Tabellen sind ein gutes Werkzeug um bestimmte Inhalte tabellarisch zu präsentieren. Leider sehen Tabellen von Natur etwas eintönig aus. Zum Glück lassen sich auch Tabellen sehr einfach mit CSS gestalten.

HTML-Element für Tabellen

Wer im Umgang mit Tabellen noch etwas unsicher ist, folgt ersteinmal eine kurze tabellarische Übersicht mit den hier vorgestellten Elementen zum Erstellen einer Tabelle.

(X)HTML- ElementBedeutungBeschreibung
tableLeitet eine Tabelle ein und schließt sie wiederKennzeichnet die gesamte Tabelle
CaptionTabellenbeschriftungHiermit lässt sich eine Tabelle beschriften
theadTabellenkopfKennzeichnet den oberen Tabellenbereich
tbodyTabellenkörperKennzeichnet den Tabelleninhalt
tfootTabellenfußKennzeichnet den unteren Tabellenbereich
Mit thead, tbody und tfoot lassen sich Tabellen in einzelne Bereiche gliedern. Diese Elemente sind optional, aber wenn sie benutzt werden, dürfen sie nur einmal in einer Tabelle vorkommen. Hierbei ist diese Reihenfolge zu beachten.

thead → tfoot → tbody

trTabellenzeileLeitet eine neue Zeile ein
thSpalten und ZeilenkopfÜberschriften für Zellen einer Tabelle.
tdTabelleninhaltKennzeichnet die Tabellenzellen

Aber nun zu unserer Tabelle.

1. HTML Tabelle erstellen

Wie immer müssen wir uns um das HTML-Markup kümmern. So könnte eure Tabelle aussehen. Die Klasse gerade dient dazu die geraden Zeilen der Tabelle mit Hilfe von CSS andersfarbig darzustellen.


<table border="1">
 <caption>Urlaub an der Algarve</caption>
  <thead>
   <tr>
    <th>Ort</th>
    <th>Hotel</th>
    <th>Preis in Euro</th>
   </tr>	 
  </thead>

 <tfoot>
  <tr>
   <th colspan="5">Alle Preise sind Fantasiepreise</th>
  </tr>
 </tfoot>	   
  
 <tbody>
  <tr>
   <td>Olhos de Água</td>
   <td>RIU Guarana</td>
   <th>ab 340 €</th>
  </tr>
   <tr class="gerade">
   <td>Albufeira</td>
   <td>Alisios</td>
   <th>ab 374 €</th>
  </tr>
  <tr>
   <td>Portimao</td>
   <td>Tivoli Marina</td>
   <th>ab 279 €</th>
  </tr>
  <tr class="gerade">
   <td>Praia da Falesia</td>
   <td>Porto Bay Falésia</td>
   <th>ab 154 €</th>
  </tr>
  <tr>
   <td>Praia da Luz</td>
   <td>Luzmar Villas</td>
   <th>ab 399 €</th>
   </tr>
  </tbody>
</table>
 

So sieht die Tabelle ohne Style-Angaben aus.

Urlaub an der Algarve
OrtHotelPreis in Euro
Alle Preise sind Fantasiepreise
Olhos de ÁguaRIU Guaranaab 340 €
AlbufeiraAlisiosab 374 €
PortimaoTivoli Marinaab 279 €
Praia da FalesiaPorto Bay Falésiaab 154 €
Praia da LuzLuzmar Villasab 399 €

Mit CSS gestaltete Tabelle

Mit wenigen CSS-Regeln könnt ihr nun die Tabellen nach euren Vorstellungen gestalten. In der hier vorgestellten Beispiel-Tabelle stehen die Farben für Sonne und Meer. Somit ist ein farblicher Bezug zum Inhalt der Tabelle hergestellt.

Urlaub an der Algarve
OrtHotelPreis in Euro
Alle Preise sind Fantasiepreise
Olhos de ÁguaRIU Guaranaab 340 €
AlbufeiraAlisiosab 374 €
PortimaoTivoli Marinaab 279 €
Praia da FalesiaPorto Bay Falésiaab 154 €
Praia da LuzLuzmar Villasab 399 €

Nun folgen die Style-Angaben zur Beispiel-Tabelle.


table {
 border-collapse:collapse;
 border:1px solid #999;
 margin:0 auto;
}

thead , tfoot {
 background:#ffa;
}
 
tbody {
 background:#aff;
}

tbody th {
 text-align:right;
}

th , td {
  padding:10px ;
  text-align:left;
} 


tfoot th {
 font-size:75%;
 font-weight:normal;
}

caption {
 margin-bottom:10px;
 font-weight:bold;
 color:#09c;
}  

tr.gerade {
 background:#fff;
} 

Kurze Erläuterung

Die Angabe von border-collapse:collapse; im Anweisungsblock für table bewirkt, dass die Rahmen zusammenfallen. und mit caption { margin-bottom:10px; } wird für den nötigen Abstand zur Tabelle gesorgt.

Da die Zellen der Spalte Preis als Zellenüberschrift th notiert wurden, konnte hier auf einer zusätzlichen Klasse verzichtet werden, um den Text rechtsbündig auszurichten.

Der Rest ist selbsterklärend und sollte euch keine Schwierigkeiten bereiten. Experimentiert einfach mal ein bisschen herum. Dazu wünsche ich euch viel Spaß.

erstellt am 23.04.2011

nach oben