Tabellen

Tabellen bestehen aus Zeilen und Spalten. Um eine Tabelle richtig darstellen zu können muss dem Browser (IE, Netscape oder Opera) mitgeteilt werden, wann die Tabelle, die Zeilen und die Spalten beginnen bzw. wieder aufhören.

Dazu werden folgende Tags verwendet:

< tr > => < td > Inhalt < /td > < td > Inhalt < /td > < td > Inhalt < /td > => < /tr >
< tr > => < td > Inhalt < /td > < td > Inhalt < /td > < td > Inhalt < /td > => < /tr >

 

Mit folgenden Befehlen können Tabellen weiter formatiert werden:

< table > Tabelle < /table > Der Befehl leitet eine Tabelle ein.
< tr > Zeile < /tr > table row = Tabellenzeile
< td > Spalte < /td > table data = Tabelledaten (Zellen)
width Damit kann man die Größe der Tabelle und die Spaltenbreite angeben.
align="center" Damit kann man die Tabelle aber auch den Text in einer Zelle ausrichten (je nachdem, wo es eingefügt wird.
border="2" Damit legt man die Rahmenstärke fest.
< th > Inhalt < /th > Mit diesem Tag kann man Spaltenüberschriften erzeugen (table header).  Anstatt des < td > wird in der ersten Zeile < th > geschrieben.
< caption >  < /caption > Tabellenüberschrift
valign="top" Damit kann der Text einer Zelle ausgerichtet werden:
top = oben, middle = in der Mitte einer Zelle, bottom = unten
colspan="Anzahl" (column span= Spalte umfassen): Damit kann man mehrere Spalten miteinander verbinden. 
rowspan="Anzahl" (row span = Zeilen umfassen): Damit können mehrere Zeilen miteinader verbunden werden.
cellspacing="Pixel" (cellspacing = Zellzwiscenraum): Damit kann man den Zwischenraum zwischen den einzelnen Zellen vergrößern.
cellpadding="Pixel" cellpadding = Zellinhaltsabstand): Damit kann der Abstand zwischen Text und Zellenbegrenzung vergrößert werden.
bgcolor="Farbe" Damit kann die gesamte Tabelle farbig gemacht werden. Es können aber auch nur einzelne Zellen, Spalten oder Zeilen farbig gemacht werden.
bordercolor="Farbe" Damit kann der Rahmen farbig gestaltet werden. Es könne aber auch nur einzelne Zellen, Spalten oder Zeilenumrandungen farbig gemacht werden. 
background="Dateiname" Damit kann ein Hintergrundbild eingefügt werden.

Die Größe einer Tabelle kann ebenfalls definiert werden. Dazu gibt es zwei Möglichkeiten:

Aufgaben:

  1. Stelle das Grundgerüst einer Tabelle dar und erkläre die Tags.
    < table >
    < tr >
    < td >
    ....
  2. Stelle die einzelnen Tags in einer Tabelle dar und erkläre sie schriftlich.
  3. Erstelle einige Beispieltabellen.