Webkrauts

Warenkörbe als Datentabelle – und wie man es mit HTML & CSS schön umsetzt

Shop-Systeme sind immer mit einer Menge Arbeit verbunden. Oft freuen sich Webworker und Kunde gegen Ende, wenn die einzelnen Bereiche tatsächlich so funktionieren, wie sie sollen. Das Design bleibt dabei manchmal auf der Strecke. Nils Pooker zeigt, wie ein Warenkorb in wenigen Schritten aufgehübscht werden kann.

Das Letzte, das der Nutzer eines Online-Shops vor dem Button »Bestellung absenden« zu sehen bekommt, ist der so genannte Warenkorb. Der Warenkorb stammt, wie die meisten anderen Elemente eines Shopsystems, aus dem Bereich des klassischen Einkaufserlebnisses in einem Ladengeschäft und wird meist in Form einer Datentabelle generiert und angezeigt.

Da der Warenkorb die Summe der im Shop gesammelten Waren bildet, sollte er im Idealfall noch einmal den Kaufanreiz erhöhen, wirklich alle Produkte auch tatsächlich zu bestellen. Diese Funktion wäre also mit der Wirkung eines perfekt dekorierten Hochzeitstisches zu vergleichen, auf dem ein Brautpaar alle gewünschten Objekte der Kaufbegierde von Deko-Spezialisten des Ladengeschäftes so präsentieren lässt, dass die Gäste möglichst viel und gerne einkaufen.

Nutzer besitzen also nicht nur ein Grundrecht auf angemessene Gestaltung des Warenkorbs – es ist auch verkaufsfördernd, auf eine benutzerfreundlich und motivierend gestaltete Produktanzeige zu achten. Soweit jedenfalls die schöne Theorie.

Der Warenkorb als Datenkasten

Betrachten wir uns die Praxis vieler Online-Shopsysteme, begegnet uns leider oft genug ein Warenkorb, der ein ähnlich sprödes Einkaufserlebnis vermittelt, wie der verregnete Spaziergang durch eine ostrussische Plattenbausiedlung im November. Da empfängt uns ein Tabellenkonstrukt mit Rändern, die wie Eisenstäbe die sprichwörtlichen Zellen umschließen, einbetoniert in das kahle Nichts einer trostlosen Seite. Die Hintergrundfarbe solcher Tabellen reicht von depressivem Eternitgrau bis zu tristem Bahndammgrün, macht aber auch vor großen Flächen in Windows-95-Blau und Feuerlöscherrot keinen Halt. Kurz gesagt: Allein das Vorhandensein solcher Warenkörbe grenzt für sensible Nutzer an optische Körperverletzung und sorgt schon vor dem Bestellvorgang eher für Frust als für positive Kaufanreize.

Moderne Webseiten trennen den Inhalt strikt vom Design. Die Ausgabe der HTML-Tabellen können Sie deshalb bequem per CSS optisch ansprechend gestalten. Der hier vorgestellte Umfang der Gestaltung richtet sich freilich auch nach der Flexibilität Ihres Shopsystems.

HTML stellt uns zunächst verschiedene Elemente zur Strukturierung von Tabellen zur Verfügung. Neben <td>, <tr> und <tbody> gibt es mit <thead> und <tfoot> die weniger bekannten Kopf- und Fußelemente einer Tabelle, die vor den Inhalten von <tbody> steht.

Exkurs: Tabellen und Barrierefreiheit

Man sollte bei Tabellen nicht nur die gestalterischen Aspekte betrachten, bei der Planung ist auch auf eine barrierefreie Umsetzung für Menschen mit Behinderungen zu achten. Ideal ist es, wenn Ihr Warenkorb mit dem Element <caption> eine sinnvolle Überschrift zu Beginn der Produkttabelle bietet, und das Element summary im <table>-Tag assistiven Technologien ein rasches Auslesen einer Zusammenfassung erlaubt. Mit dem Attribut scope kann man Tabellenbereiche schließlich noch für assistive Technologien so zusammenfassen, dass beispielsweise Screenreader-Nutzer vorhandene Zelleninformationen der entsprechenden Kopfzeile zuordnen können. Dieser Bezug wird durch col oder row festgelegt, je nachdem ob die Kopfzeilen sich auf Spalten oder Zeilen beziehen.

Eine neue Digitalkamera

Als einfaches Beispiel soll hier der Warenkorb eines x-beliebigen Shops für Digitalkameras und Zubehör umgesetzt werden. Unser Warenkorb enthält nach dem Einkauf des Nutzers neben einer aktuellen Fuji-Kamera noch zwei Speicherkarten, ein Ersatzakku und eine passende Kameratasche. Die schlichte, aber gut strukturierte und barrierefreie Warenkorb-Tabelle sieht dann ohne jegliche Gestaltung so aus:

Zur Gestaltung: border: 1px solid #555; definiert den 1-Pixel-Rand, border-collapse: collapse; sorgt dafür, dass mögliche Rahmen innerhalb der Tabelle zusammenfallen.

Datentabellen hübsch machen

Schlanker HTML-Code und ein paar Zeilen CSS garantieren also noch keine schöne Datentabelle, doch mittels CSS kann man die Gestaltung noch weiter verbessern. Beachten Sie bei allen Möglichkeiten von CSS allerdings immer, dass Sie hier einen kommerziellen Warenkorb gestalten und nicht eine schicke Designer-Webseite. Wichtig sind also Usability- und Zugänglichkeits-Aspekte der Datentabelle – analog zum Zitat »form follows function« hat die Gestaltung dieser Funktion zu folgen, nicht umgekehrt. Schick aussehen darf es aber trotzdem.

Da die Tabelle über mehrere Elemente verfügt, lassen sich diese Elemente per CSS separat gestalten, auch ohne in den HTML-Code einzugreifen. Dieses Vorgehen ist wichtig, weil Sie bei vielen Shopsystemen oft nur eingeschränkt in den Code eingreifen können. Das wichtigste für den Nutzer ist die transparente Darstellung der Preise und die klare Zuordnung der gewählten Produkte. In der üblichen Darstellung werden die Preise der Tabelle per text-align: right; rechtsbündig dargestellt, nur die Tabellenüberschrift <caption> soll linksbündig über der Tabelle stehen. Mittels padding können Sie die Innenabstände für die Tabellenzellen festlegen und verschiedene Farben für Zellenhintergründe und -ränder definieren. Die Gestaltung der Schrift dient schließlich der eindeutigen Klassifizierung der Zellinhalte.

Unser Warenkorb sieht nun so aus:

Die Links, die in den Zellen des Warenkorbes normalerweise wieder zur Produktbeschreibung im Shopsystem führen, zeigen eine Grafik als Hintergrundbild.

Für den Tabellenkopf <thead> wurde übrigens ein Rand definiert. Das Fehlen dieser Definition hätte zur Folge, dass durch die Anweisung border-collapse: collapse; der Tabellenrand zu sehen wäre und daraus folgend eine unschöne Einbindung des Tabellenkopfes. Vermieden wird das mit Hilfe von:

Zucker zum Kaffee: Das HTML bearbeiten

Unser Warenkorb hat sich gestalterisch bereits von der mausgrauen Kastenoptik der ursprünglichen Tabelle abgesetzt. Sofern Sie keine andere Möglichkeit haben, in den HTML-Code Ihres Shops einzugreifen, sind Ihre weiteren Möglichkeiten hier natürlich begrenzt. Sie können noch durch Hintergrundgrafiken einzelne Tabellenteile optisch aufwerten oder auf die allgemeine Browserunterstützung von CSS3 warten. Hierauf gehe ich noch kurz gesondert ein. Sofern Sie den HTML-Code für die Datenausgabe des Warenkorbes bearbeiten können, haben Sie durch zusätzliche Klassen die Möglichkeit, die Darstellung der Tabelle weiter zu verfeinern. Das selten genutzte Element <colgroup> können Sie nicht nur dazu verwenden, mittels der Attribute width und span dem Browser Anzahl und prozentuale Größe der Tabellenspalten mitzuteilen, die Attribute steuern damit auch die optische Darstellung der Spalten. Die erste Spalte mit der Angabe der Produktmenge soll möglichst nicht breiter sein als das <input>-Feld. Dafür muss die Bezeichnung im Tabellenkopf auf »Anz.« abgekürzt werden. Die breiteste Spalte soll den Produkten vorbehalten sein. Einzel- und Gesamtpreis sollen dagegen eine einheitliche Breite erhalten. Im HTML-Code sieht das dann so aus:

Da wir in unserem Warenkorb nur die Preise rechtsbündig dargestellt sehen wollen, können Sie auch eine entsprechende Klasse <td class="preis"> mit der CSS-Anweisung text-align: right; für diese Spalten definieren.Wenn Sie schon den HTML-Code bearbeiten, können Sie auch gleich den »Zebra-Effekt« farblich unterschiedlicher Zeilen umsetzen, der für eine bessere visuelle Orientierung in Datentabellen sorgt.
Damit haben wir dann Zellen mit <td class="zebra">, bzw. <td class="preis zebra"> definiert. Für die Tabellenzellen definieren wir einen zarten Verlauf als Hintergrundgrafik, die »Zebra-Zellen« sollen dagegen in einem leichten Grünton und ohne Hintergrundgrafik dargestellt werden.

Wenn der Tabellenkopf eine Hintergrundgrafik enthält, sollten Sie die Tabellenbreite in em definieren, um bei Schriftskalierung ein Überlappen des Textes über das Bild zu vermeiden. Erweitert wird auch die Gestaltung des Tabellenfußes, der ein dekoratives und zum Thema passendes Hintergrundbild erhält:

Die dortige Tabellenzelle mit der Gesamtsumme des Warenkorbs wird über eine id="total" separat gestaltet, ohne Hintergrundbild und mit differenzierter Hintergrundfarbe:

Das Ergebnis sieht dann so aus:

CSS3: Warenkorb der Zukunft

Tabellen in Zebraoptik sind sehr gut wahrnehmbar, aber es ist nur selten möglich, zusätzliche Klassen in einer Datentabelle generieren zu lassen. Es gibt zwar JavaScript-Lösungen, doch da ist die Angemessenheit der Mittel zumindest diskussionswürdig.

Noch nicht ganz alltagstauglich, aber dennoch interessant sind deshalb die Möglichkeiten reiner CSS3-Lösungen, die bereits von einigen aktuellen Browsern unterstützt werden. Komplett und korrekt werden die nun folgenden Möglichkeiten bisher allerdings nur vom Firefox 3.1 (beta), Google Chrome und dem aktuellen Safari-Browser ab Version 3.1 dargestellt.

Für gestreifte Tabellenzeilen bietet CSS3 das Pseudoattribut :nth-child. Dieses Pseudoattribut wird auch im Opera-Browser korrekt dargestellt:

Immer wieder gefragt sind auch abgerundete Ecken, die ebenfalls nur über JavaScript-Lösungen oder mit reichlich zusätzlichem Markup umgesetzt werden können – für einen Warenkorb sicherlich zu aufwendig. CSS3 bietet auch hier eine schnelle und unkomplizierte Lösung, die zusätzlich mit interessanten Schatteneffekten kombiniert werden kann. Wir ergänzen lediglich einen zusätzlichen, die Tabelle umschließenden, DIV-Container:

Das Ergebnis sieht dann im Safari so aus:

Fazit

Mit zeitgemäßenWebstandards lassen sich auch triste Datensätze in einfach strukturierten Tabellen ansprechend und professionell gestalten. CSS2 bietet bereits heute eine Unmenge von gestalterischen Möglichkeiten – man sollte aber schon einen Blick in die Zukunft und damit auf CSS3 werfen, auch wenn die Umsetzung bei relevanten Inhalten noch nicht hoffähig ist.

Sämtliche Beispieldateien sind auch als ZIP-Datei erhältlich:
www.webstandards-magazin.de/artikel/01-09-warenkorb.zip

Hinweis zum Artikel: Dieser Text erschien zuerst im Webstandards-Magazin 01/2009.