Tabellen sind immer noch das Hauptgestaltungsmittel für Webseiten, da sie universell einsetzbar und unkompliziert in Bezug auf Browserverträglichkeit sind - im Gegensatz zu Ebenen (auch Rahmen oder Layer genannt). Daher wird diesem Thema etwas mehr Raum gegeben, nicht zuletzt deswegen, weil Dreamweaver für die Gestaltung mit Tabellen ausgezeichnete Hilfsmittel anbietet.

Es ist grundsätzlich und auch in Dreamweaver zu empfehlen, sich gerade bei komplizierteren Tabellen vor Beginn der Arbeit eine Skizze zu machen, wie die einzelnen Zellen und deren Inhalt angeordnet werden sollen. Falls man diese Skizze in einem Bildbearbeitungsprogramm macht, kann man gleich maßstabsgetreu arbeiten (Browserleisten abrechnen) und außerdem die Ränder der Zellen in diese Skizze einzeichnen. Dann als gif, jpg (oder png) exportieren und als Tracing Image in den Hintergrund der Seite laden – so hat man eine perfekte Vorlage!

Das Arbeiten mit Tabellen kann beschleunigt werden: Bearbeiten / Voreinstellungen / Allgemein / Schnellere Tabellenbearbeitung (verzögerte Aktualisierung) - Tabellenlayout wird aktualisiert, wenn außerhalb der Tabelle geklickt wird oder Strg + Leertaste gedrückt wird.

Tabelle einfügen

Zuerst den Cursor an die gewünschte Stelle setzen und dann über Menü Einfügen / Tabelle oder über Objektepalette / Tafel allgemein Tabelle einfügen. Im sich öffnenden Dialog die gewünschte Anzahl an Zeilen und Spalten angeben sowie die Breite, die Dicke des Rahmens und die Werte für cellspacing (Zellenabstand) bzw. cellpadding (Zellauffüllung)

Mit den Pfeiltasten oder auch mit der Tab-Taste ist die Navigation innerhalb der Tabelle schneller als mit der Maus. Wenn man ans Ende der letzten Zeile bzw. in die letzte Zelle geht, kann man mit dem Drücken der Tab-Taste eine neue Zeile einfügen.

Normalerweise wird die Tabelle noch gestaltet werden müssen, bevor Texte oder Grafiken eingefügt werden können. Um ein Tabellenelement (Zeile, Spalte, Zelle) bearbeiten zu können, muß es vorher markiert werden.

Markieren einer Tabelle

Markieren der gesamten Tabelle

Die komplette Tabelle markiert man, indem man oben links auf die Ecke klickt (Mauszeiger nimmt Form eines Fadenkreuzes an) oder auf den linken bzw. unteren Rand der Tabelle. Alternativ kann man auch im Menü Modifizieren / Tabelle /Tabelle auswählen anklicken.

Markieren von Spalten, Zeilen und Zellen

Zeile markieren: Cursor am linken Rand einer Zeile platzieren bis er die Form eines kleinen, nach rechts zeigenden Pfeils annimmt. Dann einmal klicken und die Zeile ist markiert.

Bei der Spalte geht das genauso, nur führt man den Cursor von oben an die Spalte heran

Um eine einzelne Zelle zu markieren, klickt man in die Zelle und zieht den Cursor zur Seite oder nach unten zu einer anderen Zelle. Mit etwas Übung kann man auf diese Weise auch Zeilen oder Spalten markieren. Alternativ klickt man in die Zelle, die man markieren möchte und klickt bei gedrückter SHIFT-Taste in eine andere Zelle. Wenn man mehrere nicht benachbarte Zellen auf einmal markieren möchte, hält man die STRG-Taste gedrückt und klickt die einzelnen Zellen an.

Formatieren von Tabellen und Zellen

Eigenschaftsinspektor

Die vorab eingegebenen Angaben zu der Tabelle lassen sich im Eigenschaftsinspektor ablesen bzw. verändern oder neu eingeben:

Angaben u. a. möglich für:

•		Tabellenname
•		Anzahl der Zeilen und Spalten
•		Breite und Höhe der Tabelle, kann entweder in Pixel oder in Prozent angegeben werden
•		Ausrichten: Angabe, wie die Tabelle an anderen Elementen im gleichen Absatz, z. b. an Text oder Bildern, ausgerichtet wird (Standard=Standardausrichtung des Browsers)
•		Tabellenrahmen und -rahmenfarbe
•		Zellauffüllung: Abstand zw. Zellinhalt und Rand der Zellen
•		Zellraum oder Zellabstand: Abstand zw. den Tabellenzellen in einer Tabelle
•		Hintergrundfarbe und Hintergrundbilder

Beispiel für Tabellen- und Zellenformatierung:

Wenn eine Zelle in einer Tabelle markiert ist, bekommt der Eigenschaftsinspektor (wieder mal) ein anderes Aussehen:

Einfügen und Ausrichten des Inhalts

Innerhalb einer Tabelle kann Text ganz normal bearbeitet werden. Grafiken lassen sich in Zellen wie sonst auch einfügen über das Menü Einfügen / Bild oder wie man es sonst gewohnt ist.

Tabellen mit vordefiniertem Design versehen

Unter Menü Befehle / Tabelle formatieren. Das Design läßt sich an individuelle Vorstellungen anpassen.

Tabellenzellen ausschneiden und kopieren

• Die Zellen müssen immer ein Rechteck bilden
• Wenn Zellen einen Inhalt haben, wird beim Ausschneiden nur der Zellinhalt ausgeschnitten, die Zellränder bleiben stehen
• Wenn eine ganze Spalte oder Zeile markiert und ausgeschnitten wird, so wird sie als Ganzes entfernt
• Wenn mehrere Zellen aus einer Tabelle in eine andere kopiert werden sollen, muß die Zellanzahl gleich sein. Sonst gibt es eine Fehlermeldung.
• Wenn man nur den Textinhalt einer Zelle kopieren will, dann im Menü Bearbeiten / „als Text kopieren“ wählen.
• Möchte man den Inhalt der Zellen entfernen, markiert man ihn und drückt auf die
  ENTF – Taste
  

Größe der Tabellenzellen verändern

Ganze Tabelle

Tabelle markieren und entweder Tabellenrahmen mit den Ziehgriffen (schwarze Quadrate) verziehen oder im Eigenschaftsinspektor Breite und Höhe eingeben (Felder B und H).

Falls das Ergebnis nicht gefällt, kann man die Werte mit den Schaltern für Zeilen- oder Spaltenwerte im Eigenschaftsinspektor löschen: und es erneut probieren.

Spalten oder Zeilen

Auf den Zeilenrand oder den Spaltenrand mit der Maus zielen: Zeiger verändert sich zur Form eines geteilten Strichs mit gegenläufigen Pfeilen. Auf den Rand klicken und ihn bei gedrückter Maustaste auseinander- oder zusammenziehen. Eine andere Möglichkeit ist die Eingabe der Breite oder Höhe von Zeilen bzw. Spalten über den Eigenschaftsinspektor (Felder B und H). Die Spalte bzw. Zeile muß vorher markiert werden. Die Maße können in Pixeln oder in Prozent angegeben werden. Für die Angabe in Prozent muß hinter der Zahl ein Prozentzeichen angeben werden.

Wenn man die Felder einfach leer lässt, werden die Felder automatisch von DW oder dem Browser eingestellt. Die Breite richtet sich nach der längsten Zeile oder dem längsten Bild.

Verändern der Zeilen- oder Spaltenzahl:

A. Markieren der entsprechenden Zeile oder Spalte
B. Aufruf des Menüs Modifizieren / Tabelle / Spalte bzw. Zeile einfügen

Eine alternative Methode ist der Aufruf des Kontextmenüs: Auswahl Tabelle / Spalte bzw. Zeile einfügen.

Es erscheint dann das gleiche Dialogfenster wie beim Aufruf über das Menü.

Anm.:

Das Kontextmenü bietet noch etliche andere Bearbeitungsoptionen, nicht nur für Tabellen! Es läßt sich
schneller aufrufen als die Menüs und Untermenüs. Seine Verwendung ist daher sehr zu empfehlen.

Tabellenformen

Symmetrische Tabellen

Kennzeichen:
Gleiche Anzahl von Zellen in jeder Zeile und gleiche Anzahl von Zellen in jeder Spalte

Asymmetrische Tabellen

-werden häufig für das Seitenlayout eingesetzt:

So kann man über das Kontextmenü Zellen teilen:

Verschachtelte Tabellen

Blinde Tabellen

Sie dienen zum Positionieren von Seiteninhalten. Ihr Rand ist nicht sichtbar (“blind”). Dazu muß man den Rahmen auf 0 setzen (Html: border=”0”). Blinde Tabellen werden von Dreamweaver mit gepunkteten Linien dargestellt.

Sortieren von Spalteninhalten

Es ist möglich, Tabellenspalten alphabetisch oder numerisch zu sortieren. Spalte markieren und unter dem Menü Befehle ganz unten “Tabellen sortieren” anklicken:

Angabe der Spalte, die sortiert werden soll

Aufsteigend: von A bis Z bzw. von z. B. 1 bis 10

alphabetische oder numerische Reihenfolge
Wenn erste Zeile mitsortiert werden soll, ankreuzen
“Dann nach:” - hier kann eine zweite Sortiervorgabe eingestellt werden.

Layouttabellen

Für das Arbeiten mit Layouttabellen gibt es die Möglichkeit, über das Menü Ansicht/Tabellenansicht/Layoutansicht die Layoutfunktionen aufzurufen oder in der Objektepalette auf den Schalter für die Layoutansicht zu klicken.

Objektpalette (unten):

In der Normalansicht sind die Layoutfunktionen ausgeblendet		Bei aktivierter Layoutansicht sind die Funktionen Layoutzelle und Layouttabelle ebenfalls aktiviert

Layouttabellen und Layoutzellen

In der Layoutansicht kann man Layouttabellen und Layoutzellen dazu verwenden, schnell und einfach asymmetrische Tabellen zu erstellen.

Wenn man noch nicht im Layoutmodus gearbeitet hat, erscheint nach Auswahl der Layoutansicht folgendes Fenster:

Die Anweisungen in diesem Fenster geben eine gute Anleitung für den ersten Versuch, eine Layouttabelle zu erstellen (Ctrl=Strg).

Wenn man die Layouttabelle mit der Normalansicht weiterbearbeiten möchte, klickt man einfach auf den Schalter für Normalansicht in der Objektepalette (oder benutzt das Menü Ansicht). Die Tabelle erscheint in der Normalansicht.

Layouttabellen formatieren

In der Layoutansicht gibt es zwei verschiedene Optionen für die Einstellung der Breite der Tabellenzellen.

Feste Breite

Hier wird die absolute Breite in Pixeln zur Größenangabe verwendet. Die Zellen sind hier nicht dehnba

Automatische Breite

Breite verändert sich je nach Fenstergröße. Sie ist für jede Layoutzelle separat einstellbar.

Zellen, deren Breite sich mit der Fenstergröße verändert, werden im oberen Rand der Layouttabelle mit einer Wellenlinie angezeigt.

Fest
Fest
Automatische Breite

Wie in obigem Beispiel lassen sich beide Optionen miteinander kombinieren.
Am besten nimmt man die Formatierungseinstellungen im Eigenschaftsinspektor vor:

Für die Zellen:

Breite formatieren

Für die Tabelle:

Erklärung der Schalter rechts auf dem Eigenschaftsinspektor:

Besonderheiten bei der Layouttabellenformatierung

Layouttabellen lassen sich nicht in schon angelegte Layoutzellen einfügen. Das geht nur in den grauen Bereichen. Schon angelegte Layoutzellen lassen sich aber an den Anfassern verschieben, so daß ein grauer Bereich sichtbar wird. In den kann man neue Layoutzellen einfügen.