Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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 las­sen sie sich dort lan­ge nicht so schön gestal­ten, wie das mit Illustrator oder  Excel und Co. mög­lich ist. Mit CSS3 kannst du dei­ne Tabellen nun aber auch im Internet gra­fisch anspre­chend auf­be­rei­ten. Im heu­ti­gen Teil 2 des Beitrags zur Tabellenaufhübschung mit CSS3 erläu­te­re ich, wie du Spalten auf­pep­pen und bestimm­ten Zeilen auto­ma­tisch ein ande­res Aussehen gibst als dem Rest der Tabelle.

Wenn du direkt auf die­sem Beitrag gelan­dest bist, willst du viel­leicht erst ein­mal den ers­ten Teil lesen. Den fin­dest du hier.

Zellen aufpeppen

Es fol­gen ein paar Anweisungen, die unse­re Tabelle wei­ter ver­schö­nern. Da sind zum einen die Zellen des Tabellenkopfes, die einen Hintergrund und einen inne­ren Schatten erhal­ten. Streng genom­men ist das in unse­rem Fall kein Schatten, son­dern eine Aufhellung. Weil dazu aber die CSS-Eigenschaft box-shadow ver­wen­det wird, spre­chen wir der Einfachheit hal­ber trotz­dem 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 unse­rem Fall miss­brau­chen wir die Schatten-Eigenschaft, um die obe­re Kante des Tabellenkopfes etwas auf­zu­hel­len. Das erhöht den Kontrast und sorgt für einen ganz leich­ten 3D-Effekt. Dabei geben wir zunächst den Wert inset an, weil der Schatten nach innen gehen soll. Dann fol­gen die vier Werte, die bereits wei­ter oben erklärt wur­den.

Zuletzt bekom­men die Zellen des Tabellenrumpfes eine unte­re Linie, etwas mehr Raum mit­tels padding sowie eine Farbe für die Schrift. Mit der Pseudoklasse :last-child wird für die letz­te Zeile die Linie wie­der auf­ge­ho­ben.

Spalten anhübschen

Unsere Tabelle sieht nun schon ganz pas­sa­bel aus, braucht aber noch etwas Feinschliff, wes­halb wir uns jetzt um die ein­zel­nen Spalten küm­mern. Bei Spalte 1 möch­ten wir die Zahlen recht­bün­dig haben. Da wir im Quelltext kei­ne Klassen ver­ge­ben haben, müs­sen wir das td-Element über den Pseudoklasse :first-child anspre­chen.

Es folgt die wich­tigs­te Spalte, die des Vereins. Diese ist über das a-Element leicht anzu­spre­chen, da wir sonst in der gesam­ten Tabelle kei­nen Link ver­ge­ben 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öch­ten wir natür­lich die ent­spre­chen­den Vereinslogos für jeden Verein unter­brin­gen. Zuvor haben wir ja schon ein Bild mit allen Logos ein­ge­bun­den, ledig­lich die Position muss noch für jeden Verein ange­passt wer­den.

Aber wie fin­det CSS die ein­zel­nen Vereine, wenn wir kei­ne Klassen ver­ge­ben 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 ver­linkt. Diesen Link kön­nen wir über CSS aus­fin­dig machen. So sieht das gan­ze 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 ers­ten Selektor wird also geprüft, ob die Zeichenkette bremen im Link ent­hal­ten ist. So lässt sich nun jedem Verein über die Hintergrundposition das ent­spre­chen­de Logo zuwei­sen.

Es folgt die Angabe zu :hover. Noch mal zurück zu den Links, hier hat­ten wir zuvor eine Transition ange­ge­ben. Dabei wird in unse­rem Beispiel für 0,2 Sekunden eine klei­ne Animation voll­zo­gen, die auf alle Eigenschaften zutrifft, die sich beim Überfahren der Maus ändern.

Übrigens: Die aktu­el­le Liga-Zusammensetzung ist etwas anders. Mein Beispiel ist schon älter.

Spalten per :nth-child() ansprechen

Als nächs­tes ver­bes­sern wir noch ein­zel­ne Spalten etwas, wobei wir uns die CSS3-Pseudoklasse :nth-child() zunut­ze machen. Hiermit spre­chen wir gezielt ein­zel­ne Kind-Elemente an. In unse­rem Fall sind es die jewei­li­gen Zellen, die eine bestimm­te Spalte bil­den. td:nth-child(3) spricht also das drit­te td an, wel­ches Kindelement von tr ist. Damit kön­nen wir die gesam­te drit­te Spalte ansteu­ern.

/* 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 unse­re Spalten auf­ge­pep­pelt haben, ver­die­nen eben­so die ein­zel­nen Zeilen eine genaue­re Betrachtung. Und zwar wol­len wir hier die Bedeutung der Platzierungen noch etwas deut­li­cher her­vor­he­ben. Mein Beispiel ist schon etwas älter und bil­det die aktu­el­len UEFA-Regularien nicht voll­stän­dig ab. Also, nicht wun­dern.

Das ist der ent­spre­chen­de 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 zahl­rei­che Bundesliga-Tabellen die hier viel mit Farbe arbei­ten und dadurch die Tabelle schön (oder weni­ger schön) bunt machen. Unsere Tabelle soll hier eher dezent blei­ben und ist durch die Vereinslogos schon bunt genug.

Deshalb ver­än­dern wir ledig­lich den Grauwert der Spalten, bezie­hungs­wei­se gön­nen uns für die ers­ten drei noch ein­mal einen leich­ten Spiegeleffekt. »Die ers­ten drei Zeilen«, das bedeu­tet in der CSS-Sprache td:nth-child(-n+3). Heißt auf deutsch, neh­men wir für n irgend­ei­ne posi­ti­ve Zahl, ob jetzt 1, 5 oder 5.000, so wird die Summe inner­halb der Klammern nie grö­ßer als drei und deckt somit die ers­ten drei Zeilen ab. Diese erhal­ten einen Verlauf und heben sich so etwas von den übri­gen Plätzen ab.

Ich ver­zich­te hier dar­auf, dem Qualifikationsplatz eine geson­der­te Gestaltung zu geben, das wäre zu viel des Guten und nicht unbe­dingt über­sicht­li­cher. In der Hinweisspalte sieht man immer noch, dass es sich nur um einen Quali-Platz han­delt.

Zeilen 4 und 5 gezielt ansprechen

Etwas abhe­ben möch­ten wir aller­dings noch die Europaleague-Plätze, die­se erhal­ten einen dunk­le­ren Hintergrund. Um jetzt nur die Zeilen 4 und 5 anzu­spre­chen, grei­fen wir noch tie­fer in die CSS-Trickkiste. Der ers­te Teil der Anweisung tr:nth-child(-n+5) ähnelt unse­rem vor­he­ri­gen Beispiel, aller­dings jetzt für die ers­ten fünf Zeilen.

Da wir aber die ers­ten drei Zeilen nicht ver­än­dern wol­len, müs­sen wir sie wie­der aus­schlie­ßen, was uns mit Hilfe der Pseudoklasse :not() gelingt. Die Anweisung in der Klammer wird also nicht berück­sich­tigt, somit blei­ben Zeile 4 und 5 übrig.

Abdunkeln per RGBA

Etwas anders gehen wir bei den Absteigern bezie­hungs­wei­se dem Relegationsplatz vor. Hier machen wir uns den Vorteil von RGBA zu nut­ze, indem wir zunächst die letz­ten drei Zeilen etwas abdun­keln und dann die letz­ten bei­den Zeilen noch mal etwas dunk­ler machen. Somit sind wir fast am Ziel.


Ein Klick aufs Bild öff­net eine Demoseite.

Ein kur­zer Check in den wich­tigs­ten Browsern zeigt uns, dass die Tabelle über­all funk­tio­niert. 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 gera­de gut gebrau­chen und gibt pri­ma Ansätze für wei­te­res css-Tabellen-eye-can­dy.
    Gruß, Micha.

Schreibe einen Kommentar

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