Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog
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.