Tabellenrahmen und Textabstände
Bei den Rahmenlinien unterscheidet man zwischen Gitternetzlinien und Rahmen.
Gitternetzlinien
Für Gitternetzlinien gibt es Standardangaben in den Browsern.
Die Anzeige der Gitternetzlinien lässt sich im einleitenden <table>-Tag bestimmen
Mögliche Angaben sind:
- rules="all" (all = alle) werden Linien zwischen allen Tabellenzellen gezogen (Voreinstellung)
- rules="none" (none = keine) - keine Linien, der Gitternetz-Außenrahmen der Tabelle wird jedoch angezeigt
- rules="rows" (rows = Reihen) - Linien zwischen allen Tabellenzeilen
- rules="cols" (cols = columns = Spalten) - Linien zwischen allen Tabellenspalten
- rules="groups" (groups = Gruppen) werden Linien zwischen Kopf, Körper und Fuß einer Tabelle gezogen
Das folgende Beispiel zeigt Rahmen um alle Zellen:
| Hallo | Ballo | Hallo |
| Zeile 2 | auch Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 | auch Zeile 3 |
Und das folgende Beispiel zeigt Rahmen um die einzelnen Spalten:
| Hallo | Ballo | Hallo |
| Zeile 2 | auch Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 | auch Zeile 3 |
Rahmeneigenschaften
Neben den Gitternetzlinien können Sie individuelle Eigenschaften für den Rahmen der Tabelle und der einzelnen Zellen angeben.
Im folgenden Beispiel erhält die gesamte Tabelle keinen Rahmen:
Und die zweite Zelle in der zweiten Spalte verfügt über einen roten Rahmen, der im HTML-Code definiert ist:
| Hallo | Ballo | Hallo |
| Zeile 2 | auch Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 | auch Zeile 3 |
Bitte beachten Sie, dass die Tabelle im Internet Explorer trotzdem einen Rahmen hat, der von den Gitternetzlinien herrührt (s.o). Im Firefox wird hingegen kein Rahmen angezeigt. Wäre die border-Eigenschaft nicht auf null gesetzt, hätte die Tabelle sogar zwei Rahmen.
Die "Probleme" mit den Gitternetzlinien und den Rahmen lassen sich aber per CSS lösen.
Border-collapse
Wenn Sie bei den bisherigen Beispielen genau auf den Bildschirm geschaut haben, wird Ihnen aufgefallen sein, dass die Rahmen der einzelnen Zellen nicht miteinander verschmelzen, sondern dass die Rahmen um die benachbarten Zellen nebeneinander immer zwei Linien aufweisen. Das ist für die Lesbarkeit nicht gut.
Vergleichen Sie die Darstellungen mit doppelten Linien:
| Hallo | Ballo |
| Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 |
mit der Darstellung mit einfachen Linien
| Hallo | Ballo |
| Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 |
Die zweite Version mit weniger Rahmenlinien lässt sich besser lesen. Jetzt müsste nur noch der Text besser positioniert sein.
Textabstände
Der Begriff Textabstände ist nicht ganz exakt, denn jedes HTML-Element hat einen Außenabstand (zum vorhergehenden oder umgebenden Element) und einen Innenabstand (wie weit ist der Inhalt vom gegenwärtigen Element entfernt - einfacher und auf Tabellenzellen bezogen: Wie weit ist der Text vom Tabellenrand entfernt?). Der Außenabstand heißt marginund der Innenabstand padding. Die Abstände können nach oben, rechts, unten und links festgelegt werden.
Mit einem padding von 5 Pixeln sieht unsere Beispieltabelle so aus:
| Hallo | Ballo |
| Zeile 2 | auch Zeile 2 |
| Zeile 3 | auch Zeile 3 |
Das Ergebnis lässt sich wesentlich besser lesen, allerdings ist die padding-Eigenschaft für jede Zelle einzeln festgelegt. Normalerweise erledigt man das per CSS viel einfacher.
Hinweis
Leider interpretieren nicht alle Browser alle Anweisungen gleich, sodass es durchaus Darstellungsunterschiede geben kann. Experimentieren Sie ein bisschen und entscheiden Sie sich für ein nicht zu kompliziertes Layout.
