Hier folgen noch ein paar Ergänzungen zu dem Tutorial "Tabellen", dass ihr weiter unten noch in Kopie findet.
Durch die Befehle ' colspan="x" ' und ' rowspan="x" ', die innerhalb des Tags "<TD> stehen, können einzelne Zellen einer Zeile (colspan) oder Spalte (rowspan) zusammengefasst werden. Dadurch können z.B. Überschriften innerhalb einer Tabelle über alle Spalten zentriert werden. Durch "<td colspan="3" align="center">" werden somit drei Zeilen miteinander verbunden und der Text innerhalb dieser Zelle zentriert.
Um Leerzeilen innerhalb einer Tabelle einzufügen, gibt es verschiedene Wege.
Zum ersten kann mann innerhalb einer Zelle einfach ein <P> setzen. Je nach Browser-Version ist es hier nötig, hinter dem Tag ein geschütztes Leerzeichen zu setzen (" "), um dieses Leerzeichen wirklich darstellen zu können. Diese Version hat den Nachteil, dass die Höhe der Leerzeile nicht variabel ist, sondern über die Font-Angaben definiert werden.
Die 2. Möglichkeit ist, ein transparentes Bild im gif-Format in der Größe 1 mal 1 Pixel zu erstellen. Dann kann man über
<tr>
<td height="6"><img src="spacer.gif" width="1" height="1"></TD>
</TR>
Eine Leerzeile erstellen. die erste height-Angabe ist dabei variabel und kann durch jede beliebeige Zahl ersetzt werden.
Eine weitere praktische Möglichkeit ist, die Höhe einer Zeile, in der bereits etwas steht, sehr hoch zu setzen und den Text nach oben hin auszurichten.
Beispiel:
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td height="40"><Font face="Arial, Helvetica, serif">Beispiel</FONT></TD>
</TR>
</table>
Die Höhenangabe 40 ist deutlich höher als die Zeile ohne Höhenangabe wäre. Durch die Ausrichtung nach oben ("valign=top") entsteht somit eine künstliche Leerzeile.
Man kann den Text durch "valign="center" auch zentrieren oder durch valign="bottom" unten ausrichten.
Hier jetzt noch - wie oben angekündigt - das Ursprungstutorial zu Tabellen.
Tabellen
Die Vorteile sind ganz klar:
1. mit Hilfe von Tabellen lässt sich alles auf den Pixel genau platzieren
2. Tabellen sind fast ausschließlich unabhängig von der Auflösung
3. Das HP-Design muss nur einmal geladen werden und die Inhalte können per eingebetteten Frame geändert werden. Dies spart natürlich enorme Ladezeiten und sieht besser aus, als wäre alles nur aus Frames
4. eine Browser , besonders ältere, unterstützen keine Frames, aber Tabellen sollten eigentlich alle Browser unterstützen
Das Grundgerüst sollte immer so aussehen:
<table>
<tr><td>Inhalt Reihe 1 Spalte 1</td>
<td>Inhalt Reihe 1 Spalte 1</td></tr>
<tr><td>Inhalt Reihe 2 Spalte 1</td>
<td>Inhalt Reihe 2 Spalte 2</td></tr>
</table>
mit folgenden Attributen lässt sich das Aussehen der Tabelle variieren:
border=x gibt die Stärke des Rahmens an
width=x gibt die Breite an
height=x gibt die Höhe an
bordercolor=#xxxxxx gibt die Rahmenfarbe an
bgcolor=#xxxxxx gibt die Hintergrundfarbe an
cellspacing=x gibt die Dicke der Gitternetzlinien an
cellpadding=x gibt den Abstand zwischen Zellenrand und Zelleninhalt an
Beispiel:
<table border=0 cellspacing=no cellpadding=no width=200 height=250>
<tr><td width=50>inhalt</td>
<td>width=150>inhalt</td></tr>
</table>