Webmaster: Tabellenzeile mit CSS automatisch abwechselnd färben

Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich sein, die Zeilen unterschiedlich zu färben: So kann man zum Beispiel jede zweite Zeile einfärben, um das Lesen zu erleichtern.

 
Tabellenzeile abwechselnd automatisch färben

Das Auswählen und Färben der HTML Tabelle geht ganz einfach, indem man zum Beispiel jeder zweiten Zeile eine andere Klasse gibt. Diese manuelle Methode hat aber einen entscheidenden Nachteil, wenn später noch zusätzliche Zeilen ergänzt werden sollen: Hier müsste dann mühsam die richtige Reihenfolge der Klassen wiederhergestellt werden.

Einfacher ist hier das automatische Einfärben jeder zweiten Tabellenzeile mit CSS und dem Selector “nth-of-type”: Damit kann man auf einzelne Elemente der HTML Seite zugreifen und diese anpassen.

Zum Start kann man zunächst jede Zeile der Tabelle kmit einer Hintergrundfarbe füllen:

.meinetable tr {
    background-color: #EEEEEE;
}

 
Anschließend wird dann jede zweite Zeile mit einer anderen Farbe gefüllt:

.meinetable tr:nth-of-type(even) {
    background-color: #EEEEEE;
}

Mit dem CSS Selector nth-of-type kann man sowohl auf bestimmte Elemente zugreifen (wenn man den entsprechenden Wert angibt) oder mit “odd” oder “even” alle geraden oder ungeraden Elemente auswählen.

 
Die HTML Tabelle mit abwechselnden Hintergrundfarben:

HTML Tabelle abwechselnd färben: Der Code

Der komplette HTML und CSS Code für diese Tabelle sieht so aus:

<style>
	.meinetable { border: 1px solid #000000; }
	.meinetable td { padding: 3px 70px 3px 70px; }
	.meinetable tr {
		background-color: #EEEEEE;
	}
	.meinetable tr:nth-of-type(even) {
		background-color: #DDDDDD;
	}
</style>


<table class="meinetable">
	<tr><td>Zeile 1</td></tr>
	<tr><td>Zeile 2</td></tr>
	<tr><td>Zeile 3</td></tr>
	<tr><td>Zeile 4</td></tr>
	<tr><td>Zeile 5</td></tr>
	<tr><td>Zeile 6</td></tr>
	<tr><td>Zeile 7</td></tr>
	<tr><td>Zeile 8</td></tr>
	<tr><td>Zeile 9</td></tr>
</table>

Neben dem Selector “nth-of-type” lässt sich, wie im Bild oben, auch die letzte Zeile mit dem Selector “last-of-type” wählen: So kann man der letzten Zeile unten zum Beispiel einen anderen Hintergrund oder Rand geben.