In diesem Tutorial geht es um Tabellen.
Einleitung:
Die Idee einer Tabelle ist, Zeilen und Zellen zu definieren. Eine ganze Reihe von speziellen Tags (also Befehlen) kann eingesetzt werden, um eine Tabelle zu verfeinern, aber grundsätzlich funktioniert eine Tabelle mit drei simplen Befehlen:
- <TABLE></TABLE>
- <TR></TR>
- <TD></TD>
Wie bei den meisten HTML-Tags braucht man auch hier einen öffnenden und einen schließenden Befehl.
<TABLE> sagt dem Browser, daß da eine Tabelle zum Darstellen kommt,
</TABLE> kennzeichnet das Ende der Tabelle.
<TR> startet eine Zeile
</TR> ihr Ende.
Der letzte wichtige Befehl, der
<TD>-Tag, öffnet eine Zelle, während
</TD> sie wieder schließt.
Eine ganz einfache Tabelle würde also folgendermaßen aussehen:
<TABLE> <TR> <TD> </TD> </TR> </TABLE>
Beispiele:
Um zu verstehen, was Tags bewirken und wo man welchen Tag benötigt, versucht doch mal folgendes:
Wenn Ihr den folgenden Code schreibt (Ihr könnt den dargestellten Code auch per Copy und Paste in Euer Dokument kopieren),
|
Quellcode
|
1
2
3
4
5
6
|
Zeile1 Spalte1<br>
Zeile1 Spalte2<br>
Zeile1 Spalte3<br>
Zeile2 Spalte1<br>
Zeile2 Spalte2<br>
Zeile2 Spalte3<br>
|
wird das so aussehen:
Zeile1 Spalte1
Zeile1 Spalte2
Zeile1 Spalte3
Zeile2 Spalte1
Zeile2 Spalte2
Zeile2 Spalte3
Die Zeilen stehen hier alle untereinander.
Jetzt werden wir mit Hilfe der Tabellen-Tags das Aussehen komplett umwerfen.
Probiert folgenden Code:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<TABLE>
<TR>
<TD>Zeile1 Spalte1<br></TD>
<TD>Zeile1 Spalte2<br></TD>
<TD>Zeile1 Spalte3<br></TD>
</TR>
<TR>
<TD>Zeile2 Spalte1<br></TD>
<TD>Zeile2 Spalte2<br></TD>
<TD>Zeile2 Spalte3<br></TD>
</TR>
</TABLE>
|
Viel Spaß