Tabellen Spalten einfach stylen mit colgroup

Wenn man die Breite oder die Hintergrundfarbe einer Tabellenspalte schnell ändern möchte, kann man dies mit sogenannten colgroups lösen. Hat man z.b. eine Tabelle mit 3 Spalten, definiert man im html einfach nach dem <table> folgende Colgroup:

&lt;colgroup&gt;
&lt;col class="col1" /&gt;
&lt;col class="col2" /&gt;
&lt;col class="col3" /&gt;
&lt;/colgroup&gt;

Nun muss man im CSS nur noch die klassen stylen, die man den col's zugewiesen hat, in unserem Beispiel wäre das:

.colgrouptest .col1 {background-color:#fff2df;}
.colgrouptest .col2 {background-color:#ecfeff;}
.colgrouptest .col3 {background-color:#fcedfc;}

Hier ein Beispiel wie dies aussehen würde

Spalte 1 Spalte 2 Spalte 3
Test Test Test
Test Test Test
Test Test Test

Wie gesagt funktioniert dies Browserübergreiffend nur für die Hintergrundfarbe und Breitenangabe. Firefox versteht weitere Angaben (im gegensatz zum IE) leider nicht. Um auch dem Firefox weitere Angaben (wie zum Beispiel Schriftfarbe) zuzuordnen kann man aber folgendes im CSS definieren:
Alle tds der ersten Spalte spricht man so an: td:first-child
die der zweiten Spalte so: td:first-child + td
und die der dritten so: td:first-child + td +td

Dies wird vom Firefox, IE7 und Opera verstanden.


 

3 Kommentare »

1 Trackbacks

Florian Stanek
verfasst am 31. Mai 2007 um 20:34

Danke, habe ich noch nicht gewusst.

Blue
verfasst am 1. Juni 2007 um 8:28

First Child? Hast du und des Keksal scho Kinder?

Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />

 
Produced and © by Koller Jürgen | Powered by the awesome WP | Love and Joy to everyone