Top im Web BASIC - eine Webpublishing-Einführung
Kurs der Universität Bern

Teil 8

Tabellen sind im rudimentären HTML-Stadium, aus dem wir infolge Zeit- und Softwaregründen gar nicht herausfinden können, die einzige Möglichkeit, passable Websites darzustellen, die einigermassen nach etwas aussehen! Von Layers und CSS (Cascading Style Sheets, damit sind diese Kursseiten auch programmiert) usw. reden wir also schon gar nicht - dazu gibt es genug Bücher und Websites.

Das Dilemma beginnt bereits bei mehrspaltigem Text oder dem sauberen, pixelgenauen Platzieren von Grafiken - da steht man mit Leerschlägen und Konsorten, wie man es in einem Word-Dokument notfalls gerade noch so verantworten könnte, rasch am Berg.

Tabellen schaffen hierbei im Web Abhilfe; meist sind es sogar ineinander verschachtelte Tabellen, wobei der Rand der Tabelle in der Regel unsichtbar programmiert wird, sodass eine Seite einen aufwändigen Look bekommt, ohne hässlich zu wirken. Das wollen wir nun natürlich üben... Zuerst wie immer etwas HTML-Theorie. Wenn man in der Composer-Symbolleiste auf das Icon "Table" klickt, erscheint ein Dialog, wo man zuerst die gewünschte Anzahl Spalten (Columns) und Zeilen (Rows) sowie die Breite der Tabelle eintippen muss:

Die Tabellenbreite in Pixeln (oder Prozent der Zelle, in welche die Tabelle bereits hineingesetzt wurde bzw. der vorhandenen Bildschirmbreite) könnt ihr mit "760 pixels" angeben. Unter "Advanced Edit" lassen sich weitere Attribute angeben, wie: Breite des Randes (Border), Raum zwischen dem Zellenrand und dem Inhalt (Cellpadding), Dicke der Innenlinien (Cellspacing), Hintergrundfarbe oder Hintergrundgrafik der Tabelle usw. - gewisse Attribute müssen zuerst aus der Liste "Attribute" ausgewählt werden, um sie aktiv zu machen:

Mit etwas Glück kann man folglich so etwas zaubern... (Border auf Null gesetzt, kein Cellspacing und Cellpadding):
 

Das ganze mit Rahmen (Breite 1 Pixel) würde so aussehen:
 

Für Freaks -- der Quelltext sieht so aus:

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=6 WIDTH="100%"> <TR>
<TD BGCOLOR="#FF9900">..</TD> <TD BGCOLOR="#33CCFF">test</TD> <TD>hihi</TD> <TD><B>Blabla</B></TD> <TD>haha</TD> <TD></TD>
</TR> <TR>
<TD BGCOLOR="#FFCC99">Hallo</TD> <TD BGCOLOR="#CC0000">Huhuu</TD> <TD>&ccedil;/&amp;%/</TD> <TD>dddd</TD> <TD></TD> <TD><B><I><FONT FACE="Arial,Helvetica"><FONT SIZE=+2>Hallo</FONT></FONT></I></B></TD>
</TR> <TR>
<TD></TD> <TD></TD> <TD BGCOLOR="#00CC00"><FONT COLOR="#FFFFFF">----</FONT></TD> <TD></TD> <TD>hehe</TD> <TD></TD>
</TR>
</TABLE>

Hier wird klar wiederum die Zwiebelform der HTML-Befehle sichtbar. Wenn wir dies aufs Nötigste reduzieren und auch gleich eine Tabelle einfügen, um dies zu erläutern, dann...
 

Dazu kommen wie oben gezeigt andere Attribute wie Hintergrundfarbe usw. - Als Hilfe habe ich Euch ja die HTML-Codereferenz kopiert, Ihr findet diese in der Dokumentation.

Weitere Möglichkeiten mit Tabellen

Natürlich kann man mittels Tabellen auch andere Effekte erzielen, ohne auch nur ein Bild zu verwenden, zum Beispiel so etwas - ein altes Beispiel aus dem Web der Uni Basel. Öffnet diese Kursseite (Teil 8) in Netscape und klickt dann auf "File / Edit Page" ("Seite / Seite bearbeiten" oder Ctrl+E), um den Aufbau der Tabelle zu analysieren:

Das weitere Vorgehen

Eine Seite mit Tabellen will gut geplant sein - tut dies jetzt mit Eurer Beispielwebsite (klaut dazu zunächst wieder einige Bilder aus dem Internet) und versucht, mehrere Inhalte und Grafiken/Bilder auf einer Seite nun nicht nur untereinander, sondern mittels Tabellen auch mehrspaltig nebeneinander darzustellen, so wie Ihr das wollt - und indem ihr z.B. mehrere Tabellen ineinander verschachtelt.

Checkt zudem regelmässig im Browser ("BROWSE" - oder mit "Datei / öffnen" im Internet Explorer), wie die Site dort aussieht, teils nämlich sehr viel anders als im Composer...

Wie kann man nachträglich Zellen- oder Tabellenattribute editieren? Ganz einfach: Klickt in die Tabelle und dann auf das "Table"-Icon in der Symbolleiste:

Hier kann man z.B. auch angeben, ob der Text oder die Grafik in einer Zelle linksbündig oder zentriert usw. angeordnet werden sollen (Content Alignent). Standard ist meistens "Vertical > Top".

Noch ein Tip: Man kann auch mit der rechten Maustaste arbeiten. Wenn man mit dieser in eine Tabelle oder Zelle klickt und "Table Cell Properties" wählt, erscheint das obige Feld, wo man alles vor sich hat, was man braucht.

Dasselbe für die ganze Tabelle ist leider etwas komplizierter: Zuerst mal mit der rechten Maustaste in die Tabelle klicken und "Table select / Table" wählen:

Dann (ohne weitere Zwischenklicks, sonst geht die Auswahl verloren) nochmals mit der rechten Maustaste in die Tabelle klicken und "Table Properties" wählen - et voilà:

Weitere Zeilen oder Spalten (bzw. ganze neue Tabellen in eine Tabelle) kann man ebenfalls via rechte Maustaste löschen oder hinzufügen (Table Delete bzw. Insert > Table, Row, Cell oder Column).

Wichtig ist einfach, dass der Cursor beim Klick mit der rechten Maustaste in jender Zelle steht, die Ihr bearbeiten wollt. So könnt Ihr den Text in einer Zelle horizontal und vertikal korrekt anordnen (mitte, unten, oben, rechts usw.).

Übrigens ist es auf professionellen Websites üblich, mit einem "leeren GIF" zu arbeiten, damit die Tabelle sicher keine Mätzchen macht - was sie sonst oft tun würde.

Diese unsichtbaren Grafiken (1x1 Pixel gross, können aber theoretisch unendlich in die Länge und Breite gezogen, ohne mehr Speicherplatz zu belegen) werden in jede Spalte einer Tabelle eingefügt; z.B. in einer separaten Zeile zuunterst, wo sie nicht stören. Diese sogenannten "Shims" füllen die Tabelle sauber auf und hindern sie am kollabieren. Wer ein leeres GIF möchte, kann es sich hier holen (Quadrat mit rechter Maustaste anklicken, "Bild speichern unter" wählen):

Das Shim-Prinzip ist mit Netscape etwas kompliziert zu handhaben, also bitte nicht verzweifeln. Wem das zuviel ist, kann das auch auslassen. Wers versuchen will:

• Überlegt euch ein Layout (z.B. Navigationsleiste links, Text rechts, Gesamtbreite der Tabelle 760 Pixel).
• Fügt im Composer wie beschrieben eine entsprechende Tabelle auf eine leere Seite ein, z.B. mit zwei Spalten und zwei Zeilen.
• Nun kommt das Shim - zuerst jenes für die Linke Spalte.Es läuft wie wenn ihr ein Bild einfügen würdet.
• Cursor in Zelle links unten setzen
• "Insert / Image" wählen- dann das vorhin gespeicherte _1x1.gif wählen.
• Beim Einfügen sofort auf "Advanced Edit" gehen und als Breite (width) des Bildes 150 wählen, OK
• "Don't use alternate text" wählen, OK
• In die linke Spalte mit der rechten Maustaste klicken
• "Table Cell Properties" wählen, bei "Size / Width" 150 eintragen, Pixels wählen
• Dasselbe für die Zelle unten rechts wiederholen, diesmal als Shim-/Zellenbreite 610 wählen (760 minus 150).

OK, das war nun recht komplex. Zugegeben. Mit Dreamweaver geht das alles auch VIEL einfacher. Aber Tabellen ohne Shims sind eine wacklige Angelegenheit, wie ihr wohl gemerkt habt.

Wer sich lieber ein kleines Layout mit Tabellen ansehen und analysieren will, kann sich hier ein ZIP-File herunterladen... einfach anklicken, speichern, alles in einen Ordner entzippen und eine HTML-Datei im Composer öffnen. Im Browser sieht das etwa so aus.

Wie wir hier sehen, kann mit der realtiv rudimentären Kombination von Hintergrundbild und Bildern in Tabellen ein professioneller Effekt erzielt werden - versucht einmal, wenn Ihr Euch relativ sicher fühlt, den Background zu speichern, in eine eigene Beispielseite einzubauen eine Tabelle so zu positionieren, dass der Text der Seite in den weissen Bereich zu liegen kommt. Probiert danach aber auch ein weiteres, eigenes Beispiel. Beschäftigt Euch aber nicht ZU langte damit! Für Fragen bin ich jederzeit rufbar. Lest aber zuerst noch schnell dies fertig:

Weiteres

Tabellen sind zudem ein probates, wenn auch nicht ideales Mittel, um einen kontinuierlichen Zeilenumbruch vor dem Bildschirmende hinzukriegen bzw. für kleinere Bildschirme tauglich zu machen. Leider programmieren immer mehr Leute unbedacht mit grossen Bildschirmen und vergessen die alten, kleinen - auf denen wegen der tieferen Auflösung weniger Platz hat.

Zum Beispiel ist die gesamte ikmb-Website auf eine Bildschirmbreite von 800 Pixeln (Bildpunkten) ausgelegt, da es noch Leute gibt, die mit einer 800x600-Auflösung arbeiten. Die meisten SurferInnen haben aber eine Bildschirmauflösung von 1024x768 Pixeln oder mehr. Wer eine bessere Auflösung hat, sieht einfach auf dem Rest des Bildschirm nichts ausser dem grauen Background, was jedoch kaum weiter stört und (noch) Standard in der Webdesigngemeinde ist.

Dummerweise darf man aber eine Tabelle nicht so breit machen wie die verfügbare Monitorbreite in Pixeln, sondern muss noch eine Toleranz abziehen. Eine Website, die für 800 Pixel Breite optimiert ist, sollte nicht breiter als 760 Pixel sein!

Es gibt aber einen markanten Geschwindigkeitsnachteil! Tabellen müssen vollständig bis zum Ende geladen werden, bevor der Inhalt der Tabelle auf dem Bildschirm erscheinen kann - daher sollte man Tabellen allgemein kurz halten und für längeren Text mehrere Tabellen untereinander gebrauchen (mit einem Zeilenumbruch dazwischen).

Bitte schaut Euch auch andere Pages im Web an (inkl. Quelltext), die mit Tabellen arbeiten und staunt, was man so alles erreichen kann! Als Erinnerung: Ihr könnt jede beliebige Seite auf dem Web mit Netscape ("File / Edit page", "Datei / Seite bearbeiten") analysieren - und auch auf Eure Festplatte speichern und dort weiterverarbeiten. Denkt dran, Tabellen sind recht zentral im Webdesign... denn sie sind ausser CSS / Layers (auf die hier nicht eingegangen wird) das einzige probate Layouthilfsmittel, um z.B. zu bewirken, dass Links immer schön eine Navigationsleiste steht.

Vielleicht juckt es euch, Eure Sachen jetzt schon mal auf den Server zu schmeissen: Hier steht, wie es geht!

Zur Hauptseite zurück gehts hier.