Christoph Zillgens 7. Dezember 2018

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

Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie du solche Tabellen mit CSS3 ansprechend und dynamisch gestaltest, zeige ich dir in einem zweiteiligen Tutorial, dessen ersten Teil du gerade liest.

Mein Beispiel ist eine Bundesliga-Tabelle, die ich in einem Projekt vor einigen Jahren tatsächlich baruchte und die gut geeignet ist, dir die Tabellengestaltung näher zu bringen. Beachte bitte Platzierungen und Teilnehmer nicht. Das ist alles Schnee von gestern. Hier geht es nur ums Coding.

In diesem Tutorial werden wir verschiedene CSS2-/CSS3-Selektoren anwenden, die uns Eingriffe in das HTML ersparen. Auch das Einbinden von Grafiken wird überflüssig, denn Verläufe und Schatten erzeugen wir kurzerhand mit CSS. Dazu kommen weitere kleine CSS3-Schnipsel, die unsere Tabelle für moderne Browser bereichern. Hier ist ein Ausschnitt, wie unsere Tabelle nachher im Safari oder Firefox aussehen wird:

Fertige Tabelle

So wird die fertige Tabelle später aussehen.

Wir starten mit einer HTML-Basis ohne IDs und Klassen

Wir werden unsere Tabelle sehr einfach halten, nämlich ganz ohne Klassen, IDs oder gar zusätzliche Div-Container. Warum? Weil es mehrere Vorteile bietet:

  • übersichtlicherer Code
  • kürzere Ladezeiten
  • weniger Wartungsbedarf.

Legen wir also los:

HTML Tabelle

Unsere Tabelle enthält ein caption-Element, in dem ein kurzer Titel zur Erläuterung des Inhalts enthalten ist. Es folgt der Tabellenkopf (thead) mit den Spaltenüberschriften sowie der Tabellenrumpf (tbody) mit den Inhalten der Tabelle. scope="col" wird zudem verwendet, um deutlich zu machen, dass sich die Tabellenköpfe auf die gesamte Spalte beziehen.

Nachdem wir unser Grundgerüst erstellt haben, können wir uns direkt an die Gestaltung machen. Zurzeit sieht unsere Tabelle noch so aus:

Tabelle ohne CSS

Zuerst nehmen wir noch ein paar grundsätzliche Einstellungen vor:

* {
	margin:0;
	padding:0;}

body {
	font: 13px/1.5 Arial, sans-serif;
	margin:50px;}

h1 {
	font-size:20px;
	margin-bottom:10px;}

Damit setzen wir alle Innen- und Außenabstände auf 0 und definieren die Grundeinstellung der Schrift und Abstände für body und h1.

Die Grundgestaltung der Tabelle

/* Tabelle */

table {
	background:#e9eae8;
	background:rgba(105,115,100,.15);
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
	border-collapse:collapse;
	border-spacing:0;
	text-align:left;
	width:660px;}

Den Hintergrund geben wir in RGBA (RGB plus Alpha-Kanal) an. Das ist deshalb sinnvoll, weil wir später noch verschiedene Grauabstufungen des Farbwerts verwenden und dann nur den Alpha-Kanal ändern müssen. Als Fallback-Lösung können wir in der Zeile davor den Hexadezimal-Wert für unseren Freund den Internet Explorer notieren, der bis einschließlich Version 8 kein RGBA versteht.

Dann folgt die Anweisung für abgerundete Ecken in der Kurzschreibweise, wobei die Werte ähnlich wie zum Beispiel bei margin im Uhrzeigersinn angegeben werden, hier also oben links, oben rechts, unten rechts, unten links. Dann weisen wir noch an, dass die Zellenrahmen übereinander liegen sollen und der Text linksbündig ist. Zum Schluss erhält die Tabelle eine Breite, die verhindert, dass sie bei einem kleineren Browserfenster unschön zusammengeschoben wird.

Die Tabellenüberschrift (»caption«)

caption {
	background:#656e70;
	background:-webkit-gradient(linear, left top, left bottom, from(#656e70),
color-stop(50%, #515b5c), color-stop(50.1%, #465153), to(#323e40));
	background:-moz-linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
	background:linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	color:#fff;
	font-size:15px;
	font-weight:bold;
 	padding:10px 0 10px 10px;
 	text-align:left;
	text-shadow:0 -1px 1px rgba(0,0,0,.5);}

small {
	color:#a3a8a9;}

Hier schlägt uns einiges an CSS entgegen, was in diesem Fall an den Farbverläufen liegt, die wir rein mit CSS erstellen. Diese werden über die bekannte CSS-Eigenschaft background realisiert, allerdings müssen wir der Wert für Safari und Firefox unterschiedlich angeben. Aber der Reihe nach. Zunächst definieren wir die Fallback-Lösung für Browser, die keine Verläufe darstellen können. Anschließend folgt der Verlauf für Webkit-Browser, der wie folgt entsteht: Zunächst kommt der Typ, hier ein linearer Verlauf, dann folgt der Startpunkt left top, sowie der Endpunkt left bottom, wir erhalten also einen senkrechten Verlauf.

Es folgt die Farbe für den Verlaufsstart. Bei einem einfachen Verlauf würde nun die Farbe für das Verlaufsende folgen. In unserem Fall möchten wir aber einen leichten Spiegelungseffekt erzielen und brauchen dafür zwei Farben mehr. Dazu gibt man einen color-stop an, der bei der Hälfte der Box einsetzt, angegeben durch einen Prozentwert. Es folgt ein zweiter color-stop, der direkt an den vorherigen anschließt, deshalb ein Wert von 50.1%, sowie die Schlussfarbe, mit der der Verlauf endet. Puh, geschafft.

Die nun folgende Firefox-Anweisung liest sich dagegen wesentlich leichter, ist intuitiver und drückt das gerade beschriebene in wesentlich weniger Code aus. Zuletzt wird die offizielle W3C-Deklaration geschrieben, die aber glücklicherweise genau der von Firefox entspricht, sodass wir sie einfach ohne Browserpräfix übernehmen können.

Es folgen wieder abgerundete Ecken, kennen wir ja, sowie weitere Einstellungen bzgl. der Schriftanzeige, unter anderem ein text-shadow, der nach oben gerichtet für einen leichten Einstanz-Effekt sorgt. Die vier Werte, die angegeben werden, sind der Abstand nach links, der Abstand nach oben (in diese Fall ist der Wert negativ, so dass der Schatten nach oben zeigt), die Unschärfe (je höher der Wert, desto weicher wird der Schatten) und die Farbe. Hier hilft RGBA, den Schatten noch realistischer zu machen.

Zuletzt wird noch mit small unser Datum gestylt.

Das war jetzt eine Menge Holz, mündet aber schon in einem schönen Effekt. So sieht unsere Tabelle jetzt aus:

Tabelle mit Grundgestaltung

Noch hübscher wird unsere Tabelle im zweiten Teil des Artikels. Stay tuned…

(Artikelbild: Depositphotos)

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.