Yale C/AIM Web Style Guide

Überblick

Page Design

Einführung

Grafikgestaltung 100

Ausgewogenheit der Seiten

Design-Gitternetze für Seiten

Sicherheitsbereiche für Grafiken

Kopfzeilen

Typographie I

Typographie II

Schriftarten

Einheitlichkeit

Grundlegendes zu Tabellen

Länge der Seiten

Plattform-
übergreifende Fragen


Frames

Komplexe Tabellen

Der Inhalt dieses Handbuchs ist zur Gänze in unsichtbaren Tabellen erfaßt. Dadurch haben wir die Kontrolle über das Layout der Seiten. Ohne Tabellen ergießen sich Text und Grafiken mehr oder weniger über den Bildschirm des Benutzers, und das tatsächliche Layout der Seiten hängt insgesamt von der Länge und Breite des Browserfensters ab. Alle Fragen von Lesbarkeit, Übersichtlichkeit und Stil, die wir in diesem Handbuch besprochen haben, hängen von der Fähigkeit ab, Wörter, Bilder und Bildschirmelemente so auf der Seite zu plazieren, daß die etablierten typografischen Konventionen eingehalten werden. Aufgrund der Beschränkungen von HTML sind Tabellen das einzige Layout-Werkzeug, das den Sitedesignern zur Verfügung steht.

Die Verwendung von Tabellen für das Seitenlayout
Tabellen sind derzeit die einzige HTML-Option um ein Layout zu erstellen. Stellt man einfach einen Textblock auf eine Seite, so wird die Länge der Zeilen von den Abmessungen des Browserfensters des Benutzers bestimmt. Wenn er die Größe seines Fensters verändert, ordnet sich der Text neu, um den nun gewonnenen Raum auszufüllen. Auch wenn manche dies für ein Feature halten, behindert es in Wirklichkeit die Auseinandersetzung des Benutzers mit dem Text. Feste Druckkonventionen sind oft eine komfortable Lösung um sich auf den Inhalt zu konzentrieren. Wenn Sie die Standards nicht einhalten, kann es sein, daß Sie Ihre Leser verärgern und letzten Endes verlieren.
Um das zu vermeiden, können Sie Tabellen zur Definition Ihrer Seitenbereiche verwenden. Nutzen Sie Tabellenzellen, um Ränder zu definieren und stellen Sie Ihren Text in Zellen, um die Zeilenlänge zu begrenzen (im Idealfall 10 bis 12 Wörter pro Zeile) und um Elemente auf der Seite zu positionieren.

Zellenattribute und Tabellenabmessungen
Das Verhalten der Tabelle hängt größtenteils davon ab, wie ihre Zellen definiert sind. Für Layoutzwecke sollten Sie die Zellenbreiten mit absoluten Werten definieren. Darüber hinaus sollte die Zellen ein Ein-Pixel-GIF enthalten, das ihrer Breite entspricht. So stellen Sie sicher, daß die Tabellenabmessungen sich nicht verändern, wenn die Größe des Browserfensters anders eingestellt wird.

Seite mit Table-Beispielen

Keine Linien, bitte!
Wenn wir über Tabellen sprechen, die Möglichkeiten die HTML für die Präsentation von tabellarischen Inhalten zu bieten hat. Wir verwenden Tabellen, um die Beschränkungen von HTML zu überwinden und zwar auf eine Weise, die nicht ihrer eigentlichen Bestimmung entspricht. Wir sprechen hier von unsichtbaren Tabellen, deren einziger Zweck darin besteht, uns die Kontrolle über einzelne Seitenelemente zu ermöglichen. Vergewissern Sie sich, daß BORDER="0" eingestellt ist.
Wenn wir schon beim Thema sind: Tabellenränder sind häßlich und unnötig - sogar im Kontext der Tabellenerstellung, für die sie vorgesehen waren. Es wirkt viel sauberer, für die Begrenzung von Informationen Abstände, Ausrichtungen und Einzüge zu verwenden.


Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autemDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autemDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Bundstege
Beim Druck wird der Abstand zwischen einzelnen Spalten als Bundsteg bezeichnet. Man kann Tabellen für die Erstellung von Bundstegen verwenden, indem man 1. eine Zelle hinzufügt, die als Bundsteg dient ( Cell Gutter) oder 2. indem man die Attribute Cell Padding (Abstand zwischen Zelleninhalt und Zelle) oder 3. Cell Spacing (den die Zelle umgebenden Raum) verwendet.

1 1 Tabelle mit Cell Gutter

2 2 Tabelle mit CellPadding = 8

3 3 Tabelle mit CellSpacing = 8

Referenzen

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books. www.killersites.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.