Tabellen erstellen - Grundlagen
In Dreamweaver werden Tabellen folgendermaßen erstellt:
[1] Menü: "Einfügen" -> "Tabelle"
[2] Tastenkombination: "STRG + ALT + T"
[3] Bedienfeld "Einfügen": [3A] Kategorie "Allgemein" oder [3B] Kategorie "Layout" -> [4] Symbol für "Tabelle" einfügen

Tabelleneigenschaften festlegen
Wenn in Dreamweaver eine der möglchen Anweisungen zur Erstellung einer neuen Tabelle gegeben wurde, erscheint das Dialogfenster [1] "Tabelle", in dem die Eigenschaften der neuen Tabelle festgelegt werden können.
Diese betreffen u.a. die [2] Tabellengröße:
[3] Zeilen (<tr>);
[4] Spalten (<td> oder <th>);
[5] Tabellenbreite (width): Diese kann entweder in [6] Prozent oder in Pixel angegeben werden;
Für die Gestaltung der Tabelle können folgende Eigenschaften angegeben werden:
[7] Randstärke in Pixel (border): Breite des Tabellenrandes;
[8] Zellauffüllung in Pixel (cellpadding): Abstand des Zellinhalts vom Zellenrand;
[9] Zellabstand in Pixel (cellspacing): Abstand der Zellen untereinander;
[10] Zusätzlich kann festgelegt werden, ob Kopfzeilen (<th>, dunkelgraue Felder) eingefügt werden sollen. Dabei gibt es die Möglichkeit zu bestimmen, dass keine [10A] Kopfzeilen, [10B] Kopfzeilen links, [10C] Koopfzeilen oben ("Spaltenüberschriften") oder [10D] Kopfzeilen links und oben ausgeführt werden sollen.

[11] Beispiel: folgende Angaben ergeben folgende Tabelle (siehe Grafik):
3 Zeilen, 4 Spalten, Tabellenbreite: 50% (Tabellenbreite ist variabel, abhängig von der aktuellen Fenstergröße), Randstärke: 1, Zelluaffüllung 3, Zellabstand: 2

Tabellen - Kopfzeilen
In Dreamweaver sind [1] Zellen standardmäßig links ausgerichtet.
Im Tagselektor wird der zugehörige [2] Tag <td> angezeigt.
Werden Zellen als Kopfzeilen definiert, wird der in ihnen enthaltene Text zentriert und fett dargestellt.
Nach [3] Auswahl der entsprechenden Zellen können diese mit Hilfe des [4] Eigenschaftsinspektors in [5] Kopfzeilen bzw. Kopfzellen umgewandelt werden.
Durch Klicken auf die das Kästchen neben [6] "Kopfzeile" werden die Texte in den ausgewählten Zellen zu [7] Kopfzeilen und damit fett und zentriert angezeigt.
Im Tagselektor wird der geändert Tag für die [8] Kopfzeile <th> angezeigt.

Tabellen Breite
In Dreamweaver kann die Tabellenbreite bei der [1] Erstellung eingegeben oder nachträglich bei der Änderung der Breite im [2] Eigenschaften-Inspektor geändert werden. In allen Fällen wird im Quellcode das Attribut "width" für die Tabellenbreite ergänzt oder geändert
Die Breite von Tabellen kann in [3] Prozent oder in [4] Pixel erfolgen.
[3] Bei der Angabe in Prozent richtet sich die Tabellenbreite nach der verfügbaren Fenstergröße im Browser (zB B 80 % -> width="80%" -> 80% der Fensterbreite).
[4] Bei der Angabe in Pixel (zB 200 Pixel -> width="200") bleibt die Tabellenbreite immer gleich, sofern der Tabelleninhalt (zB Bilder) nicht eine größere Tabellenbreite erzwingt.

Tabellen - Standardeinstellungen
Werden in Dreamweaver bei der Erstellung von Tabellen keine Eigenschaften - ausgenommen Anzahl der Zeilen und Spalten - eingegeben (<table> ...), werden die Vorgaben bzw. Standardeinstellungen verwendet. Diese können, je nach Webbrowser, variieren.
In Dreamweaver werden in der [1] Entwurfsansicht und im [2] Eigenschafteninspektor folgende Standardeinstellungen für die Tabelle [3] (<table>) angezeigt
[4] Ausrichten: "Standard" (d.h. "Linksbündig");
[5] B (Tabellenbreite): keine Angaben -> Dreamweaver fügt automatisch in jede Zelle ein geschütztes Lehrzeichen ( ) hinzu, sodass die Tabelle mit [6] minimaler Breite noch sichtbar ist.
[7] Werden die Zellen mit Inhalt gefüllt (zB mit Text), passen sich sowohl Tabellenbreite als auch Spaltenbreite an den Zellinhalt an.

[8] Zellauffüllung: keine Angaben -> Dreamweaver zeigt einen Abstand zwischen Zellinhalt und Zellrand von 1 Pixel (entspricht: cellpadding = "1") an.
[9] Zellraum: keine Angaben -> Dreamweaver zeigt einen Abstand zwischen den Zellen von 2 Pixel (entspricht: cellspacing = "2") an.
[10] Rahmen: keine Angaben -> Dreamweaver zeigt keinen Rahmen (entspricht: border = "0") an. Um die Zellgrenzen jedoch in der Entwurfsansicht sichtbar zu machen, werden strichlierte Linien als Arbeitshilfe angezeigt.

Spaltenbreite in %
Die Zellen- bzw. Spaltenbreite kann ebenso wie die Tabellenbreite in Prozent oder in Pixel angegeben werden. Die Zellenbreiten werden im [1] Eigenschafteninspektor nach Markierung der entsprechenden Zelle [2](<td>) im Feld [3] "B" eingetragen (zB 25%).
Wird die Zellenbreite (= Spaltenbreite) in [4] Prozent angegeben, sind die tatsächlichen Breiten abhängig von der [5] Fensterbreite, in der die Tabelle angezeigt wird. In der Entwurfsansicht von Dreamweaver wird sowohl die Spaltenbreite in [6] Prozent als auch für den Zelleninhalt die momentan verfügbare [7] Breite in Pixel angezeigt.
Wenn für eine Spalte keine Breite angegeben wird, wird für diese Spalte die [8] Restbreite vom Browser berechnet. Werden für [9] jede Spalte Breiten in Prozent eingegeben, soll die Summe aller Breiten 100% ergeben.
Bei einer [10] Verringerung der Tabellenbreite (zB 70% der Fensterbreite) werden natürlich auch die Spaltenbreiten proportional kleiner.
[11] Die minimalen Spaltenbreiten ergeben sich aus dem Zelleninhalt. Ist der Zelleninhalt (zB Bild, Text) breiter als die angegebene Spaltenbreite wird die Zellenbreite automatisch angepasst, d.h. vergrößert.


[12] Beispiel 1: Tabellenbreite 100%: 3 Spaltenbreiten je 25%, Spaltenbreite der Spalte 3 wird vom Browser berechnet;
[13] Beispiel 2: Tabellenbreite 70%: 4 Spaltenbreiten je 25% (Summe = 100%) -> da die Tabellenbreite nur 70% der Fensterbreite beträgt, beträgt die Spaltenbreit nur 17,5% der Fensterbreite;
[14] Beispiel 3: Tabellenbreite 100%: bei großen Fensterbreiten werden die Spaltenbreiten in den vorgegebenen Prozentbreiten (15%, 40%, 30%, 15%) angezeigt. [15] Bei kleinen Fensterbreiten kann die Tabellenbreite in diesem Beispiel nur auf minimal 141 Pixel reduziert werden, da der Text der Zellinhalte sonst nicht angezeigt werden könnte. Die angegebenen Prozentbreiten können daher bei zu kleiner Tabellenbreite nicht eingehalten werden.

Zellen verbinden
In Dreamweaver können zwei oder mehrere nebeneinander liegende Zellen folgendermaßen verbunden werden:
[1] Zu verbindende Zellen auswählen, anschließend eine der folgenden Möglichkeiten auswählen:
[2] Menü: Modifizieren -> Tabelle -> Zellen verbinden;
[3] Rechte Maustaste: Tabelle -> Zellen verbinden;
[4] Tastenkombination: "STRG + ALT + SHIFT + M";
[5] Eigenschaftsinsektor: Symbol "Zelle verbinden" auswählen;


[6] Beispiel 1: Zellen 1-1 und 1-2 verbinden -> verbundene Zellen in Reihe (colspan = "2");
[7] Beispiel 2: Zellen 2-1, 2-2 und 2-3 verbinden -> verbundene Zellen in Spalte (rowspan = "3");

Zellen teilen
In Dreamweaver kann eine Zelle folgendermaßen geteilt werden:
[1] Zu teilende Zelle auswählen, anschließend eine der folgenden Möglichkeiten auswählen:
[2] Menü: Modifizieren -> Tabelle -> Zellen teilen;
[3] Rechte Maustaste: Tabelle -> Zellen verbinden;
[4] Tastenkombination: "STRG + ALT + SHIFT + M";
[5] Eigenschaftsinsektor: Symbol "Zelle teilen" auswählen;
Nun werden zwei Teilungsmöglichkeiten angeboten:
[6] Zelle teilen in zwei oder mehrere Zeilen: [7] Anzahl der Zeilen eingeben, oder
[8] Zelle teilen in zwei oder mehrere Spalten: [9] Anzahl der Spalten eingeben;


[10] Beispiel 1: Zelle in 2 Reihen teilen -> "Zelle teilen - Zeilen" auswählen -> Anzahl der Zeilen [2] eingeben;
[11] Beispiel 2: Zelle in 3 Spalten teilen -> "Zelle teilen - Spalten" auswählen -> Anzahl der Spalten [3] eingeben;

Zellen - Hintergrundfarbe
Der Hintergrund von Zellen in Tabellen ist standardmäßig [1] transparent. Wenn daher keine Eigenschaften in den Beginntags der Tabellen, Zeilen oder Zellen eingegeben werden, wird die Hintergrundfarbe der HTML-Seite (<body>) sichtbar.
[2] In Dreamweaver kann die Hintergrundfarbe einer Zelle im Eigenschaftsinspektor geändert werden. Die Farbeigenschaften für den Hintergrund können durch das Klicken in die entsprechende Zelle angezeigt werden. Ist im Feld kein Eintrag vorhanden, hat die Zelle auch keine Hintergrundfarbe.
Die Hintergrundfarbe kann durch Klicken auf das [3] Farbfeld (neben "HgF") geändert werden.
Wird auf das Farbfeld gecklickt, kann mit dem [4] Farbwähler mit Hilfe der Pipette eine Hintergrundfarbe ausgewählt werden.
Die Hintergrundfarbe kann auch direkt durch Eintragen des [5] hexadezimalen Farbcodes in das Eingabefeld im Eigenschaftsfenster geändert werden.
[6] Die ausgewählte Zelle zeigt in der Entwurfsansicht nun die neue Hintergrundfarbe an.

Soll die Hintergrundfarbe gelöscht werden, ist dies direkt im [5] Eingabefeld durch Löschen des hexadezimalen Farbcodes oder durch Anklicken des Symbols [7] "Quadrat mit der roten Diagonale" möglich.

[8] Beispiel:
Durch Auswahl der Farbe "#33F99" (Grünton), wird im Quellcode die Eigenschaft "bgcolor" mit dem zugewiesenen Farbcode eingetragen (zB <td bgcolor="#33FF99">).

Tabellen - Zeilenumbruch
Text wird standardmäßig der [1] Zellengröße einer Tabelle angepasst. Notfalls werden [2] Zeilenumbrüche eingefügt, sodass der Textinhalt, je nach Fenstergröße, mehrzeilig dargestellt wird. Dieses Verhalten zeigt auch Dreamweaver in der Entwurfsansicht.
Die [3] einzeilige Darstellung des Textes kann jedoch erzwungen werden.

In Dreamweaver kann dieses Verhalten im [4] Eigenschaftsinspektor folgendermaßen gesteuert werden:
Die entsprechende [5] Zelle mit dem Textinhalt markieren;
Standardmäßig ist die Eigenschaft "Kein Umbruch" im Eigenschaftsinspektor ]6} nicht gesetzt: Der Text wird durch Zeilenumbrüche an die Zellengröße angepasst.
Die Eigenschaft "Kein Umbruch" im Eigenschaftsinspektor [7] setzen bzw. anklicken: Der Text wird nur [3] einzeilig dargestellt.

Anmerkung:
Im Quellcode wird die Eigenschaft "bowrap" eingefügt:
<td nowrap="nowrap">