CSS-Tabellen (Table)

CSS Tutorial > Tabellen

Mit HTML werden Sie häufig den table-Tag gefolgt von border-, cellpadding-, und cellspacing-Attributen vorfinden. Dies wäre unnötig wenn wir CSS benutzen.

Die table, th, tr, und td-Selektoren können viele der Eigenschaften, die wir weiter oben in diesem Tutorial erklärt haben, benutzen. Diese beinhalten unter anderem Eigenschaften für Text, Schriftart, Rahmen, Farbe, und Hintergrund.

Schauen wir uns ein Beispiel an: Nehmen wir an, dass wir den folgenden Stil auf eine Tabelle anwenden möchten:

Tabelle: Kein äußerer Rahmen, die Schriftart ist Arial, Schriftgröße 14px.

Überschrift: Hintergrund ist gelb.

Elemente: Es soll eine schwarze solide Linie unter jedem Tabellenelement geben.

Bei Noten unter 60, benutzen wir eine separate Klasse, die die Schriftfarbe rot machen würde.

Das Stylesheet würde dann so aussehen:

table {
border: 0;
font-family: arial;
font-size:14px;
}
th {
background-color:yellow;
}
td {
border-bottom:1 solid #000000;
}
.fail {
color:#FF0000;
}

Mit diesem Stylesheet und dem untenstehenden HTML-Code:

<table>
<tr>
<th>Schülername</th>
<th>Note</th>
</tr>
<tr>
<td>Stella</td>
<td>85</td>
</tr>
<tr>
<td>Sophie</td>
<td>95</td>
</tr>
<tr>
<td>Alice</td>
<td class="fail">55</td>
</tr>
</table>

würde die Ausgabe so sein:

Schülername	Note
Stella	85
Sophie	95
Alice	55

border-collapse

Es gibt eine weitere Eigenschaft in Bezug auf Tabellen, die wir hier nennen möchten. Diese ist die border-collapse-Eigenschaft. Die border-collapse-Eigenschaft ersetzt im Grunde das cellspacing=0-Statement. Schauen wir uns ein Beispiel hierzu an.

Mit dem CSS-Statement:

table {
border:0;
border-collpase:collpase;
width:200px;
}

tr {
border-bottom:1px solid #000;
}

würde der folgende HTML-Code:

<table>
<tr><td>Jahr</td><td>Gehalt</td></tr>
<tr><td>2006</td><td>35,2M</td></tr>
<tr><td>2007</td><td>40,1M</td></tr>
</table>

so aussehen:

Jahr	Gehalt
2006	35,2M
2007	40,1M

Beachten Sie, dass die Rahmen der Jahres-Spalte und der Gehalts-Spalte fortlaufend sind. Dies ist der Effekt von border-collapse:collapse.

Folgende Seite: CSS Position