Tabellen mit farbigen Zeilen und Rändern

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Auch wenn wir in diesem Buch den Einsatz von HTML-Tabellen möglichst vermeiden wollen, sollten wir nicht vergessen, dass sie auch als rein semantisches HTML-Werkzeug eingesetzt werden können. Die Darstellung tabellarischer Daten ist eine Aufgabe, die Sie immer HTML überlassen sollten.

Wir können Tabellen jedoch mit CSS gestalten, sodass sie besser lesbar sind und zu hübschen Seitenelementen werden. Die folgende Abbildung zeigt eine sehr schlichte HTML-Tabelle. Wahrscheinlich würde kaum jemand von uns eine Webseite mit einer so spärlich gestalteten Tabelle veröffentlichen, als Ausgangspunkt für diese Diskussion ist sie aber gut geeignet. (Anmerkung: Eigentlich ist dieses Beispiel ein wenig künstlich. Aus historischen Gründen fügen Webbrowser allen Tabellen vorgabemäßig einen 1 Pixel breiten Rand hinzu. Die folgende Abbildung zeigt aber eine Tabelle, bei der dieser Rand entfernt wurde, entweder mit CSS oder dem veralteten, aber allgemein gebräuchlichen Attribut border, dem der Wert 0 zugewiesen wurde.)

Ein (sehr) einfaches Tabellendesign

Abbildung: Ein (sehr) einfaches Tabellendesign.

Diese Tabelle ist für den Benutzer sehr schlecht lesbar. Zum einen fehlen Ränder, die ihm helfen würden, die Daten auseinander zu halten, zum anderen kann er durch die kleinen Tabellenfelder nur schlecht erkennen, in welcher Spalte und Zeile ein Eintrag steht. Mit CSS werden wir beide Probleme lösen.

Im Folgenden finden Sie den HTML-Code der Tabelle nach dem Einbau einiger einfacher Stilregeln. Dies ist ein Beispiel, bei dem ein externes Stylesheet möglicherweise des Guten zu viel ist, auch wenn es als gute Designpraxis angesehen wird.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Wechselnde Tabellenzeilen mit CSS-Regeln einfaerben</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
  body {
    background-color: #FFFFFF;
    font-family: helvetica, arial, sans-serif;
  }
  .grau {
    background-color: lightgrey;
  }
  .gelb {
    background-color: yellow;
  }
  table {
    border: 1px solid black;
    border-spacing: 0;
  }
  td {
    border: 1px solid black;
    padding: 4px 6px;
  }
  </style>
</head>
<body>
  <table>
    <tr class="grau">
      <td>_Zeile_1_Feld_1_</td>
      <td>_Zeile_1_Feld_2_</td>
      <td>_Zeile_1_Feld_3_</td>
    </tr>
    <tr class="gelb">
      <td>_Zeile_2_Feld_1_</td>
      <td>_Zeile_2_Feld_2_</td>
      <td>_Zeile_2_Feld_3_</td>
    </tr>
    <tr class="grau">
      <td>_Zeile_3_Feld_1_</td>
      <td>_Zeile_3_Feld_2_</td>
      <td>_Zeile_3_Feld_3_</td>
    </tr>
    <tr class="gelb">
      <td>_Zeile_4_Feld_1_</td>
      <td>_Zeile_4_Feld_2_</td>
      <td>_Zeile_4_Feld_3_</td>
    </tr>
    <tr class="grau">
      <td>_Zeile_5_Feld_1_</td>
      <td>_Zeile_5_Feld_2_</td>
      <td>_Zeile_5_Feld_3_</td>
    </tr>
    <tr class="gelb">
      <td>_Zeile_6_Feld_1_</td>
      <td>_Zeile_6_Feld_2_</td>
      <td>_Zeile_6_Feld_3_</td>
    </tr>
    <tr class="grau">
      <td>_Zeile_7_Feld_1_</td>
      <td>_Zeile_7_Feld_2_</td>
      <td>_Zeile_7_Feld_3_</td>
    </tr>
  </table>
</body>
</html>

In dem eingebetteten Stylesheet finden wir die Klassen grau und gelb. Die tr-Zeilen in der Tabelle werden abwechselnd diesen beiden Klassen zugeordnet. Zwei weitere Stilregeln legen für table und td einen schwarzen Rahmen mit der Stärke von je einem Pixel fest und sorgen damit für einen übersichtlichen Außenrand um die Tabelle und für Trennlinien zwischen den einzelnen Tabellenfeldern. Das Ergebnis sehen Sie in der folgenden Abbildung:

Lesbare Tabelle mit eingefärbten Zeilen

Abbildung: Lesbare Tabelle mit eingefärbten Zeilen.

Die Lesbarkeit unserer Tabelle wurde deutlich verbessert. Auch wenn das noch nicht das Ende der Gestaltungsmöglichkeiten ist, haben wir damit doch eine viel ansprechendere Ausgangsbasis, um diese Tabelle weiter zu verschönern.

Mit einigen der seltener benutzten Tabellen-Elemente in HTML, wie etwa den Überschrifts-Elementen th und thead oder auch den Möglichkeiten zum Gruppieren von Spalten (colgroup), hat man weitere Werkzeuge zur Verfügung, um professionelle und hervorragend lesbare Datentabellen zu erzeugen. Unter Die Tabelle werden wir ein vollständiges und komplexes Beispiel dazu erarbeiten.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg