CSS und wechselhafte Tabellen

[Sebastian]

Hallo,
ist es mit Hilfe von CSS möglich, ein Tabellenkontrukt variabel zu gestalten? Zur Erläuterung, was ich mit dieser Frage meine:

Normale Tabellen haben in jeder Zeile gleiche Hintergrundfarbe/-bilder und sind in der Formatierung auch gleich. Klar, Hintergrundfarbe und Bilder der Tabellenzeilen lassen sich mit CSS leicht modifizieren.

Doch wie sieht es aus, wenn die Zeilen _einer_ Tabelle z.B. abwechselnd grau und weiß hinterlegt sind? Kann man per CSS festlegen, dass sich zwei Hintergrundfarben für die Tabellenzeieln abwechseln??

Noch mal grafisch:

"Normale Tabellen":
--------------------------------------
|weiß | weiß | weiß       |
--------------------------------------
|weiß | weiß | weiß        |
--------------------------------------
[...]

"Wechselseitige Zeilenfärbung":
--------------------------------------
|weiß | weiß | weiß       |
--------------------------------------
|grau | grau | grau       |
--------------------------------------
|weiß | weiß | weiß       |
--------------------------------------
[...]

Wer kann mir da helfen??

[Utz]

Hallo,

Doch wie sieht es aus, wenn die Zeilen _einer_ Tabelle z.B. abwechselnd grau und weiß hinterlegt sind? Kann man per CSS festlegen, dass sich zwei Hintergrundfarben für die Tabellenzeieln abwechseln??

Klar - weiße jeder Zelle ein Attribut class zu und definiere die Klasse entsprechend:

<td class="weiss">...</td>
<td class="grau">...></td>

und im CSS dann entsprechend:

td.weiss { ... }
td.grau { ... }

Grüße,

Utz

[Maximilian Baumgart]

Klar - weiße jeder Zelle ein Attribut class zu und definiere die Klasse entsprechend

Ja, so würde ich's auch machen. Für CSS 3 dann schon mal die Pseudoklasse :nth-of-type vormerken, das sähe in der CSS-Datei dann z.B. so aus:

tr:nth-of-type(odd) {background-color:white;}
tr:nth-of-type(even) {background-color:grey;}

bzw.:

tr:nth-of-type(2n+1) {background-color:white;}
tr:nth-of-type(2n) {background-color:grey;}

Siehe auch obigen Link.

[MudGuard]

Hi,

Doch wie sieht es aus, wenn die Zeilen _einer_ Tabelle z.B. abwechselnd grau und weiß hinterlegt sind? Kann man per CSS festlegen, dass sich zwei Hintergrundfarben für die Tabellenzeieln abwechseln??

Erst ab CSS 3 wird es die reine CSS-Lösung geben mit der nth-child Pseudoklasse:
http://www.w3.org/TR/css3-selectors#nth-child-pseudo

Bis dahin den tr abwechselnd zwei Klassen zuordnen...

cu,
Andreas

[Danny]

<tr class="odd">
 <td>ungerade 1</td>
</tr>
<tr>
 <td>gerade 1</td>
</tr>
<tr class="odd">
 <td>ungerade 2</td>
</tr>
<tr>
 <td>gerade 2</td>
</tr>

...

tr {
 background-color: #f8f8f8;
}
tr.odd {
 background-color: #e8e8e8;
}