11.01.2009 - geschrieben von Marvin in Tutorials

9 Tabellen Mit CSS und jQuery gestalten

tabellen

Auch wenn HTML-Tabellen stetig an Bedeutung verloren haben, da sie nur noch für den eigentlichen Zweck, Daten geordnet darzustellen, benutzt werden bzw. benutzt werden sollten, kann man trotzdem eine Menge mit ihnen machen. Wie jeder weiss sehen Tabellen ziemlich öde aus, wenn man ihnen nicht ein wenig mit CSS auf die Sprünge hilft.

jQuery

Wenn man dann sogar noch mit jQuery ansetzt, kann man die Gestaltung sogar noch ein wenig routinieren. Hierfür binden wir erstmal die aktuellste jQuery Version ein:

<script src=”pfad/jquery.js” type=”text/javascript”></script>

Dann hier der Schnipsel, der auch in den HTML Kopf kommt, welcher uns hilft die CSS Gestaltung der Tabellen zu routinieren:

<script type="text/javascript"> 
   $(document).ready(function(){
   $("table tr:first").addClass("head");
   $("table tr:even:not(.head)").addClass("odd");
   });
</script>

Dieser Code-Schnipsel vergibt lediglich die Klasse head an die erste Zeile einer Tabelle (table tr:first) und die Klasse odd an alle weiteren geraden Tabellenzeilen (table tr:even) ausgenommen der ersten Zeile (:not(.head)).

CSS

Damit wir jetzt auch sehen, was wir gerade gemacht haben, vergeben wir nun ein paar CSS-Eigenschaften. Da wir CSS Eigenschaften nicht direkt auf die Zeilen (tr) anwenden können benutzen wir nun für unsere alternierede Darstellung einfach einen Selektor, welcher auf die Spalten innerhalb der Zeilen zugreift.

tr.odd td {
background:#e4e4e4;}

Nun sollte jede zweite Zeile automtisch mit der Hintergrundfarbe #e4e4e4 gekennzeichnet werden. Nun kommen wir noch zur Head-Zeile der Tabelle:

tr.head td {
background:#666;
color:#fff;}

Die erste Zeile jeder Tabelle sollte nun einen dunklen Hintergrund haben und weiße Schrift als Kontrast.

Demo

Hier findet ihr als Beispieltabelle eine kleine Liste meiner Vinylschätze: Demo

Ich hoffe das war jetzt verständlich geschrieben. Wenn ihr Fragen habt, steht euch die Kommentarfunktion natürlich gerne zur Verfügung!

Tags:

9 Kommentare

Trackback - RSS Kommentare zu "Tabellen Mit CSS und jQuery gestalten"

Dein Gedanke dazu?...