Tabellen und CSS
Beispiel für eine per CSS formatierte Tabelle.
Die Tabelle als Ganzes hat einen Außenabstand von 20 Pixeln zu allen sie umgebenden Elementen, eine 3 Pixel breite, weiße Doppellinie als Rahmen und die Rahmen der Zellen in der Tabelle überlagern einander, sodass keine "Doppelrahmen" zu sehen sind.
Der Tabellenkopf enthält normale, links ausgerichtete Schrift, die 8 Pixel Abstand von allen Rändern hat. Der Tabellenkopf hat unten einen roten Rand und eine bestimmte Hintergrundfarbe.
Die einzelnen Zellen sind wieder ein bisschen anders formatiert. Aber sehen Sie selbst:
<style type="text/css">
/* Grundlegende Tabellenformatierung. */
table {
margin:20px;border:3px double white;
border-collapse:collapse;
}
th {
font-weight:normal;
border-bottom:1px solid red;
background:#222;
text-align:left;
padding:8px;
}
td {
border:1px solid #666;
background:#333;
font:12px sans-serif;
padding:5px;
}
</style>
/* Grundlegende Tabellenformatierung. */
table {
margin:20px;border:3px double white;
border-collapse:collapse;
}
th {
font-weight:normal;
border-bottom:1px solid red;
background:#222;
text-align:left;
padding:8px;
}
td {
border:1px solid #666;
background:#333;
font:12px sans-serif;
padding:5px;
}
</style>
| Hallo | Ballo | Hallo |
|---|---|---|
| Zeile 2 | auch Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 | auch Zeile 3 |
Der Vorteil der Formatierung per CSS ist, dass nun alle Tabellen diese Eigenschaften aufweisen.
