HTML - Tabelle

	Anleitung zum Anlegen einer Tabelle im MSN Editor im HTML - Modus

Als Beispiel wird eine Tabelle mit 2 Zeilen angelegt: Sie erstellen eine Tabelle: <table die Zellen in der Tabelle sollen direkt aneinander stossen, ohne Platz (Space) dazwischen: cellspacing=0 die Zellen sollen bis zum Rand benutzt werden, also ohne zusätzliche Füllung (Padding): cellpadding=0 Rahmen (Border) brauchen Sie in diesem Fall nicht: border=0 die Breite / Weite (Width) der Tabelle soll 600px (Pixel) betragen: width=600 der Hintergrundfarbe (Backgroundcolor) soll grau sein (#cccccc): bgcolor=#cccccc um die Anweisung abzuschliessen eine ">" Das ganze zusammen: <table cellspacing=0 cellpadding=0 border=0 width=600 bgcolor=#cccccc> Jetzt die Zeile (Row), in der die beiden Zellen untergebracht werden sollen (TabellenReihe = TableRow = tr). Mit <tr> fängt die Reihe an und bei </tr> endet diese <tr></tr> Dazwischen müssen die Zellen (Table Data Cells = td) untergebracht werden: <tr> <td>die erste</td> <td>die zweite</td> </tr> Am Schluss muss der Browser noch wissen, wo die Tabelle zuende ist, dafür gibts wieder wie schon vorher bei tr und td das "/" , also </table> Anschliessend können Sie die Tabelle weiter anpassen: Ihre erste Datenzelle verändern Sie so, dass sie nur 200 der 600px einnimmt: <td width="200">die erste</td> und zusätzlich so, daß die Schrift in der Zelle vertikal (v) oben(Top) augerichtet(Align) wird: <td vAlign="top" width="200">die erste</td> In der zweiten Zelle möchte ich dass mein Text horizontal zentriert(center) ausgerichtet(Align) wird: <td Align="center">die zweite</td> Zusätzlich setzen Sie die Höhe (Height) auf 30px und weisen die übrigen 400px zu: <td align="center" height="30" width="400">die zweite</td> Die Höhe der gesamten Tabelle richtet sich automatisch nach der Höhe aller Inhalte. So sollte nun Ihr HTML-Gerüst aussehen: <table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#000080"> <tr> <td vAlign="top" width="200">die erste</td> <td align="center" height="30" width="400">die zweite</td> </tr> </table> ...und so sieht es in Ihrem Browser aus: die erste die zweite

Anleitung von Jenn¥