CSS Tabellen

Juli 21, 2008 | Kommentieren

Die Zeiten wo man noch ein Layout mit Tabellen erstellt hat sind vorbei, was nicht heissen soll dass diese nicht mehr benutzt werden. Sie erfüllen andere, wichtige Zwecke und werden nach wie vor gebraucht. Deshalb beschäftigt sich dieser Artikel mit einer einfache Tabelle, welche mit hilfe von CSS gestylt wird. Das Ergbinss sieht dann so aus:

Konsole: XBOX 360 Playstation 3 WII
CPU: 3 x Power PC Kerne Cell Prozessor IBM Power PC
Grafik: ATI GPU Nvidia GPU ATI GPU
Speicher: 512 MB GDDR3 256 MB XDR 24 MB + 64 MB extern
Preis: 249,- Euro 399,- Euro 249,- Euro


Tabellen werden erst seit CSS2 gesondert behandelt und haben eigene CSS-Eigenschaften. Dennoch gibt es auch eine Menge Eigenschaften von CSS1, die sich auf Tabellen, Spalten und Zeilen anwenden lassen. Im meinem HTML werde ich die Tabelle in zwei Segmente teilen: einmal den Tabellenkopf (thead) und den Tabellenbody (tbody). Es gibt noch den Tabellenfooter (tfoot), allerdings lasse ich ihn aus, da er meiner Meinung nach in dieser Struktur keinen Sinn macht. Und so sieht dann das HTML aus:

<table id="simple-table" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <td>Konsole:</td>
      <td>XBOX 360</td>
      <td>Playstation 3</td>
      <td>WII</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>CPU:</strong></td>
      <td>3 x Power PC Kerne</td>
      <td>Cell Prozessor</td>
      <td>IBM Power PC</td>
    </tr>
    <tr class="grey">
      <td><strong>Grafik:</strong></td>
      <td>ATI GPU</td>
      <td>Nvidia GPU</td>
      <td>ATI GPU</td>
    </tr>
    <tr>
      <td><strong>Speicher:</strong></td>
      <td>512 MB GDDR3</td>
      <td>256 MB XDR</td>
      <td>24 MB + 64 MB extern</td>
    </tr>
    <tr class="grey">
      <td><strong>Preis:</strong></td>
      <td>249,- Euro</td>
      <td>399,- Euro</td>
      <td>249,- Euro</td>
    </tr>
  </tbody>
</table>

Im CSS kann ich dann direkt die “thead” ansprechen und so eine andere Hintergrundfarbe zuweisen.
Die CSS-Klasse “grey” benutze ich um jede zweite Zeile mit dem leichtem Grau zu hinterlegen, um es so besser lesbar zu machen:

#simple-table {
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
}
 
#simple-table td {
  padding: 5px;
  border-bottom: 1px solid #C0C0C0;
}
 
#simple-table thead td {
  background-color: #333;
  color: #fff;  
  font-weight: bold;
}
 
#simple-table tbody tr.grey td {
  background-color: #EEE;
}

Das war’s auch :)

  • Delicious
  • Facebook
  • FriendFeed
  • Mister-Wong
  • Netvibes Share
  • Twitter
  • YiGG
  • Share/Bookmark