Zurück ] Inhalt ] Weiter ]

Tabellen

Tabellen werden in Texten oft verwendet, um Fakten übersichtlich darzustellen, z.B. ein Gegenüberstellung von Vor- und Nachteilen. Weiterhin können Tabellen verwendet werden, um insbesondere Grafiken im Dokument anzuordnen.

Zur Übersicht hier die in diesem Abschnitt behandelten Themen:

Erstellen einer Tabelle

Frontpage macht das Definieren von Tabellen einfach. Am schnellsten kann eine Tabelle erzeugt werden, indem man die entsprechende Schaltfläche in der Symbolleiste Standard angeklickt und die Anzahl der benötigten Zeilen und Spalten auswählt. Diese Werte können nachträglich angepaßt werden. Es wird eine leere Tabelle mit der angegebenen Struktur gezeichnet. Für die Zellgröße und Randbreite werden Standardwerte vergeben.

Wählt man beim Erstellen der Tabelle den Weg über das Menü Tabelle, in dem alle Befehle für Tabellen zusammengefaßt sind, hat man schon beim Einfügen der Tabelle mehr Einstellungsmöglichkeiten. Zum Einfügen einer Tabelle wählt man im Menü Tabelle das Untermenü Einfügen/Tabelle. Im erscheinenden Dialog kann man die Eigenschaften der Tabelle einstellen. Sie sind in der Tabelle weiter unten zusammengefaßt. Später können die Tabelleneigenschaften noch geändert werden.

Das Definieren der Tabelle im HTML-Code ist etwas kompliziert. Wir wollen die notwendigen Tags auflisten, die zum Erstellen einer einfachen Tabelle notwendig sind. Die gesamte Tabellendefinition muß in die Tags <TABLE> und </TABLE> eingeschlossen werden. Die Definition der Tabelle erfolgt innerhalb dieser Tags zeilenweise. Umschlossen von den Tags <TR> und </TR> (für table row) werden die Zellen einer Zeile definiert. Dabei werden die Zellen einer Zeile von links nach rechts Zelle für Zelle spezifiziert. Die Zellen der Überschrift werden mit den Tags <TH> und </TH> (für table header) bezeichnet. Die Zellen im Rumpf der Tabelle werden in die Tags <TD> und </TD> (für table data) eingeschlossen. Zwischen den Tags <TH> und </TH> bzw. <TD> und </TD> wird der Inhalt der Zellen eingetragen. Es ist zusätzlich noch sinnvoll, die Tabelle mit Formatierungsanweisungen zu versehen, um das Aussehen des Randes oder die Textausrichtung in den Zellen einzustellen. Diese Einstellungen werden in der folgenden Tabelle zusammengefaßt.

Einstellung Bedeutung Attribut in HTML
Größe (Zeilen und Spalten) Anzahl der Zeilen und Spalten in der Tabelle  ergibt sich aus der Definition der Tabelle
Ausrichtung Ausrichtung der Tabelle innerhalb der Seite. Nur interessant, wenn die Breite der Tabellen kleiner als 100% ist <DIV> Tag, das die Tabellendefinition umschließt
Rahmenstärke Dicke des Rahmens in Pixel, 0 bedeutet kein Rahmen,  BORDER="X", wobei x die Dicke des Rahmens in Pixel ist
Textabstand Abstand des Textes vom Rand der Zelle in Pixel, Standard ist 1 Pixel CELLPADDING="X"
Zellabstand Abstand zwischen den Zellen in Pixel CELLSPACING="X"
Breite Breite der Tabelle in Pixel oder Prozent der Seitenbreite WIDTH="X" bzw. WIDTH="X%"
Tabelleneigenschaften

Wenn die Tabelle eingefügt wurde, kann man die Tabelleneigenschaften nachträglich einstellen. Dazu setzt man den Cursor in die Tabelle und wählt aus dem Kontextmenü den Eintrag Tabelleneigenschaften oder aus dem Menü Tabelle den Menüpunkt Eigenschaften/Tabelle. Der erscheinende Dialog umfaßt neben den bereits beschriebenen Einstellungsmöglichkeiten noch weitere Optionen, die in der nachfolgenden Tabelle aufgelistet sind:

erweiterte Tabelleneigenschaften
Einstellung Bedeutung Attribut in HTML
Textfluß Gibt wie bei Bildern an, wie Text die Tabelle umfließt. Nur interessant, wenn die Tabelle schmaler als die gesamte Seite ist. ALIGN="left" oder ALIGN="right"
Breite bzw. Höhe optionale Angabe der Gesamthöhe bzw. Gesamtbreite der Tabelle in Pixel oder Prozent WIDTH="X" bzw. HEIGHT="Y"
Rahmenfarbe Farbe des Rahmens BORDERCOLOR="#RRGGBB"
Hintergrundfarbe Hintergrundfarbe der Tabelle BGCOLOR="#RRGGBB"

Zelleneigenschaften

Neben der Formatierung der gesamten Tabelle können noch Formatierungen auf Zeilen- bzw. Zellenebene vorgenommen werden. Diese beziehen sich im wesentlichen auf die Ausrichtung von Text innerhalb der Zellen. Markiert man eine oder mehrere Zellen kann über das Kontextmenü der Menüpunkt Zelleneigenschaften oder den Menüpunkt Tabelle/Eigenschaften/Zelle ein Dialog zum Einstellen der Zelleigenschaften aufgerufen werden. Die einstellbaren Eigenschaften sind in der nachfolgenden Tabelle zusammengefaßt.

Zelleneigenschaften
Einstellung Bedeutung Attribut in HTML
Größe (Höhe und Breite) Höhe und Breite der Zelle in Pixel oder Prozent der gesamten Tabelle. Die Einstellung der Breite kann den Platzbedarf der Tabelle erheblich beeinflussen.  WIDTH="X" bzw. HEIGHT="Y"
horizontale Ausrichtung zur Auswahl stehen links- oder rechtsbündig, zentriert oder Blocksatz. Die Bedeutung ist analog zu Absatzformatierungen ALIGN="alignment", alignment kann die Werte "left", right", "center" oder "justify" annehmen
vertikale Ausrichtung zur Auswahl stehen oben, Mitte, Grundlinie und unten VALIGN="alignment", alignment kann die Werte "top", "middle", "baseline" und "bottom"
Zeilenerstreckung verbindet zwei benachbarte Zeilen zu einer Zeile rowspan="X"
Spaltenerstreckung verbindet zwei benachbarte Spalten zu einer Spalte colspan="X"
enthält Überschrift wandelt eine normale Datenzelle in eine Überschriftenzelle um, die Formatierung für Überschriften ist standardmäßig zentriert und fett statt der Tags für Datenzellen (<td> und </td>) werden Tags für Überschriften (<th> und </th>) verwendet
kein Umbruch unterdrückt Zeilenumbrüche in der Zelle nowrap

Sollen sich Zellen über mehrere Zeilen oder Spalten erstrecken, so kann man mehrere Zellen verbinden. Das kann hilfreich bei Spaltenüberschriften sein, die hierarchisch aufgebaut sind. Mit Frontpage ist es sehr einfach, Zellen zu verbinden. Dazu markiert man die Zellen, die verschmolzen werden sollen. Anschließend wählt man aus dem Kontextmenü den Eintrag Zellen verbinden oder aus dem Menü den Menüpunkt Tabelle/Zellen verbinden. Umgekehrt ist es möglich, Zellen zu teilen.

Unsichtbare Tabellen

Es ist möglich unsichtbare Tabellen zu erstellen, in dem die Breite des Rahmens auf Null gesetzt wird. Man kann unsichtbare Tabellen verwenden, um das HTML Dokument zu strukturieren. Mann kann z.B. Grafiken positionieren, in dem man als Zellinhalte Bilder einfügt. So können zwei Bilder nebeneinander dargestellt werden. Eine weitere Anwendung besteht im Erzeugen von Texten mit 2 Spalten. Dabei besteht jedoch das Problem, daß der Browser den Spaltenumbruch nicht  so anpassen kann, so daß beide Spalten gleich lang sind. Auch beim Erstellen von Formularen können unsichtbare Tabellen das Festlegen des Layouts eines Formulars erleichtern.


Skript - MS Frontpage
[ Top Zurück ] Inhalt ] Weiter ] Norman May