Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog RSS

Tabellen in HTML

Tags table, tr, td
Wenn keine Größe angegeben ist (Attribut width), wird die Tabelle so groß wie nötig. Tabelle so breit wie Fenster: width="100%"
wichtige Attribute von table: border (Strichdicke des Rahmens), cellspacing (Rahmendicke), cellpadding (Luft um Einträge)
Netscape 4.x lässt den Rahmen erst dann ganz weg (kein Zwischenraum mehr), wenn man ausdrücklich border="0" setzt.
Am besten ohne Rahmen arbeiten, weil zu viel grafischer Firlefanz. Dafür vertikal deutlich gruppieren und horizontal leichtes "Zebra" unterlegen, siehe Digitale Medien (Tabelle am Ende). Gilt auch für Print!
Vorsicht: Netscape 4.x zeigt keine Hintergrundfarbe und keinen Rahmen für leere Zellen. Einfach   in alle leeren Zellen setzen.
Zellen über Zeilen und/pder Spalten zusammenfassen: colspan, rowspan
Zellinhalte mit den Attributen align und valign horizontal bzw. vertikal ausrichten: <td valign="bottom">Test</td>

Tabellen "kreativ" nutzen

Blinde (=unsichtbare) Tabellen für Texte, die nebeneinander stehen sollen. (Geht prinzipiell sauberer mit CSS, aber noch nicht gut in den Browsern.)
Beispiel 1: Startseite Digitale Medien
Beispiel 2: mehrere Spalten nebeneinander, siehe Heise. Trick: mal die HTML-Datei herunterladen und überall border="1" statt "0" setzen, um die Tabellen zu sehen.
Tabellen können in Zellen wieder Tabellen enthalten!

"pixelgenaues" HTML-Layout

Tabellen können in Zellen auch Bilder enthalten: <td><img src="irgendwas.gif"></td>
Bilder zerschneiden (Slicing) und die Einzelteile mit einer Tabelle wieder zusammenpuzzeln. Freeware dafür z.B.: Splitz. Statt einfarbiger Teile einfach Hintergrundbild benutzen. Oder Rahmen bauen, siehe Telepolis.
Beliebter Trick: transparentes GIF-Bild erzeugen, das nur einen Pixel enthält. Das mit den Attributen width und height auf die gewünschte Größe bringen und als Platzhalter bzw. Stütze einsetzen.