Tabellenrahmen gestalten
Eine wichtige Eigenschaft beim Tabellendesign mit CSS ist border-collapse. Sie beschreibt, wie sich der Rahmen zu verhalten hat. CSS definiert dazu zwei Möglichkeiten: Mit dem Wert collapse werden aneinander liegende Rahmen zu einem zusammengefasst - es gibt also keinen Zwischenraum zwischen zwei Rahmen. Bei dem Wert seperate geschieht das Gegenteil und jede Zelle sowie die Tabelle an sich erhält einen eigenen Rahmen. Ein Beispiel:
Eine wichtige Eigenschaft beim Tabellendesign mit CSS ist border-collapse. Sie beschreibt, wie sich der Rahmen zu verhalten hat. CSS definiert dazu zwei Möglichkeiten: Mit dem Wert collapse werden aneinander liegende Rahmen zu einem zusammengefasst - es gibt also keinen Zwischenraum zwischen zwei Rahmen. Bei dem Wert seperate geschieht das Gegenteil und jede Zelle sowie die Tabelle an sich erhält einen eigenen Rahmen. Ein Beispiel:
<style type="text/css">
<!--
table, td { border: solid 1px red; }
table{ border-collapse: separate; border-spacing:3px; }
-->
</style>
<table>
<tr>
<td>Zelle 1.1</td>
<td>Zelle 1.2</td>
</tr>
<tr>
<td>Zelle 2.1</td>
<td>Zelle 2.2</td>
</tr>
</table>Wie im Beispiel zu sehen, gibt es zusätzlich noch die border-spacing-Eigenschaft. Mit ihr definiert man den Abstand zweier Rahmen, sofern border-collapse auf separate gesetzt ist, und entspricht damit weitestgehend dem HTML-Attribut cellspacing.
