Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Datentabellen aufhübschen

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Datentabellen aufhübschen

Häufig sieht man sich mit Tabellen konfrontiert, die verschönert weden müssen. Dabei ist es nicht so einfach mit wenig Aufwand viel Eindruck zu hinterlassen. Eric Eggert zeigt wie das geht.

Auch semantisch korrekt eingesetzte Tabellen können unansehnliche Konstrukte sein. Dabei ist gerade im Kontext der Informationsvermittlung die visuelle Darstellung der Tabelle von herausragender Bedeutung. Anhand einer Saison-Abschlusstabelle der Fußball-Bundesliga möchte ich beschreiben, wie Webdesigner geschickt vorgehen können, um eine visuell anspruchsvolle Tabelle zu entwickeln.

Das Endergebnis der Webkrauts-Verschönerungsaktion

HTML ist alles

Eine gute Dokumentstruktur ist schon die halbe Miete. Das Beispiel ist in thead und tbody unterteilt und die Tabellenzeilen folgendermaßen ausgezeichnet:

<tr class="meister">
   <th>1.</th>
   <td class="verein">
      <a href="http://de.wikipedia.org/wiki/1._FC_Kaiserslautern">
         1. <abbr title="Fußballclub">FC</abbr> Kaiserslautern</a>
         <span class="label aufsteiger">
            <span>(</span>Aufsteiger<span>)</span>
         </span>
   </td>
   <td class="spieltag">34</td>
   <td class="siege">19</td>
   <td class="unentschieden">11</td>
   <td class="niederlagen">4</td>
   <td class="tore">63:39</td>
   <td class="verhaeltnis pos">+24</td>
   <td class="punkte">68</td>
</tr>

Das sind ohne Frage vielen Klassen, doch es ist dadurch möglich, die Zellen zu beschreiben und gleichzeitig Möglichkeiten zu bieten, ihr Aussehen anzupassen. Viel lieber als einzelne Klassen hätte ich colgroup bzw. col dafür benutzt, was aber nicht möglich ist, da CSS2 aus unverständlichen Gründen nur Werte für Rahmen, Hintergrund, Breite und Sichtbarkeit zulässt.

Platz schaffen

Übersichtlichkeit ist das A und O bei einer Tabelle. Dazu bietet es sich an, die Schrift ein wenig zu verkleinern. Das muss nicht allzu stark sein. Im Beispiel benutze ich 12px (bzw. .75em), je nach Tabelle kann das auch mehr oder weniger sein. Horizontales Scrollen sollte jedoch möglichst vermieden werden.

Kleinere Schrift alleine macht die ganze Sache aber noch nicht übersichtlicher: In den Zellen muss man ebenfalls Platz schaffen. Dies wird per padding erreicht. Links und rechts polstern wir mit der Hälfte der Schrifthöhe, nach oben minimal und nach unten noch ein Drittel der Schrifthöhe: th, td { padding: 0.1em 0.5em 0.333em; }. Diese Werte sind aus einem Bauchgefühl entstanden und können bei anderen Anwendungen anders aussehen.

Viele Linien verderben den Brei

Als Faustregel gilt: Entweder horizontale oder vertikale Linien verwenden. Von dieser Regel kann abgewichen werden, wenn die Daten in Gruppen einteilbar sind.

Für diese Bundesligatabelle habe ich mich für horizontale Rahmenlinien entschieden. Siege, Unentschieden und Niederlage sind zudem eingruppiert. Für die Vereinsnamen wurde statt Rahmenlinien auf eine Abdunklung der Hintergrundfarbe gesetzt, was ein sehr effektives Mittel der Abgrenzung ist.

Labels statt Text

Viel besser als einfacher Text wirken kleine Labels um Informationen zu transportieren. Zumindest sehen sie chic aus! Im Beispiel benutzen wir sie für Zusatzinformationen: Wer ist in dieser Saison aufgestiegen, wer war Meister und Pokalsieger. Der dazugehörige HTML-Code sieht allerdings gewöhnungsbedürftig aus:

<span class="label aufsteiger"><span>(</span>Aufsteiger<span>)</span></span>

Die Erklärung: Beim Ausdruck beispielsweise sollen die Klammern mit angezeigt werden, da dann die farbigen Labels eventuell zu klein werden. Deshalb habe ich im Screen-CSS die Klammern entfernt, eine kleine Schrift eingestellt und den Text in Großbuchstaben umgewandelt.

Horizontale Streifen

Für die verschiedenen internationalen Wettbewerbe und den Meister gibt es verschiedene Farbkodierungen. Diese werden über einfache Farbschemata im CSS festgelegt, beispielsweise:

tr.meister         { background: #ff8;    }
tr.meister .verein { background: #e9eb7f; }

Durch das tr.klasse im Selektor wird diese Anweisung wichtiger eingeschätzt als die allgemeineren Selektoren tr und .verein.

Fazit

Kleine, effektvolle Änderungen machen aus Tabellen übersichtliche und gut erfassbare Seitenbestandteile, die sich auch in die restliche Gestaltung der Seite sehr gut einfügt.

Kommentare

Jan
am 12.12.2007 - 00:20

Wahnsinn wie alt die Daten sind.. aus dem Jahr als unser KSC abgestiegen ist. Traurige Sache!

Permanenter Link

Marc
am 12.12.2007 - 00:25

Wahnsinn wie alt die Daten sind.. aus dem Jahr als unser KSC abgestiegen ist. Traurige Sache!

GENAU das habe ich auch gerade gedacht... Also schauen wir nach vorne und erfreuen uns der aktuellen Saison ;-)

BTT @Webkrauts: Euer Beispiel ist nicht existent (/beispiele/tabelle-gestalten/), was zudem noch zu Tage fördert, dass Ihr gar keine 404-Seite habt ;-) Aber da ich im Glashaus sitze (zumindest mit o.g. Link) bin ich ganz ruhig.

Permanenter Link

Eric Eggert
am 12.12.2007 - 01:02

Marc: Danke für den Hinweis, ich wusste, dass ich irgend etwas vergessen hatte :) Das Beispiel ist jetzt da.

Permanenter Link

Moritz
am 12.12.2007 - 07:41

Danke, dass ich den FCK mal wieder ganz oben sehen kann :-), achso, guter Artikel!

Permanenter Link

Mario
am 12.12.2007 - 08:20

Leider gibt es im oben verlinkten Beispiel ein paar Darstellungsfehler im Firefox. Im IE7 funktionierts :-)

Und valide is das Markup leider auch nicht. Sind aber nur Kleinigkeiten.

Permanenter Link

/T
am 12.12.2007 - 09:46

Ich hatte Eric bereits während der Schlußredaktion darauf hingewiesen, dass die einzig wahre Abschlußtabelle 1977/78 bei ›Einfach für Alle‹ zu finden ist, aber er wollte ja nicht auf mich hören ... :-)

Permanenter Link

.carsten
am 12.12.2007 - 10:26

FCK ganz oben und Bayern ist trotzdem Meister... :-) Also das mit dem FCK geht sooo nicht...

Der Artikel ist zwar gut, beschreibt natürlich aber anhand der Bundesliga ein fesch aufzubereitendes Thema, daß einem entgegen kommt. Habe neulich für einen Kunden eine Referenzenliste erstellt, die aus endlos vielen trockenen Daten und Fakten besteht. da war nix fesch aufzubereiten, leider. :-(

Permanenter Link

n3or
am 12.12.2007 - 20:12

Muss das th, td { padding: 0.1em 0.5em 0.333em; } gemäß deiner Angaben nicht so aussehen: th, td { padding: 0.1em 0.333em 0.5em; }?

mfg
n3or

Permanenter Link

Eric Eggert
am 12.12.2007 - 20:41

n3or: Du hast vollkommen recht. Deshalb hab ich gerade den Text geändert...

Permanenter Link

Daniel
am 12.12.2007 - 21:18

Nun, ich will ungern der Spielverderber sein, aber die Tabelle im Beispiel sieht in IE und Firefox dann doch ziemlich anders aus und im Firefox nichts wirklich schön.

Permanenter Link

Webstandard-Team
am 13.12.2007 - 12:57

Ein einfaches M, P und A, mit einer Beschreibung für die Abkürzungen der Begriffe Meister, Pokalsieger und Aufsteiger unterhalb der Tabelle hätte vollkommen ausgereicht. Die zwei span-Tags könnten eingespart werden, in dem M, P oder A mit dem Pseudoelement :first-letter separate CSS-Eigenschaften zugewiesen werden. Ohne dafür zusätzlichen HTML-Code erzeugen zu müssen. Ansonsten eine sehr übersichtliche Tabelle, dessen Stand sich wohl jeder Kaiserslautern-Fan wünschen würde ;o)

Permanenter Link

Matthias Koch
am 13.12.2007 - 23:11

Ich habe in meinen Lesezeichen folgenden ergänzenden Verweis gefunden:

CSS-Tabellen Galerie

Eric, deine Aufhübschung find ich wegen der grafischen Präsentation Klasse auch für Nicht-Fußballer. :-)

Permanenter Link

Daniel Kling
am 14.12.2007 - 12:01

Hi,

wenn man jetzt im Beispiel noch die "ß" in den beiden URLs in der Fußzeile in die entsprechenden Hexcodes ändert (Fußball -> Fu%C3%9Fball), dann ist alles schön :-)

LG,
Dan

Permanenter Link

Eric Eggert
am 14.12.2007 - 12:11

Daniel: Warum sollte ich das tun? Das ß ist ein erlaubtes Zeichen in URLs. Es gibt keinen mir bekannten Grund es anders zu schreiben.

Permanenter Link

Daniel Kling
am 15.12.2007 - 13:18

Meine Aussage bezieht sich auf das Ergebnis des HTML-Validators von Firefox, der mir zwei Fehlermeldungen ausgibt:

line 313 column 61 - Warnung: <a> escaping malformed URI reference
line 313 column 402 - Warnung: <a> escaping malformed URI reference

Ein Test mittels W3C-Validator gibt jedoch ein ordentliches Ergebnis mit 0 Fehlern aus. Nun sitz ich natürlich da und frag mich, welchem Test ich trauen soll ;-).

Habe auch schon ein wenig recherchiert:
Firefox kodiert Sonderzeichen automatisch beim Aufruf, Internet Explorer lässt sie sowohl kodiert als auch unkodiert durch. Ich glaube aus diesem Grund hab ich mich vor einer Weile dazu entschieden, diese Zeichen in Links immer kodiert anzugeben.

Permanenter Link

Matthias Koch
am 20.12.2007 - 08:03

@Daniel

Ist die FF-Browser-Erweiterung kompatibel zu deiner Browserversion, eventuell weiteren Add-Ons und sonstigen Einstellungen, die du im Browser verändert hast (z.B. Zeichenkodierung)?

Ein Test mittels W3C-Validator gibt jedoch ein ordentliches Ergebnis mit 0 Fehlern aus. Nun sitz ich natürlich da und frag mich, welchem Test ich trauen soll.

Erweiterungen würde ich grundsätzlich misstrauen, weil jedes System empfindlich gegen äußere Eingriffe ist - aber das ist nur meine persönliche Meinung. Da im Quelltext der Seite der Zeichensatz festgelegt ist, können Browser die Zeichen auch zuordnen. Kodieren ist also dann nicht nötig, maskieren schon.

Es kommt auch darauf an, in welchem Format ein Dokument gespeichert wird. Im WindwosEditor gibt es z. B. ANSI und UNIX als Speicherformat. Je nach Server können bei Speicherung im "verkehrten" Format auch seltsame Zeichen im Browser erscheinen. Ein Validator sagt dann z.B.

...Found one or more Bits in Line XX I cannot interpret as UTF8.

Es wurde dann entweder nicht maskiert oder im "ungeschmeidigen" Format serviert. :-)

Permanenter Link

Eric Eggert
am 20.12.2007 - 08:41

Matthias:

Das stimmt so nicht.

Erweiterungen würde ich grundsätzlich misstrauen, weil jedes System empfindlich gegen äußere Eingriffe ist

Der einzige zuverlässige Dienst für die Validierung von HTML ist der offizielle W3C-Validator - Er ist nicht umsonst „offiziell”. Der Firefox HTML-Validator ist kein Validator sondern ein „Tidy“-Implementation (http://tidy.sourceforge.net/), was ein Programm ist um Webseiten valide zu machen bzw. aufzuräumen. Dort wo es nicht weiter kommt gibt es dann Fehler aus, manchmal sind das aber keine, sondern Mängel von Tidy.

Da im Quelltext der Seite der Zeichensatz festgelegt ist, können Browser die Zeichen auch zuordnen. Kodieren ist also dann nicht nötig, maskieren schon.

Die HTML4-Spezifikation erlaubt – bis auf wenige Ausnahmen – alle Unicode-Zeichen in URLs (Quelle):

HTML4 expands the allowable range to include all of the Unicode character set

Allerdings ist die Verwendung der Zeichen des ISO-8859-1-Standards empfehlenswert, da er auch für URLs besser implementiert zu sein scheint. (Er enthält ja aber die deutschen Umlaute und das Eszett.)

Es kommt auch darauf an, in welchem Format ein Dokument gespeichert wird. Im WindwosEditor gibt es z. B. ANSI und UNIX als Speicherformat. Je nach Server können bei Speicherung im "verkehrten" Format auch seltsame Zeichen im Browser erscheinen.

Das ist völlig falsch. ANSI und Unix im Windows-Editor beziehen sich nur auf die Zeilenenden. Unix setzt ans Ende einer Zeile nur ein LF (Zeilenvorschub), ANSI-Systeme LF+CR (Zeilenvorschub, Wagenrücklauf) (mehr bei Wikipedia). Mit dem Zeichensatz hat das aber überhaupt nichts zu tun. Dafür gibt es im Windows-Editor die Einstellung UTF-8 und Windows-Zeichensatz (oder so, ich arbeite gerade an einem Mac).

Grundsätzlich haben Zeichensatz und Dateiformat nichts miteinander zu tun.

Permanenter Link
Stefan David

Stefan David (Webkraut)
am 20.12.2007 - 10:21

Der einzige zuverlässige Dienst für die Validierung von HTML ist der offizielle W3C-Validator - Er ist nicht umsonst „offiziell”. Der Firefox HTML-Validator ist kein Validator sondern ein „Tidy“-Implementation (http://tidy.sourceforge.net/), was ein Programm ist um Webseiten valide zu machen bzw. aufzuräumen.

Man kann beim HTML-Validator statt des Tidy-HTML-Parsers einen SGML-Parser auswählen. Das ist lt. Autor des Add-ons der gleiche, der auch beim W3C-Validator zum Einsatz kommt (http://openjade.sourceforge.net/).

Bei etlichen Stichproben, die ich gemacht habe, lieferte die Erweiterung das gleiche Ergebnis und die gleichen Meldungen wie der W3C-Validator.

Permanenter Link

Matthias Koch
am 20.12.2007 - 16:07

Eric:

Also oben war die Rede von Validator. Ich selbst habe die WebDevToolbar von Chris Pederick im FF win. Dort kannst unter Einstallungen > Extras die Standardabfrage des W3C-Validators verwenden, oder andere angeben, z.B. Validome und ggf. Parameter angeben. Standardmäßig steht dort (in meiner Version 1.1.4) auch für HTML validieren: http://validator.w3.org/check?verbose=1&uri=. Wo ist also das Problem?
Der einzig zuverlässige Dienst ist mitnichten alleinig der W3C-Validator, denn zuverlässig heißt nicht dem Zufall überlassen. Oft genug ist dieser Dienst überlastet, nicht erreichbar - warum nicht auf Validome ausweichen, wenn dieser auch gemäß der Spezifikation und dazu auch in meiner Sprache verfügbar ist und sicher nicht ungenauer?

Die HTML4-Spezifikation erlaubt – bis auf wenige Ausnahmen – alle Unicode-Zeichen in URLs

Das ist unbestritten - aber sobald XHTML, XML usw. verwendet wird - sollte jeder kleine Fehler vermieden werden, damit der Browser ∇ ∉ usw. nur dann anzeigt, wenn es ausdrücklich gewollt ist.

HTML4 expands the allowable range to include all of the Unicode character set

. Bei Scripts verlasse ich mich da nicht nur die Theorie, sondern den praktischen Einsatz.

Es sollte natürlich nicht UNIX dort stehen, sondern UTF-8 bzw. Unicode. Und das ist ein anderes Thema, stimmt, aber es hat doch wieder mit Kodierung zu tun (ich schrieb missverständlich "Format"), das war mein Gedanke. Ich hatte da mal ein supi php-Script und falsch kodiert - auf dem PC geschrieben und gespeicjhert, aber eben nicht geschmeidig genug für den Nicht-Windows-Server. Natürlich ging gar nichts mehr und es lag auch daran, dass sich der im Header des Servers festgelegte Zeichensatz (ISO-8859-1) vom dem im Dokument angegebenen Zeichensatz (UTF-8) unterschied. (Ganz schlechter Stil, aber ist hoffentlich etwas klarer, was ich meinte).
Heute morgen war es so früh! :-)

Permanenter Link

Beate
am 23.12.2007 - 16:59

@Eric: dein Link zum Snookerblog geht auch nicht... :)

Permanenter Link

Die Kommentare sind geschlossen.