 |
Tabellen
Tabellen sind recht einfach strukturiert. Sie werden vom <TABLE>-Tageingeleitet und durch </TABLE> abgeschlossen. Mit <CAPTION>und </CAPTION> wird die Überschrift der Tabelle definiert. Dabei legt der Parameter ALIGN fest, ob die Überschrift über der Tabelle (ALIGN=TOP) oder unter der Tabelle (ALIGN=BOTTOM) steht.
Danach folgen die einzelnen Zeilen der Tabelle, die zwischen <TR> und</TR> stehen. Die einzelnen Felder (Spalten) der Tabelle werden in<TD> und </TD> eingeschlossen. Der Browser berechnetautomatisch die Maße der Tabellenfelder. Wird anstelle von TD der Tag TH verwendet, erscheint die Schrift im Feld fett.
Durch die Option BORDER=nn
kann der Tabellenrand festgelegt werden; BORDER=1 versieht die Tabelle mit
einem schmalen Rahmen, BORDER=0 zeichnet die Tabelle ohne
Rand. Die beiden folgenden Tabelle werden eingegeben als:
<TABLE BORDER=0>
<CAPTION>Eine einfache Tabelle ohne Rahmen</CAPTION>
<TR><TH></TH><TH>Spalte 1</TH><TH>Spalte 2</TH><TH>Spalte 3</TH></TR>
<TR><TH>Zeile 1</TH><TD>Feld 1,1</TD><TD>Feld 2,1</TD><TD>Feld 3,1</TD></TR>
<TR><TH>Zeile 2</TH><TD>Feld 1,2</TD><TD>Feld 2,2</TD><TD>Feld 3,2</TD></TR>
</TABLE>
<P>
<TABLE BORDER=1>
<CAPTION>Eine einfache Tabelle mit Rahmen</CAPTION>
<TR><TH></TH><TH>Spalte 1</TH><TH>Spalte 2</TH><TH>Spalte 3</TH></TR>
<TR><TH>Zeile 1</TH><TD>Feld 1,1</TD><TD>Feld 2,1</TD><TD>Feld 3,1</TD></TR>
<TR><TH>Zeile 2</TH><TD>Feld 1,2</TD><TD>Feld 2,2</TD><TD>Feld 3,2</TD></TR>
</TABLE>
Das sieht dann so aus:
Eine einfache Tabelle ohne Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
Eine einfache Tabelle mit Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
Man kann Spalten auch über mehrere Zeilen ziehen oder eine Zeile über
mehrere Spalten. Der Quelltext:
<TABLE BORDER=1>
<CAPTION>Tabelle mit gedehnten Zellen</CAPTION>
<TR><TH></TH><TH COLSPAN=2>Spalte 1/2</TH><TH>Spalte 3</TH></TR>
<TR><TH>Zeile 1</TH><TD>Feld 1,1</TD><TD ROWSPAN=2>Feld 2</TD><TD>Feld 3,1</TD></TR>
<TR><TH>Zeile 2</TH><TD>Feld 1,2</TD><TD>Feld 3,2</TD></TR>
</TABLE>
sieht dann folgendermaßen aus:
Tabelle mit gedehnten Zellen
| Spalte 1/2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 3,2 |
|---|
Weitere Möglichkeiten bieten geschachtelte Tabellen.
Geschachtelte Tabelle mit gedehnten Zellen
| Feld 1 steht auf der linken Seite und enthält einen
Text der links an den danebenstehenden Tabellen vorbeifliesst. Mit
dem Parameter WIDTH und einer Prozentangabe kann man festlegen,
wie breit die Tabellenteile sein sollen. WIDTH erlaubt auch eine Angabe in Pixeln,
aber dabei sollte man vorsichtig sein. Mit ALIGN=CENTER kann man erreichen,
daß die Tabelleneinträge mittig liegen. Mit CELLPADDING=10 wird der
Abstand zwischen Zelleninhalt und Zellenrahmen auf 10 Pixel festgelegt. |
Eine einfache Tabelle (1) mit Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
|
Eine einfache Tabelle (2) mit Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
|
Eine einfache Tabelle (3) mit Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
|
Der TABLE-Tag kann noch weitere Parameter haben, die wichtigsten sollen hier aufgezählt
werden:
- Mit dem Parameter WIDTH und einer Prozentangabe kann man festlegen, wie breit die
Tabelle sein soll. Die Angabe WIDTH="90%" würde beispielsweise dafür sorgen,
daß die Tabelle nicht die volle Breite des Browserfensters einnimmt.
- Mit ALIGN=CENTER kann man erreichen, daß die Tabelle mittig (bzw. links-
oder rechtsbündig) liegt. Die Kombination von ALIGN=CENTER und WIDTH="90" würde
dafür sorgen, daß links und rechts der Tabelle etwas Rand bleibt - was meist
besser aussieht.
- Die Optionen ALIGN=LEFT oder ALIGN=RIGHT ermöglichen es, den Text links oder
rechts neben der Tabelle weiterlaufen zu lassen. Mit dem Tag <BR CLEAR=ALL> wird
das Weiterlaufen des Textes unterhalb der Tabelle erzwungen.
- Mit CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen in Pixel
festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu stark
links und rechts am Rand "klebt".
- Mit CELLSPACING verändern Sie den Abstand der Tabellenfelder zueinander. Es
wird also der Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt.
- Mit BGCOLOR="#rrggbb" kann die Hintergrundfarbe der Tabelle festgelegt werden.
Besonders wichtig beim Gestalten von Tabellen sind die Parameter CELLPADDING
und CELLSPACING im <TABLE>-Tag.
Als Beispiel soll die folgende Tabelle verändert werden.
Eine einfache Tabelle ohne Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
- CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen
in Pixel festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu
stark links und rechts am Rand "klebt". Dazu die obige Tabelle mit CELLPADDING=10.
Eine einfache Tabelle ohne Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
- CELLSPACING legt fest, wieviele Pixel die Zellenlinien breit sind.
Es wird also der Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt.
Auch dazu die obige Tabelle mit CELLSPACING=10.
Eine einfache Tabelle ohne Rahmen
| | Spalte 1 | Spalte 2 | Spalte 3 |
|---|
| Zeile 1 | Feld 1,1 | Feld 2,1 | Feld 3,1 |
|---|
| Zeile 2 | Feld 1,2 | Feld 2,2 | Feld 3,2 |
|---|
Übrigens: Das geschützte Leerzeichen ( ) in einer leeren
Zelle vermeidet, daß dieses Feld der Tabelle erhaben erscheint. Viele Browserversionen
unterscheiden nämlich zwischen einer leeren Zelle und einer Zelle mit Inhalt.
Versieht man eine Tabelle ohne Rand (BORDER=0) mit einer Hintergrundfarbe, die nur
ein Feld enthält, kann man einen Text farbig hinterlegen. Damit es gut aussieht,
sollte man mit CELLPADDING für etwas Rand um den Text sorgen.
Tabellen kann man aber auch anders verwenden. Die folgende Tabelle hat nur ein Feld.
Der Rand wurde mit BORDER=10 und CELLPADDING=10 passend verbreitert.
Man nehmen eine Tabelle mit nur einem Feld
und strukturiere den Text mit dem <BR>-Tag
und schon hat man ein 'Hinweisschild'. |
Wenn man nun noch den Hintergrund mit <TD BGCOLOR="#FF0000">
einfärbt, erhält man:
Man nehmen eine Tabelle mit nur einem Feld
und strukturiere den Text mit dem <BR>-Tag
- schon hat man ein 'Hinweisschild'.
Mit BORDERCOLOR läßt sich
auch der Rahmen einfärben (nur MS IE). |
Man kann mit Tabellen noch mehr anstellen. Der folgende Screenshot beschreibt
einen Datenblock, wie er bei der Datenfernübertragung oder in Netzwerken
vorkommt. Auch dieses scheinbar grafische Element ist eine Tabelle.
Der Quellcode lautet:
<TABLE BORDER=1 Width="90%">
<TR>
<TD width="15%" align=center bgcolor="#B0FFB0"> Synchro-<BR>nisation</TD>
<TD width="55%" align=center bgcolor="#00FFFF"> Datenblock</TD>
<TD width="15%" align=center bgcolor="#FFBB77"> Block-<BR>sicherung</TD>
<TD width="15%" align=center bgcolor="#CCCCCC"> Block-<BR>ende</TD>
</TR>
</TABLE>
Noch ein Beispiel, das wie gemalt aussieht:
Die Verbindungslinien sind Underline-Zeichen, der Rest wieder Tabellenelemente.
Auch hier ist der Quelltext recht kurz:
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#00FFFF">Computer</td>
<td>___<BR> </td>
<td bgcolor="#00FF00">Modem</td>
<td>_____<BR> </td>
<td bgcolor="#FFFF00">Öffentliches Telefonnetz</td>
<td>_____<BR> </td>
<td bgcolor="#00FF00">Modem</td>
<td>___<BR> </td>
<td bgcolor="#00FFFF">Computer</td>
</tr>
</table>
Oder wollen Sie mal ein paar Buttons ohne Grafikprogrann basteln? Bitte sehr:
Womit wir schon bei Attributen für die einzelnen Tabellenfelder sind. Neben anderen
sind im TD- oder TH-Tag wichtig:
- WIDTH gibt die Breite des Feldes an. Hier kann entweder eine absolute
Zahlenangabe in Pixel stehen oder eine prozentuale Angabe (% der Gesamtbreite).
- HEIGHT gibt die Höhe des Feldes an (in Pixeln oder in % der Höhe
des Anzeigefensters).
- ALIGN legt fest, wie der Text des Zelleninhaltes ausgerichtet wird.
Hier sind die Werte LEFT, RIGHT und CENTER möglich.
- VALIGN legt die vertikale Ausrichtung fest. Hier sind die Werte
TOP, BOTTOM oder MIDDLE möglich.
- BGCOLOR erlaubt das Färben des Zellenhintergrundes (wie mit der
Farbtabelle gezeigt wurde).
Um alle Zellen einer Zeile gleich auszurichten, werden die ALIGN- oder
VALIGN-Angaben im TR-Tag untergebracht. Nun ein Beispiel für
die verschiedenen Möglichkeiten.
|
Spalte 1, links |
Spalte 2, zentriert |
Spalte 3, rechts |
|---|
| Zeile 1, TOP |
Feld 1,1 |
Feld 2,1
...
... |
Feld 3,1 |
|---|
| Zeile 2, BOTTOM |
Feld 1,2 |
Feld 2,2
...
... |
Feld 3,2 |
|---|
| Zeile 3, MIDDLE |
Feld 1,3 |
Feld 2,3
...
... |
Feld 3,3 |
|---|
| Spalte 1 | Spalte 2 |
|---|
| Feld 1,1 | Feld 2,1 |
| Feld 1,2 | Feld 2,2 |
| Feld 1,3 | Feld 2,3 |
WIDTH und HEIGHT können übrigens auch im TABLE-Tag
verwendet werden. Die Optionen ALIGN=LEFT oder ALIGN=RIGHT ermöglichen
es, den Text links oder rechts neben der Tabelle weiterlaufen zu lassen. Mit dem
Tag <BR CLEAR=ALL> wird das Weiterlaufen des Textes unterhalb der
Tabelle erzwungen (wie es hier mit ALIGN=LEFT gezeigt wird). Mit HSPACE=5
im Table-Tab wird etwas Abstand zum Text erzeugt.
Auch Bilder lassen sich in Tabellen sauber ausrichten, wobei man den Rand wegläßt:
 |
 |
 |
Emotikon
freundlich, aber doof |
Emotikon
zustimmend freundlich |
Emotikon
abweisend unfreundlich |
Eine weitere Möglichkeit, Tabellen zu verwenden ist die gezielte
Anordnung von Elementen. Bilder lassen sich beispielsweise in Tabellen
sauber ausrichten, wobei man den Rand wegläßt: Das folgende
Beispiel ist nicht etwa ein einziges Bild, sondern es setzt sich aus
zwei Bildern und einem Textteil zusammen.
 |
Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH |
 |
Wenn man BORDER=1 setzt zeigt sich die Anordnung in der Tabelle (unten).
|
Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH |
|
Der Quelltext der Tabelle ist schon verzwickter:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD ROWSPAN=2 VALIGN=BOTTOM><IMG SRC="images/Zuendh1.jpg"></TD>
<TD VALIGN=MIDDLE>Immer zündende Ideen<BR>
mit der tollen Webseite<BR>
von den famosen Designern<BR>
der Firma <B>Dings & Bums GmbH</B></TD></TR>
<TR><TD VALIGN=BOTTOM><IMG SRC="images/Zuendh2.jpg"></TD></TR>
</TABLE>
Bei älteren Netscape-Browsern kann es vorkommen, daß die Leerzeichen oder
Zeilenvorschübe zwischen den einzelnen TD-Tags zu einem 1 Pixel breiten
Zwischenraum führen. Wer sicher gehen will, hängt nach dem Testen alle Tags
in einer langen Zeile hintereinander. Man sollte auch immer daran denken, daß
die Browser zwar versuchen, aus dem HTML-Code etwas Vernünftiges zu erzeugen,
aber auch dort gibt es Grenzen. Wenn die Tabellenspalten zu schmal gewählt werden,
kann es vorkommen, daß Wörter willkürlich getrennt werden. Viele
Konvertierprogramme geben eine Tabellenbreite in Pixeln vor, wobei der Wert
abhängig von der gewählten Druckerauflösung und vom Zeichensatz
berechnet wird. Hier ist auf jeden Fall Nacharbeit erforderlich.
Wenn Ihre Tabelle im Browser nicht so dargestellt wird, wie Sie sich das vorgestellt
haben oder wenn der Browser die Tabelle überhaupt nicht zeigt, dann gehen Sie
den Quellcode durch. Meist wurde nur ein schließendes Tag vergessen oder ein
öffnendes Tag zweimal hingeschrieben. Da man Tabellen ineinander schachteln
darf, führt sowas den Browser in die Irre.
|
|
|
DIENSTE
