Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 4: Tabellen einfügen, Anfänge

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.

Mit Ctrl+Alt+T fügen Sie eine Tabelle (Table) ein, dies ist soweit bekannt. Im darauffolgenden Dialog können Sie bereits einiges vordefinieren:

Als Übung taugt die Rahmenbreite (Randstärke) 1 noch ziemlich viel - später dann nicht mehr. Sie werden dann eine Tabelle in dieser Art bekommen:

Dreamweaver MX 2004 zeigt Ihnen zusätzlich noch diverse Infos zur Tabelle an, wenn Sie den Cursor in sie hineinsetzen:

Hier wurde eine 200 Pixel breite Tabelle eingefügt, die drei Spalten jedoch mit je 100 Pixeln Breite ausgestattet - was natürlich nicht geht. MX 2004 zeigt zusätzlich die approximativen tatsächlichen Werte in Klammern an - für Sie klar das Zeichen, etwas an der Tabelle zu ändern, da sie sich je nach Browser komisch verhalten wird.

Es sei hier schon gesagt: Dies ist nur für "klassische" Tabellen geeignet, die z.B. Zahlen in tabellarischer Form beinhalten. Wenn Tabellen als Layoutmittel gebraucht werden, sollten Sie die Werte für Rahmen, Zellauffüllung und Zellenabstand auf Null setzen und die Breite in Pixeln angeben. Nur so ist sichergestellt, dass die Tabelle nicht "blöd tut" - und das tun die widerspenstigen Tabellen sehr, sehr gerne, wenn man sie nicht zähmt.

Bleiben wir kurz noch bei den Zahlentabellen: Ein wenig Spielen mit Rahmen, Abständen und Tabellen- und Zellenfarben bringt auf einfache Art und Weise eine attraktivere Tabelle hervor als das hier...

... nämlich zum Beispiel so:

Hier wurde die Tabelle zuerst am Rand gepackt und als Ganzes markiert (Tabelle schwarz umrahmt) - dies ist die erste Möglichkeit, global Tabelleneigenschaften zu beeinflussen:

(oben: Screen aus MX 2004 / unten: CS3)

Definiert wurde hier zunächst die Breite 300 Pixel. Dann wurden der Rahmen auf 0 Pixel gesetzt, Zellauffüllung und Zellraum auf 1 Pixel gesetzt sowie die Hintergrundfarbe (HG-Farbe) auf schwarz (#000000).

Danach wurde die Tabelle Zelle für Zelle markiert (Cursor in Zelle links oben platzieren, Maustaste gedrückt halten, bis zur Zelle rechts unten ziehen, loslassen) und das Eigenschaftenfenster so modifiziert:

(oben: Screen aus MX 2004 / unten: CS3)

Die Hintergrundfarbe der einzelnen Zellen wurde auf #CCCCCC (hellgrau) festgesetzt. Die Schriftart wurde auf "Verdana", Grösse "-1" gesetzt. Das ergibt schliesslich den Effekt einer grauen Tabelle mit schwarzen Abgrenzungen. Dasselbe ginge natürlich auch mit anderen Farben:

Was lernen wir daraus für später? Es gibt zwei Möglichkeiten, eine Tabelle "anzufassen" (zu markieren), je nach dem, was man tun will:

• Als Ganzes (1x auf die Umrandung der Tabelle klicken)
• Zelle für Zelle (gewünschte Anzahl Zellen markieren)

Übrigens können Sie problemlos mehrere Zellen markieren und mit dem entsprechenden Button im Eigenschaften-Fenster zusammenfügen, das sieht dann zum Beispiel so aus:

Die Zellen lassen sich auch wieder zusammenfügen. Die magischen Buttons sind diese hier:

Der Linke verschmilzt mehrere markierte Zellen zu einer, der rechte macht aus einst zusammengefügten wieder einzelne Zellen (Cursor muss in der zusammengeschmolzenen Zelle sein, bevor Button gedrückt wird).

Auch hier gilt wieder: All diese Tabelleformatierungen kann man auch mit CSS machen - so muss man sie nur einmal definieren, sie gelten dann global für die gesamte Site. Wie das geht, folgt später.

Zum Nachlesen: KnowWare-Heft 12, Seiten 71-74

Tabellen als Gestaltungsmittel

Es ist mehrfach gesagt worden: Tabellen können im Webdesign nicht nur zur Darstellung von Zahlen, sondern auch als Layouthilfsmittel benützt werden. Dann werden Rahmen, Zellabstand und Zellauffüllung auf Null gesetzt und es wird in der Regel mit Pixeln statt mit % gearbeitet.

Natürlich kann man auch mit XHTML/CSS arbeiten. Dies ist aber nicht ganz einfach zu erlernen, und gewisse Browser haben so ihre liebe Mühe mit dieser Technologie. Als Einführung ins Webpublishing ist das Layouten mit Tabellen sicher nicht der schlechteste Einstieg. Es geht zunächst mal darum, das Gefühl zu bekommen, wie man mit Hilfsmitteln Layouts erstellen kann.

Tabellen wollen gut geplant sein - am besten zuerst mal auf Papier. Dabei sind folgende Fragen zu beachten:

• Welche Breite soll der Seiteninhalt haben? (= Für welche Monitorgrösse bzw. Auflösung optimiere ich meine Seite?)
• Wie sieht die Navigation links und allenfalls oben aus?
• Wie erreiche ich mit möglichst wenig Verschachtelungen möglichst viel Freiheit beim Designen, ohne dass mir die Tabelleneigenschaften in die Quere kommen?

In der Regel kommt man dann auf eine Tabellenbreite von maximal 600 bzw. 760 Pixeln (640 bzw. 800 minus 40, d.h. minus den Sicherheitswert, der für Scrollbalken und Fensterränder abgezogen wird). Für 1024x768 würde ich nicht optimieren - Statistiken zeigen, dass eine Schweizer Website durchschnittlich noch zu rund 20-30% von Leuten mit 800x600-Auflösung besucht wird (Stand Oktober 2004). Andere Studien kommen sogar auf höhere Zahlen. Und die haben auch eine schöne Page verdient.

Merke: Eine Tabelle, die 790 Pixel breit ist, ist NICHT für 800x600 optimiert! Wenn Ihnen jemand so etwas als 800x600-optimiert verkaufen will, dann waren Amateure am Werk. Die Table darf maximal 760 Pixel breit sein (siehe zB in diesem Artikel). Dazu müssen in den Seiteneigenschaften (Ctrl+J) die Werte für oberer Rand, linker Rand, Randbreite und Randhöhe auf Null gesetzt sein - sonst funken uns die standardmässig eingestellten Werte rein.

Dreamweaver bietet rechts unten dazu ein Hilfsmittel, mit dem man die Fenstergrösse an die jeweiligen Monitore anpassen kann. Das empfehle ich nicht - aber die jeweiligen Werte sind wichtig für die maximal erlaubten Tabellenbreiten je nach Bildschirmauflösung, für die man designen will:

Nicht vergessen: Wir arbeiten hier noch auf einer sehr rudimentären Stufe. Profis entwerfen eine Website mit Fireworks und/oder Freehand und exportieren danach das Ergebnis Stück für Stück in Dreamweaver. Mehr dazu gibts später in diesem Kurs.

Die Erfahrung zeigt aber, dass es SEHR von Nutzen ist, wenn man Tabellen ganz altmodisch "von Hand bedienen" bzw. nachbearbeiten kann. Mehr zum Layouten mit Tabellen in der nächsten Übung...

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.