Warum Styling mit CSS auch für Tabellen geeignet ist

von Michael Meadhra am 20. Januar 2005 , 14:25 Uhr

Hier nun die Markupsprache für die Tabelle. Durch das Entfernen der Formatierungsattribute aus dem Markup wird diese einfache Tabelle erkennbar sauberer. Der Unterschied ist bei einer Tabelle mit stärkerer Formatierung noch auffallender.

</p> <table id="sample" cellspacing="2"> <tr class="toprow"> <td> </td> <td>John</td> <td>Jane</td> <td>Total</td> </tr> <tr> <td class="leftcol">January</td> <td class="data">123</td> <td class="data">234</td> <td class="data">357</td> </tr> <tr> <td class="leftcol">February</td> <td class="data">135</td> <td class="data">246</td> <td class="data">381</td> </tr> <tr> <td class="leftcol">March</td> <td class="data">257</td> <td class="data">368</td> <td class="data">625</td> </tr> <tr> <td class="leftcol">Total</td> <td class="data">515</td> <td class="data">848</td> <td class="data">1363</td> </tr> </table> <p>

Das CSS beginnt mit Regeln, die die <<table>- und <td>-Tags in einer Tabelle mit id="sample" neu definieren. So lassen sich auf einfache Weise gemeinsame und tabellenweit gültige Attribute setzen.

Der Style table#sample definiert die Breite und den Rahmen der Tabelle sowie die Hintergrundfarbe, die durch die Lücken zwischen den Zellen sichtbar ist. Der Style table#sampletd bestimmt das Muster (welches den Platz des Attributs cellpadding einnimmt) und den Rahmen für jede Zelle, bezieht sich jedoch nur auf Zellen innerhalb der Sampletabelle.

Die drei Klassenselektoren (.data, .toprow, .leftcol) steuern die Attribute der Tabellenzeilen-/zellen mit den entsprechenden Klassen-IDs in der Tabelle. Alle Attribute hinsichtlich Ausrichtung, Schriftart, Schriftschnitt und Hintergrundfarbe für diese Zellen sind nun in diesen CSS-Regeln und nicht im Seitenmarkup enthalten.

Die einzigen Formatierungsattribute, die im Seitenmarkup verbleiben, sind die Zeilenabstandsattribute des

-Tags. Es gibt keine Möglichkeit, dieses spezielle Tabellenattribut mit CSS zu steuern. Logischerweise würde cellspacing mit den Rändern des CSS-Box-Modells übereinstimmen, doch wirkt sich eine Änderung der Randattribute der Tabellenzellen nicht auf den Zeilenabstand in einer Tabelle aus.

Vor allem liegt der Vorteil von CSS-Styling in einer Tabelle in der Möglichkeit, das strukturelle Markup von der Formatierung des Aussehens zu trennen. Ist man für Tabellen auf CSS-Styling übergegangen, stellt man fest, dass CSS auch bei der Formatierung mehr Flexibilität bietet. So lassen sich zum Beispiel mit CSS der Stil, die Farbe und die Stärke des Rahmens jeder Seite einer Tabellenzelle getrennt festlegen, wogegen die Tabellenformatierungsoptionen in der Zeile nur globale Farb- und Stärkeneinstellungen zulassen.