Tabellen im Web – Teil 1 – Eine Einführung

von Thomas | 1 | 7873 Aufrufe

1 Einführung

Anzeige Hier werben

1.1 Wozu Tabellen?

Die strukturierte Darstellung von Daten mittels Tabellen ist ein probates Mittel, um komplexes Zahlenmaterial übersichtlich zu visualisieren. Die Gestaltung von Tabellen ist in der Typographie ein eigenes, oft unterschätztes Themenfeld, welches es sich näher zu beleuchten lohnt. Auf dieser Seite möchten wir die Probleme aber auch Möglichkeiten der Tabellengestaltung im Web ansprechen und so dem interessierten Gestalter eine Hilfestellung in seiner täglichen Arbeit geben.

Voraussetzung für die Lektüre dieser Seite sind Kenntnisse der Beschreibungssprache (X)HTML und der grundlegenden Struktur einer Web-Seite.

Als Quelle für die Einarbeitung in (X)HTML möchten wir SELFHTML (http://de.selfhtml.org) empfehlen. Zudem werden wir an dieser Stelle lediglich auf tabellenspezifische CSS-Definitionen eingehen. Als Einstiegspunkt in die allgemeine Gestaltung von Web-Inhalten mittels CSS empfehlen wir ebenfalls SELFHTML: http://de.selfhtml.org/css. Eine übersichtliche CSS-Referenz ist überdies unter http://www.css4you.de zu finden. Alle auf dieser Seite abgebildeten Beispiele sind (sofern möglich) in validem XHTML 1.0 angegeben.

Vor einigen Jahren war es noch üblich, sogenannte „blinde Tabellen“ für die Strukturierung des gesamten Layouts einer Website oder mehrspaltige Texte zu missbrauchen. Nachdem dies im Zeitalter des bewussten und verstärkten Einsatzes von Stylesheets und der zunehmenden Konzentration auf den barrierefreien Zugang zu Webseiten jedoch inzwischen ungern gesehen wird, scheinen häufig grundsätzliche Vorbehalte gegenüber dem Einsatz von Tabellen im Web zu bestehen.

Dabei sind Tabellen nach wie vor ein wertvolles Mittel, um komplexe Daten übersichtlich aufzubereiten und sie auf wenige Blicke jedem zugänglich zu machen. Da es in den meisten Fällen um rein qualitative Aussagen zu einem Thema geht, sollten in Tabellen ausschließlich absolute Werte Verwendung finden. Das Ergebnis – die gut wohlgestaltete Tabelle – soll dem Leser ein nützliches Arbeitsmittel sein.

1.2 Begriffe und Definitionen

Im Printbereich (Drucker, Setzer, Grafiker, ...) wurden über die letzten Jahrhunderte feste Definitionen für alle Bereiche der Typographie gefunden und gefestigt. So gibt es denn auch eindeutige Benennungen für die einzelnen Bestandteile einer Tabelle, um den Umgang mit diesen zu vereinheitlichen und zu erleichtern.

Auch in der Web-Welt haben sich für diesen Bereich Begrifflichkeiten etabliert, welche jedoch im Detail durch im Web entstandene Notwendigkeiten von den Definitionen im Print abweichen.

Die Tabelle gliedert sich in Tabellen-Kopf, -Körper und -Fuß. Der Kopf wird durch die Kopfabschlusslinie (auch Halslinie) vom Tabellenkörper getrennt. Da der Nutzer später hauptsächlich mit den Daten des Tabellenköpers arbeiten wird, sollte der Tabellenkopf klar aber tendenziell zurückhaltender gestaltet werden.

Tabellenstruktur

Die kleinste Einheit einer Tabelle ist die einzelne Zelle. Horizontal nebeneinander liegende Zellen nennt man Spalte (Kolonne), vertikal zueinander angeordnete Zellen werden als Zeile (Reihe) bezeichnet.

Zu einer Tabelle gehören neben einer aussagekräftigen Überschrift auch alle notwendigen Quellenverweise und (je nach Komplexität) eine Kurzbeschreibung des Inhaltes.

Im Gegensatz zu der gängigen Tabellendefinition im Print-Bereich gibt es zwei relevante Unterschiede zu beachten:

  1. Das einzelne Feld wird hier als Zelle bezeichnet, und
  2. Der Tabellenkörper entspricht dem Tabellenfuß im Print-Bereich.

Der überdies gesondert definierte Tabellenfuß (s.u.) in einer Web-Tabelle wird häufig analog zum Tabellenkopf zur Spaltenbeschriftung oder für zusammenfassende Angaben aus den darüberliegenden Zellen genutzt.

1.3 Grundlegende Probleme mit Typographie im Web

Die größte Herausforderung bei der typographischen Gestaltung von Webseiten stellt der Wunsch nach identischer Darstellung bei jedem Leser dar. Wie bei einer gedruckten Publikation sollen Schriftart, Schriftgröße, Umbruch, Farbe, Abstände, etc. exakt und wie vom Gestalter gewünscht auf jedem Bildschirm angezeigt werden.

Das Word-Wide-Web-Consortium (W3C) hat für diesen Zweck Standards definiert, an welchen sich die Browserhersteller orientieren sollen. Leider werden diese Standards aber auch heute noch nicht konsequent von allen Browsern unterstützt und so ergeben sich unterschiedliche Ergebnisse in der Anzeige bei identischem Quellcode.

Schriftart

Bei der Wahl der Schriftart ist man in der Regel auf die sog. „Web-sicheren Schriften“ angewiesen. Als solche bezeichnet man Schriftarten, die auf den beiden meist verbreitetsten Betriebssystemplattformen – Microsoft Windows und Mac OS – gleichermaßen verfügbar sind.

Somit beschränkt sich die Auswahl auf eine handvoll Schriften, die den individuellen Charakter eines Internetauftritts nicht unbedingt unterstützen.

Unter http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html hat Alberto Martinez Perez eine Liste der Systemschriften von OS X und Windows sowie ihre Entsprechungen auf dem jeweils anderen System zusammengestellt.

Auflösung

Die Auflösung von heute gängigen Anzeigegeräten reicht bei Weitem noch nicht an die Brillianz einer gedruckten Publikation heran. Arbeitet man im Print gerne auch mal mit Strichstärken unterhalb der 0.5pt, so ist man im Web auf den einzelnen Pixel als kleinste Einheit festgelegt – halbe oder gar viertel-Pixel lassen sich physikalisch nicht darstellen.

Werte kleiner einem Pixel können nur mit Hilfe von Farbabstufungen oder Aufhellung der Farbe simuliert werden.

Ein interessanter Artikel von Gerrit van Aaken über Auflösungen, Pixel, Inch und Artverwandten ist unter http://praegnanz.de/essays/72dpi zu finden.

1.4 Mögliche Lösungsansätze knapp beleuchtet

Schriften
Grafiken

Um beliebige, also auch nicht „web-sichere“ Schriften (s.o.), abbilden zu können, greift man heute zumeist auf die Darstellung mittels einfachen Grafik-Dateien zurück. Dabei werden die entsprechenden Text-Elemente nicht vom Browser gerendert, sondern bereits zuvor von einem Grafik-Programm wie Photoshop fixiert und in einer Grafik-Datei gespeichert. Ein nicht zu unterschätzender Vorteil dabei ist, dass jede typographische Feinheit berücksichtigt und festgelegt werden kann – was den Einsatz von schriftenthaltenden Grafiken trotz aller Browser-Standards auf längere Sicht zunächst als beste Alternative bestehen lassen wird.

sIFR

Scalable Inman Flash Replacement (sIFR) ermöglicht die Einbindung beliebiger Schriften in Webseiten. Mit Hilfe von JavaScript und Flash lassen sich so browser- und systemübergreifend Schriften verwenden, die nicht auf dem Rechner des Lesers selbst installiert sind.

Alle Informationen sowie die notwendigen Dateien zur Einbindung von Schriften via sIFR sind unter http://www.mikeindustries.com/blog/sifr zu finden.

Ein weiterer nennenswerter Vorteil gegenüber Lösungen mit Bildern ist, dass im Falle von deaktiviertem JavaScript oder nicht installiertem Flash-Plugin der ursprüngliche HTML-Text angezeigt wird. sIFR eignet sich auf Grund der rechenintensiven Flash-Darstellung jedoch zumeist nur für Überschriften oder einzelne Text-Elemente einer Seite und sollte nicht für Mengentexte eingesetzt werden.

Weitere ähnliche Artikel

Tabellen im Web – Teil 1 – Eine Einführung

Einige Erläuterungen zu den Möglichkeiten und Notwendigkeiten der Gestaltung von Tabellen im Web, für alle diejenigen, die sich auch an ordentlichen Tabellen in Drucksachen erfreuen würden und ebenfalls der Meinung sind, dass das Web dem nicht zu weit nachstehen sollte. [lesen]

Tabellen im Web – Teil 2 – Die richtige Code-Struktur

Voraussetzung für die effektive Arbeit an der Abbildung einer Tabelle im Web ist eine strukturierte Vorbereitung. Nach der obligatorischen gedanklichen Einarbeitung und Strukturierung der Vorlage, kann sich der Gestalter an die konkrete Umsetzung und Definition der Grundstruktur der Tabelle mittels (X)HTML wagen. [lesen]

Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML

Obwohl man heute dank CSS (aktuell in Version 2) die Möglichkeit hat, Inhalt und Design strikt voneinander zu trennen, ist es dennoch möglich, alleine mit (X)HTML-Angaben auf das Erscheinungsbild der Tabelle Einfluss zu nehmen. [lesen]

Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS

Geht es darum, gezielt in das Erscheinungsbild einer Tabelle einzugreifen, spielt CSS seine Stärken aus. Seit CSS der Version 2 sind im Standard vielfältige Funktionen zur visuellen Anpassung von Tabellen vorgesehen, die größtenteils auch bereits in den aktuellen Versionen der gängigen Browser implementiert wurden. [lesen]

Tabellen im Web – Teil 5 – Interaktion

Einen nennenswerten Vorteil von tabellarischen Darstellungen im Web stellt die Möglichkeit dar, Inhalte interaktiv zu präsentieren. Tabellen lassen sich mit Hilfe von nutzerseitigen Scriptsprachen (JavaScript) mit Zusatzfunktionen belegen, welche den Nutzwert erheblich erhöhen können. [lesen]

Über den Autor: Thomas
Thomas ist Diplom-Designer (FH) und arbeitet derzeit als Flash Developer/Screendesigner in Frankfurt a.M. Seine Fachgebiete sind interaktive Medien und Design.
Profilseite betrachten