Die Tabelle

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

Der letzte Bereich in diesem Layout ist die Tabelle mit dem Turnierplan, in dem die Begegnungen des Turniers zusammengefasst sind. Wie wir bereits an anderer Stelle diskutiert haben, sollten Tabellen nicht zu Layoutzwecken benutzt werden. Sie sind aber ideal zur Darstellung von tabellarischen Daten, die beispielsweise in Kalkulationsblättern aufgelistet sind. Wir haben auf dieser Seite ebenfalls eine Menge tabellarischer Daten, die wir bereits mit den verschiedenen Tabellen-Tags korrekt als HTML-Tabelle ausgezeichnet haben. Dadurch vereinfacht sich die Gestaltung der einzelnen Regionen der Tabelle.

Lassen Sie sich inspirieren
Der Designer dieses Layouts holte sich seine Anregungen aus der CSS Table Gallery. Das ist eine ausgezeichnete Referenz für alle, die verschiedene Möglichkeiten kennenlernen wollen, wie Tabellendaten präsentiert werden können.

Unsere unbearbeitete Tabelle ist im Moment zwar sehr gut lesbar und auch gut zugänglich, wie die folgende Abbildung zeigt, aber sie sieht nicht besonders schön aus.

Die unformatierte Tabelle

Abbildung: Die unformatierte Tabelle.

Beginnen wir nun damit, die Tabelle zu gestalten. Als Erstes sollten wir dafür sorgen, dass der Tabelleninhalt nicht bis zu dem mit float verschobenen Bild hinaufrutscht, falls die Inhalte über der Tabelle kürzer als jetzt sind. Das schaffen wir mit der Eigenschaft clear, indem wir ihr den Wert right zuweisen.

table.schedule {
  clear: right;
  width: 100%;
  line-height: 1.4em;
  border-collapse: collapse;
  border: 4px solid #adbbca;
  color: #4f6480;
  background: #f0f0f0;
}

Wie Sie in der nächsten Abbildung sehen können, haben wir die Breite der Tabelle mit 100% angegeben und die Zeilenhöhe auf 1.4em gesetzt. Außerdem haben wir einen massiven Rahmen um die Tabelle gezogen und ihr eine Hintergrundfarbe gegeben.

Die Tabelle nach der Formatierung des table-Elements

Abbildung: Die Tabelle nach der Formatierung des table-Elements.

Die Eigenschaft border-collapse, die hier auf den Wert collapse gesetzt wurde, stellt sicher, dass keine Zwischenräume zwischen den Tabellenzellen angezeigt werden. Normalerweise haben die Tabellenzellen einen kleinen Abstand zueinander, der vom Attribut cellspacing des table-Elements gesteuert wird.

Nun könnten Sie denken, wir setzen dieses Attribut einfach auf den Wert 0 und das Problem ist auf diese Weise gelöst. Aber selbst dann, wenn wir einen 4 Pixel breiten Rahmen um eine Tabellenzelle ziehen, ist der Rahmen zwischen den Zellen 8 Pixel breit, weil die Rahmen der aneinanderstoßenden Zellen sich summieren. Nur die Rahmen an den Außenkanten sind 4 Pixel breit. Wenn wir aber die Eigenschaft border-collapse auf den Wert collapse setzen, verschwindet dieser Effekt, denn die Rahmen benachbarter Tabellenzellen fallen dadurch zusammen. Was bleibt, ist ein 4 Pixel breiter Rahmen, genau wie wir es beabsichtigten. Die Wirkung dieser Eigenschaft wird in der nachstehenden Abbildung demonstriert:

cellspacing und border-collapse im Vergleich

Abbildung: Das Attribut cellspacing und die CSS-Eigenschaft border-collapse im Vergleich.

Als ich den HTML-Code für den Turnierplan erstellte, machte ich von dem Element caption Gebrauch und gab »Event Schedule« als Tabellenüberschrift an. Dieses Element caption ist am besten geeignet, um unsere Tabelle zu beschreiben. Wir werden es nun so formatieren, dass es der Überschrift in unserem grafischen Entwurf gleicht.

table.schedule caption {
  margin: 0;
  padding: 0;
  color: #032469;
  line-height: 2em;
  text-align: left;
  font-weight: bold;
}

Als wir das Dokument erzeugten, bemerkte ich bereits, dass es angebracht sei, die Tags <thead> und <tbody> beim Aufbau der Tabelle zu benutzen. Jetzt erweisen sich diese Tags als sehr hilfreich, um für die unterschiedlichen Regionen der Tabelle unterschiedliche CSS-Regeln zu definieren. Wenn wir eine Regel für den Selektor table.schedule thead tr definieren, können wir den Hintergrund und die Schrift für die Kopfzeile der Tabelle bestimmen.

table.schedule thead tr {
  color: white;
  background: #5e7796;
}

Wie Sie in der nächsten Abbildung sehen, sieht die Tabelle damit schon viel besser aus. Es bleibt aber noch eine Menge zu tun, bis sie so aussieht wie in dem Entwurf.

Ein blauer Tabellenkopf im thead-Element

Abbildung: Ein blauer Tabellenkopf im thead-Element.

Die nächste Regel bezieht sich auf die <th>-Tags innerhalb des thead-Elements. In der linken Spalte der Tabelle gibt es noch weitere th-Elemente. Sie werden jedoch von dieser Regel, die der obersten Tabellenzeile einen Innenrand sowie einen 4 Pixel breiten oberen Rahmen hinzufügt, nicht betroffen.

table.schedule thead tr th {
  padding: 0.4em 0.6em 0.4em 0.6em;
  border: 4px solid #adbbca;
}

Weiter geht es mit dem tbody-Element, das die Zellen des Tabellenrumpfs umfasst. Wir wollen nicht, dass jede individuelle Zelle auf allen Seiten Rahmen hat, sondern nur die Zeilen sollen oben und unten einen Rahmen haben. Diese definieren wir für die tr-Elemente innerhalb von tbody:

table.schedule tbody tr {
  border: 4px solid #adbbca;
}

Danach können wir die th-Elemente in tbody formatieren:

table.schedule tbody th {
  padding: 0.6em;
  border: 4px solid #adbbca;
}

Damit sollte unsere Seite so aussehen wie in der folgenden Tabelle.

Die Tabellenzeilen sind deutlich hervorgehoben

Abbildung: Die Tabellenzeilen sind deutlich hervorgehoben.

Im Entwurf ist die Tabelle quergestreift, weil die Zeilen abwechslungsweise andere Hintergrundfarben haben. Das sieht nicht nur gut aus, es verbessert auch die Lesbarkeit der Tabelle. Um diesen Streifeneffekt zu erzielen, geben wir jeder zweiten Zeile im HTML-Code der Tabelle das Attribut class="odd" mit. Diese Klasse benutzen wir dann, um die entsprechenden Zeilen unterschiedlich zu gestalten.

<tr>
  <th scope="row"><a href="#">Match 1</a></th>
  ...
  <td>Winner of Match 12</td>
</tr>
<tr class="odd">
  <th scope="row"><a href="#">Match 2</a></th>
  ...
  <td>Winner of Match 11</td>
</tr>
<tr>
  <th scope="row"><a href="#">Match 3</a></th>
  ...
  <td>Winner of Match 10</td>
</tr>
<tr class="odd">
  <th scope="row"><a href="#">Match 4</a></th>
  ...
  <td>Winner of Match 9</td>
</tr>

Zuerst definieren wir eine Hintergrundfarbe für die td-Elemente innerhalb von tbody. Weil ich schon dabei war, dieses Element zu bearbeiten, habe ich auch gleich noch einen linken Innenrand zugefügt, damit der Text ein wenig vom Rahmen abgerückt wird und mit den Überschriften bündig schließt:

table.schedule tbody td {
  background: #e9ecee;
  padding-left: 0.6em;
  border-bottom: 4px solid #ccc;
}

Jetzt erzeugen wir eine Regel für die tr-Elemente der Klasse odd, mit der die Hintergrundfarbe für diese Tabellenzeilen gesetzt wird:

table.schedule tbody tr.odd {
  background: #c4cfdb;
}

Danach können wir uns die td-Elemente zwischen den Tags <tr class="odd"> und </tr> vornehmen und ihnen eine Hintergrundfarbe entsprechend unserem Entwurf zuweisen:

table.schedule tbody tr.odd td {
  background: #f0f0f0;
  color: #4f6480;
}

Wenn die Selektoren in diesen Regeln ein bisschen verwirrend aussehen, denken Sie daran, dass Sie immer von links nach rechts gelesen werden müssen:

  1. Wir haben eine Tabelle der Klasse schedule, die in der CSS-Regel mit table.schedule angegeben wird.
  2. Innerhalb der Tabelle haben wir das Element tbody.
  3. Als Nächstes kommt ein tr-Element der Klasse odd.
  4. Innerhalb dieser tr-Elemente gibt es <td>-Tags.

Die folgende Abbildung zeigt die Ergebnisse unserer Arbeit:

Tabelle ist gestreift, nachdem die Klasse odd angewendet wurde

Abbildung: Die Tabelle ist gestreift, nachdem die Klasse odd angewendet wurde.

Lassen Sie uns zum Schluss noch die Links innerhalb dieser Tabelle ein wenig verändern. Es gibt hier zwei Arten von Links: Einmal die Überschriften in der ersten Spalte links und zum anderen das Datum in den Tabellenzellen.

Zuerst werden wir die Links in den th-Elementen gestalten:

table.schedule tbody tr th a:link {
  font-weight: bold;
  color: #5e7796;
  text-decoration: underline;
}
table.schedule tbody tr th a:visited {
  font-weight: bold;
  color: #5e7796;
}
table.schedule tbody tr th a:hover {
  font-weight: bold;
  color: #5e7796;
  text-decoration: none;
}

Mit der Formatierung der Links in den td-Elementen schließen wir die Formatierung der Tabelle ab:

table.schedule tbody td a:link {
  color: #808000;
  text-decoration: underline;
}
table.schedule tbody td a:visited {
  color: #808000;
}
table.schedule tbody td a:hover {
  color: #808000;
  text-decoration: none;
}

Nun ist die Tabelle fertig formatiert und damit die Entwicklung des gesamten Layouts abgeschlossen. Es sieht großartig aus, wie Sie in der folgenden Abbildung sehen.

Mit formatierten Tabelle ist Layout fertig

Abbildung: Mit der formatierten Tabelle ist das Layout fertig.

  

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