Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Christoph Zillgens 7. Dezember 2018

CSS3: So einfach hübscht du deine Tabellen auf (2/2)

Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten, wie das mit Illustrator oder  Excel und Co. möglich ist. Mit CSS3 kannst du deine Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Im heutigen Teil 2 des Beitrags zur Tabellenaufhübschung mit CSS3 erläutere ich, wie du Spalten aufpeppen und bestimmten Zeilen automatisch ein anderes Aussehen gibst als dem Rest der Tabelle.

Wenn du direkt auf diesem Beitrag gelandest bist, willst du vielleicht erst einmal den ersten Teil lesen. Den findest du hier.

Zellen aufpeppen

Es folgen ein paar Anweisungen, die unsere Tabelle weiter verschönern. Da sind zum einen die Zellen des Tabellenkopfes, die einen Hintergrund und einen inneren Schatten erhalten. Streng genommen ist das in unserem Fall kein Schatten, sondern eine Aufhellung. Weil dazu aber die CSS-Eigenschaft box-shadow verwendet wird, sprechen wir der Einfachheit halber trotzdem von Schatten.

th {
	background:#7aae5e;
	border-bottom:1px solid rgba(255,255,255,.7);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	-o-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	padding:6px 10px;}

td {
	border-bottom:1px solid #fafafa;
	border-bottom:1px solid rgba(255,255,255,.5);
	padding:6px 10px;
	color:rgba(0,0,0,.7);}

tr:last-child td {
	border-bottom:none;}

In unserem Fall missbrauchen wir die Schatten-Eigenschaft, um die obere Kante des Tabellenkopfes etwas aufzuhellen. Das erhöht den Kontrast und sorgt für einen ganz leichten 3D-Effekt. Dabei geben wir zunächst den Wert inset an, weil der Schatten nach innen gehen soll. Dann folgen die vier Werte, die bereits weiter oben erklärt wurden.

Zuletzt bekommen die Zellen des Tabellenrumpfes eine untere Linie, etwas mehr Raum mittels padding sowie eine Farbe für die Schrift. Mit der Pseudoklasse :last-child wird für die letzte Zeile die Linie wieder aufgehoben.

Spalten anhübschen

Unsere Tabelle sieht nun schon ganz passabel aus, braucht aber noch etwas Feinschliff, weshalb wir uns jetzt um die einzelnen Spalten kümmern. Bei Spalte 1 möchten wir die Zahlen rechtbündig haben. Da wir im Quelltext keine Klassen vergeben haben, müssen wir das td-Element über den Pseudoklasse :first-child ansprechen.

Es folgt die wichtigste Spalte, die des Vereins. Diese ist über das a-Element leicht anzusprechen, da wir sonst in der gesamten Tabelle keinen Link vergeben haben.

/* 1. Spalte: Platz */

td:first-child {
	text-align:right;
	padding-right:24px;}

/* 2. Spalte: Verein */

td a {
	background:transparent url(vereine.png) 0 0 no-repeat;
	color:#000;
	font-weight:bold;
	opacity:.7;
	padding:3px 0 7px 30px;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;}

Nun möchten wir natürlich die entsprechenden Vereinslogos für jeden Verein unterbringen. Zuvor haben wir ja schon ein Bild mit allen Logos eingebunden, lediglich die Position muss noch für jeden Verein angepasst werden.

Aber wie findet CSS die einzelnen Vereine, wenn wir keine Klassen vergeben haben? Hier hilft uns nun der Attribut-Selektor. Dieser greift hier auf das HTML-Attribut href im Start-Tag des a-Elements zu. Im Quelltext haben wir ja jeden Verein verlinkt. Diesen Link können wir über CSS ausfindig machen. So sieht das ganze aus:

td a[href*="bremen"] {background-position:0 0;}
td a[href*="dortmund"] {background-position:0 -30px;}
td a[href*="frankfurt"] {background-position:0 -60px;}
td a[href*="freiburg"] {background-position:0 -90px;}
td a[href*="hamburg"] {background-position:0 -116px;}
td a[href*="hannover"] {background-position:0 -150px;}
td a[href*="hoffenheim"] {background-position:0 -180px;}
td a[href*="kaiserslautern"] {background-position:0 -210px;}
td a[href*="koeln"] {background-position:0 -240px;}
td a[href*="leverkusen"] {background-position:0 -267px;}
td a[href*="mainz"] {background-position:0 -300px;}
td a[href*="gladbach"] {background-position:0 -330px;}
td a[href*="bayern"] {background-position:0 -360px;}
td a[href*="nuernberg"] {background-position:0 -390px;}
td a[href*="pauli"] {background-position:0 -420px;}
td a[href*="schalke"] {background-position:0 -450px;}
td a[href*="stuttgart"] {background-position:0 -480px;}
td a[href*="wolfsburg"] {background-position:0 -510px;}

Im ersten Selektor wird also geprüft, ob die Zeichenkette bremen im Link enthalten ist. So lässt sich nun jedem Verein über die Hintergrundposition das entsprechende Logo zuweisen.

Es folgt die Angabe zu :hover. Noch mal zurück zu den Links, hier hatten wir zuvor eine Transition angegeben. Dabei wird in unserem Beispiel für 0,2 Sekunden eine kleine Animation vollzogen, die auf alle Eigenschaften zutrifft, die sich beim Überfahren der Maus ändern.

Übrigens: Die aktuelle Liga-Zusammensetzung ist etwas anders. Mein Beispiel ist schon älter.

Spalten per :nth-child() ansprechen

Als nächstes verbessern wir noch einzelne Spalten etwas, wobei wir uns die CSS3-Pseudoklasse :nth-child() zunutze machen. Hiermit sprechen wir gezielt einzelne Kind-Elemente an. In unserem Fall sind es die jeweiligen Zellen, die eine bestimmte Spalte bilden. td:nth-child(3) spricht also das dritte td an, welches Kindelement von tr ist. Damit können wir die gesamte dritte Spalte ansteuern.

/* Spalten zentrieren */
td:nth-child(3),
td:nth-child(7),
td:nth-child(8),
td:nth-child(9) {
	text-align:center;}

/* 9. Spalte: Punkte */

td:nth-child(9) {
	font-weight:bold;}

/* 10. Spalte: Hinweise */

td:nth-child(10) {
	font-size:11px;
	font-style:italic;}

Zeilen tunen

Nachdem wir nun unsere Spalten aufgepeppelt haben, verdienen ebenso die einzelnen Zeilen eine genauere Betrachtung. Und zwar wollen wir hier die Bedeutung der Platzierungen noch etwas deutlicher hervorheben. Mein Beispiel ist schon etwas älter und bildet die aktuellen UEFA-Regularien nicht vollständig ab. Also, nicht wundern.

Das ist der entsprechende Code:

/* Zeile 1-3 Championsleague + Quali */

tr:nth-child(-n+3) td {
	background:#c3c7c1;
	background: -webkit-gradient(linear, left top, left bottom, from(#d9dcd8),
color-stop(50%, #d2d5d0), color-stop(50.1%, #cbcec9), to(#c3c7c1));
	background: -moz-linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);
	background: linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);}

/* Zeile 4-5 Euroleague */

tr:nth-child(-n+5):not(:nth-child(-n+3)) td {
	background:rgba(105,115,100,.07)}

/* Zeile 16-18 Absteiger und Relegation */	

tr:nth-last-child(-n+3) td {
	background:rgba(105,115,100,.07)}

tr:nth-last-child(-n+2) td {
	background:rgba(105,115,100,.13)}

tr:last-child td:first-child {
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;}

tr:last-child td:last-child {
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;}

Es gibt zahlreiche Bundesliga-Tabellen die hier viel mit Farbe arbeiten und dadurch die Tabelle schön (oder weniger schön) bunt machen. Unsere Tabelle soll hier eher dezent bleiben und ist durch die Vereinslogos schon bunt genug.

Deshalb verändern wir lediglich den Grauwert der Spalten, beziehungsweise gönnen uns für die ersten drei noch einmal einen leichten Spiegeleffekt. »Die ersten drei Zeilen«, das bedeutet in der CSS-Sprache td:nth-child(-n+3). Heißt auf deutsch, nehmen wir für n irgendeine positive Zahl, ob jetzt 1, 5 oder 5.000, so wird die Summe innerhalb der Klammern nie größer als drei und deckt somit die ersten drei Zeilen ab. Diese erhalten einen Verlauf und heben sich so etwas von den übrigen Plätzen ab.

Ich verzichte hier darauf, dem Qualifikationsplatz eine gesonderte Gestaltung zu geben, das wäre zu viel des Guten und nicht unbedingt übersichtlicher. In der Hinweisspalte sieht man immer noch, dass es sich nur um einen Quali-Platz handelt.

Zeilen 4 und 5 gezielt ansprechen

Etwas abheben möchten wir allerdings noch die Europaleague-Plätze, diese erhalten einen dunkleren Hintergrund. Um jetzt nur die Zeilen 4 und 5 anzusprechen, greifen wir noch tiefer in die CSS-Trickkiste. Der erste Teil der Anweisung tr:nth-child(-n+5) ähnelt unserem vorherigen Beispiel, allerdings jetzt für die ersten fünf Zeilen.

Da wir aber die ersten drei Zeilen nicht verändern wollen, müssen wir sie wieder ausschließen, was uns mit Hilfe der Pseudoklasse :not() gelingt. Die Anweisung in der Klammer wird also nicht berücksichtigt, somit bleiben Zeile 4 und 5 übrig.

Abdunkeln per RGBA

Etwas anders gehen wir bei den Absteigern beziehungsweise dem Relegationsplatz vor. Hier machen wir uns den Vorteil von RGBA zu nutze, indem wir zunächst die letzten drei Zeilen etwas abdunkeln und dann die letzten beiden Zeilen noch mal etwas dunkler machen. Somit sind wir fast am Ziel.


Ein Klick aufs Bild öffnet eine Demoseite.

Ein kurzer Check in den wichtigsten Browsern zeigt uns, dass die Tabelle überall funktioniert. Geschafft!

Christoph Zillgens

Christoph Zillgens ist Mediengestalter für Digital- und Printmedien (IHK) und nach einigen Jahren als Print- und Webdesigner in einer Werbeagentur seit Anfang 2009 selbstständig. Er bloggt ab und an auf deutsch oder englisch. Twitter.

Ein Kommentar

  1. Schönes Tutorial! Danke dafür! Kann ich gerade gut gebrauchen und gibt prima Ansätze für weiteres css-Tabellen-eye-candy.
    Gruß, Micha.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.