#Eins: Nochmal etwas hilfreiches zu Tabellen: Wir wissen, dass es schwierig ist, eine Tabelle immer so zu erstellen, wie wir uns das vorstellen. Oft spielt uns der Browser einen Streich. Um dies etwas in den Griff zu bekommen, nutzen wir beim Layout ein transparentes Pixelbild, ein Blind-gif. Haben wir solch ein Bild mit einer definierten Breite eingebaut, so kann der Browser den entsprechenden Tabellenteil nicht kleiner darstellen. Der Quelltext sieht hierbei zum Beispiel so aus: <TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD colspan="2"><IMG src="blind.gif" width="400" height="10"></TD></TR> <TR><TD>Tabellenzelle eins</TD><TD>Tabellenzelle zwei</TD></TR></TABLE> Was ist hierbei jetzt passiert? Durch die <IMG>-Attribute width (Breite) und height (Höhe) definieren wir in der ersten Zeile <TR> die Breite der Tabelle (hier: 400). Das Blind.gif (es reicht ein Bild von 1 x 1 Pixel) wird hierbei auf die entsprechende Größe gestreckt. Da es transparent ist, bleibt es also unsichtbar. Da wir mit colspan zwei Datenfelder <TD> zusammengefasst haben, definieren wir also die Breite der gesamten Tabelle. Wichtig: Immer beide Werte angeben: width und height. Sonst skaliert der Webbrowser das Bild proportional, also bei 400 auf width="400" und height="400". Und das wäre ja nicht in unserem Sinn. Diesen Tipp einfach mal austesten, dann wird er schnell klar. Anmerkung: Das Blind.gif in einem Bildbearbeitungsprogramm erstellen und Farbe auf transparent setzen. Größe von 1 x 1 Pixel reicht. border="0" drückt im übrigen aus, dass unsere Tabelle keinen Rahmen hat. Jeder Wert größer 0 gibt also einen Tabellen-Rahmen in entsprechender Stärke an.
#Zwei: Gerade habe ich in Tipp #Eins die zuzsätzlichen Attribute cellpadding und cellspacing erwähnt. Was bedeuten nun diese beiden Ergänzungen? cellpadding: Dieser Pixel-Wert gibt den Randabstand von Zelleninhalt zum Zellenrand an. Dies vergrößert dann allerdings die Tabelle! cellspacing: Durch diesen Pixel-Wert wird die Dicke der Gitternetzlinien definiert, was natürlich die Tabelle auch vergrößert. Im Beispiel sind beide Werte auf Null gesetzt, also beide Attribute ausgeschaltet. Auch hier gilt wieder. Einfach mal ausprobieren!
#Drei: Soll eine Tabelle auf der Website ausgerichtet werden, so ist im <TABLE>-Tag das align-Attribut angesagt: <TABLE align="center"> Diese Tabelle wird auf der Seite mittig plaziert. Folgende Zusätze sind möglich: align="left" --- Tabelle wird links plaziert, Textumfluss rechts align="center" --- Tabelle wird immer zentriert (kein Textumfluss) align="right" --- Tabelle steht am rechten Rand der Seite, Textumfluss links
#Vier: Die Rahmenfarbe - sofern ein Rahmen gewünscht ist - geben wir mit bordercolor="..." an: <TABLE border="3" bordercolor="red"> Hierbei können wir die Grundfarben in Englisch eingeben, weitere Farben als RGB-Wert (z. B.: "#000000" entspricht black). Hintergrundfarben können wir jeder Zelle <TD> einzeln oder aber der gesamten Tabelle mit dem Attribut bgcolor zuweisen: <TABLE border="0" bgcolor="green"> oder <TD bgcolor="gold"> Auch hier sind natürlich die RGB-Werte genauso möglich. So, das waren mal wieder zahlreiche Details zum Einsatz von Tabellen.