Einführung
Drei Begriffsdefinitionen vorneweg :
Reihen sind die Zeilen der Tabelle ( waagrecht ) .
Kolonnen sind die Gegenstücke dazu , also die senkrechten 'Abschnitte' .
Zellen sind die einzelnen Felder einer Tabelle .
Tabellen sind ein äusserst wichtiges Gestaltungsmittel in HTML - Dokumenten .
Es kann grundsätzlich zwischen blinden und sichtbaren Tabellen unterschieden werden .
blinde Tabelle :
Punkt 1
Punkt 2
Punkt 3
Punkt 4
|
Dies ist eine blinde Tabelle , bestehend aus einer Reihe (=Zeile) und zwei Kolonnen . Es sind keine Linien sichtbar .
|
sichtbare Tabelle :
Punkt 1
Punkt 2
Punkt 3
Punkt 4
|
Dies ist eine sichtbare Tabelle , bestehend aus einer Reihe und zwei Kolonnen. Es sind Linien sichtbar . Dicke und Farbe des Tabellenrahmens können definiert werden ( border und bordercolor ) . Einzelne Tabellenzellen oder die gesamte Tabelle können auch mit einer Hintergrundfarbe oder einem -bild hinterlegt werden ( background bzw. bgcolor ) .
|
Natürlich können Tabellen auch miteinander verschachtelt werden :
| main
| | updates
| | faq
| | links
| | guestbook
|
|
Das Menü rechts ist eine separate Tabelle , bestehend aus fünf Reihen und einer Kolonne. Die zweite , blinde Tabelle ( bestehend aus einer Reihe und zwei Kolonnen ) ordnet das Menü und diesen Textblock an .
|
Definition einer Tabelle
Tabellen werden mit Hilfe von drei Tags definiert :
- <table> : Innerhalb dieses Tags wird die gesamte Tabelle definiert .
- <tr> : Mit dem <tr> - Tag wird eine neue Tabellenzeile ( =Reihe ) eröffnet .
- <td> : Innerhalb dieses Tags wird der Inhalt einer einzelnen Tabellenzelle definiert .
Das mag jetzt alles ein bisschen kompliziert klingen . Sehen wir uns mal die Definition einer Beispieltabelle im Einzelnen an . Angenommen , wir möchten eine Tabelle erstellen mit 2 Reihen ( den waagrechten 'Abschnitten' ) und 3 Kolonnen ( den senkrechten ) .
Also eine Tabelle von folgender Gestalt :
Als erstes notieren wir das <table> - Tag , um eine Tabelle zu definieren :
<table>
</table>
Die Tabelle soll zwei Reihen haben . Der entsprechende Quellcode hat nun also folgende Gestalt :
<table>
<tr>
( Inhalt 1 . Reihe )
</tr>
<tr>
( Inhalt 2. Reihe )
</tr>
</table>
Die Tabelle soll 3 Kolonnen haben . Da sie aus 2 Reihen besteht , müssen insgesamt 6 einzelne Tabellenzellen definiert werden , 3 in jeder Reihe :
<table>
<tr>
<td> ... Inhalt erste Reihe , erste Zelle.
</td>
<td> ... Inhalt erste Reihe , zweite Zelle.
</td>
<td> ... Inhalt erste Reihe , dritte Zelle.
</td>
</tr>
<tr>
<td> ... Inhalt zweite Reihe , erste Zelle.
</td>
<td> ... Inhalt zweite Reihe , zweite Zelle.
</td>
<td> ... Inhalt zweite Reihe , dritte Zelle.
</td>
</tr>
</table>
Das ganze sieht dann so aus :
|
... Inhalt erste Reihe , erste Zelle.
|
... Inhalt erste Reihe , zweite Zelle.
|
... Inhalt erste Reihe , dritte Zelle.
|
|
... Inhalt zweite Reihe , erste Zelle.
|
... Inhalt zweite Reihe , zweite Zelle.
|
... Inhalt zweite Reihe , dritte Zelle.
|
( Natürlich können anstelle von Text auch beliebig andere Objekte eingebunden werden , z.B. Bilder , Trennlinien , etc . )
Um den Tabellenrahmen sichtbar zu machen , muss bloss das Attribut border in das <table> - Tag eingefügt werden ( <table border> ... ):
|
... Inhalt erste Reihe , erste Zelle.
|
... Inhalt erste Reihe , zweite Zelle.
|
... Inhalt erste Reihe , dritte Zelle.
|
|
... Inhalt zweite Reihe , erste Zelle.
|
... Inhalt zweite Reihe , zweite Zelle.
|
... Inhalt zweite Reihe , dritte Zelle.
|
Auf die Dauer sind solche Standard - Rahmen natürlich zu langweilig . Auch möchte man z.B. Weite und Höhe , Ausrichtung der Elemente oder Hintergrundfarbe bestimmen . Dafür stehen ein paar Attribute zur Verfügung :
( Übrigens , Tabellenzellen können auch waagrecht oder senkrecht miteinander verbunden werden mit Hilfe des
colspan bzw. rowspan - Attributs . Wie das funktioniert , steht ebenfalls weiter unten . )
<table> - Attribute
Auf das <table> - Tag sind folgende Attribute anwendbar :
- width und height : Damit können Weite und Höhe der Tabelle bestimmt werden . Je nach Einsatz erfolgt dies entweder mit ganzen Zahlen (=Pixel) oder mit prozentualen Werten , z.B height="66%" .
- align :
Damit wird die Tabelle horizontal ausgerichtet . Dieses Attribut ist nur von Bedeutung , falls die Tabelle nicht die gesamte Breite einnimmt und man diese z.B. zentriert (="center") oder am rechten Rand (="right") ausrichten möchte .
- cellpadding : Mit 'cellpadding' kann der Abstand des Zelleninhalts vom Zellenrand variiert werden .
- cellspacing : Damit wird der Abstand der einzelnen Zellen untereinander sowie zum Tabellenrand variiert .
- border und bordercolor : Damit wird ein Rahmen erzeugt . Wird keine Rahmenfarbe gewählt , wird der Rahmen in der innerhalb des Browser vordefinierten Farbe dargestellt ( Mausgrau , glaub' ich ;) . border und border="1" sind gleichwertig .
- bgcolor : Damit wird die gesamte Tabelle mit einer bestimmten Hintergrundfarbe hinterlegt .
- background : Damit wird die gesamte Tabelle mit einem bestimmten Hintergrundbild hinterlegt .
<td> - Attribute
Auf das <td> - Tag können folgende Attribute ebenfalls angewendet werden :
width , height , align , bgcolor , background
Folgende Attribute kommen noch hinzu :
- valign : Damit kann der Inhalt der Tabellenzelle vertikal ausgerichtet werden. Standardmässig werden die Inhalte mittig ausgerichtet , was der Angabe valign="middle" entsprechen würde . Relevante Werte sind "top" für eine Ausrichtung am oberen Rand sowie "bottom" für eine am unteren .
- colspan / rowspan : Damit können einzelne Tabellenzellen waagrecht ( colspan ) oder senkrecht ( rowspan ) verbunden werden .
Nun ein Beispiel mit möglichst allen Attributen :
|
<table width="80%" height="350" align="center" cellpadding="7" cellspacing="0" border bordercolor="#808080">
<tr>
<td colspan="2"> ... Inhalt erste Reihe , erste und zweite Zelle ( colspan ).
</td>
<td bgcolor="#C0C0C0" rowspan="2"> ... Inhalt erste Reihe , dritte Zelle , Inhalt zweite Reihe , dritte Zelle ( rowspan ) . </td>
</tr>
<tr>
<td valign="top"> ... Inhalt zweite Reihe , erste Zelle.
</td>
<td valign="bottom" align="right" background="xild01.jpg"> ... Inhalt zweite Reihe , zweite Zelle.
</td>
</tr>
</table>
|
Ergebnis :
|
... Inhalt erste Reihe , erste und zweite Zelle ( colspan ).
|
... Inhalt erste Reihe , dritte Zelle , Inhalt zweite Reihe , dritte Zelle ( rowspan ) .
|
|
... Inhalt zweite Reihe , erste Zelle.
|
... Inhalt zweite Reihe , zweite Zelle.
|
Praktisch jede Webseite verwendet Tabellen .
Ein etwas umfangreicheres ( und grafisch vielleicht ansprechenderes ;) Beispiel innerhalb dieses Kurses gibt es auch noch hier : tabellen02.html .
bekannte Probleme
-
Definiert ihr einen Hintergrund ( Farbe oder Bild ) , sollte die betreffende Tabelle oder einzelne Zelle mindestens ein geschütztes Leerzeichen enthalten - ansonsten wird die Farbe vom Netscape Navigator nicht angezeigt .
-
Ein weiteres Problem bei Tabellen ist die ungenaue Darstellung einer in der Breite definierten Tabellenzelle . Bei viel Inhalt in der einen Zelle wird die andere oft unwillkürlich kürzer . Um eine Mindestbreite zu erhalten , bindet man ein transparentes GIF ein :
|
( ... )
<td width="230">
<img src="xsp.gif" width="230" height="1"><br>
Inhalt in einer Tabellenzelle , die garantiert 230 Pixel breit ist .
( ... )
|
Das transparente Gif ist eine 1 x 1 Pixel grosse Grafik mit transparentem Hintergrund. Die erforderliche Länge wird mit dem width- Attribut bestimmt. In meinem Fall habe ich die Grafik 'xsp.gif' benannt (x für Bilddateien [damit sie zuhinterst im Ordner sind], sp für space[r] :). Sie ist daher unter der Adresse xsp.gif abrufbar- oder einfach folgendes Bild speichern:
( 42 Byte , 1x1 Pixel . Vergrössert auf 30 x 30 Pixel und mit einem Rahmen versehen , um einfacheres Speichern zu ermöglichen . )
Analog lässt sich auch eine Mindesthöhe erzwingen .
-
Ein drittes, häufiges Problem ist die Definition eines Tabellenhintergrundes, falls ihr mehrere Zellen habt. Netscape stellt dabei für jede Zelle das Hintergrund einzeln dar. Um dies zu verhindern, müsst ihr:
- die gewünschte Tabelle mit einer zweiten umklammern und
- in den einzelnen Zellen der ersten Tabelle jeweils ein transparentes gif einbinden.
Beispiel :
<table width="400" height="200" cellspacing="0"
background="xild01.jpg"><tr><td>
<table border width="100%"><tr><td background="xsp.gif">
</td><td background="xsp.gif">
</td></tr><tr><td background="xsp.gif" colspan="2">
</td></tr></table>
</td></tr></table>
ergibt :
|
Und hier zum Vergleich die 'einfache', Netscape-untaugliche Version:
(Wer mit Netscape surft, wird ihr merken, dass das hier (noch) nicht so ganz hinhaut. -- http://www.ideenreich.com/praxis6.shtml)
