Natürlich kann man auch Tabellen erzeugen, um Daten geordnet dazustellen.
Mit Tabellen lassen sich aber Webseiten erst richtig frei gestalten, da man Bilder und Text damit frei auf der Webseite positionieren kann. Für diese Zwecke eignen sich besonders Tabellen ohne Rahmen, bzw. Gitternetzlinien.
Der Befehl für eine Tabelle in HTML ist <TABLE>:
<TABLE>Hier steht später der Inhalt der Tabelle</TABLE>
|
Jetzt haben Sie aber nur eine Tabelle mit einer Spalte und einer Zeile, eine 1x1 Tabelle. Diese hilft ihnen jetzt noch nicht wirklich weiter. Also fügen Sie der Tabelle nun eine weitere Spalte und eine weitere Zeile hinzu.
Um eine Zeile einzuleiten, fügen Sie <TR> ein. Geschlossen wird die Zeile dann entsprechend mit </TR>.
Um eine Spalte einzuleiten fügen Sie <TD> ein und schliesen wieder mit </TD>. Die Spalten werden immer innerhalb einer Zeile definiert!
Hierzu ein Beispiel:
<TABLE>
<TR>
<TD> Text für die erste Zeile und erste Spalte</TD>
<TD>Text für die zweite Zeile und erste Spalte</TD>
</TR>
<TR>
<TD> Text für die zweite Zeile und die erste Spalte</TD>
<TD>Text für die zweite Zeile und die zweite Spalte</TD>
</TR>
<TABLE>
|
Als Ergebnis erhalten Sie nun folgende Tabelle:
Text für die erste Zeile und erste Spalte |
Text für die erste Zeile und zweite Spalte |
Text für die zweite Zeile und die erste Spalte |
Text für die zweite Zeile und die zweite Spalte |
Um eine Tabelle mit Rahmen zu erhalten, fügen Sie dem Befehl TABLE einfach noch BORDER bei. BORDER gibt die Stärke des Tabellenrahmen an und wird einfach in den TABLE Befehl mit hineingeschrieben:
<TABLE BORDER>
<TR>
<TD> Text für die erste Zeile und erste Spalte</TD>
<TD>Text für die zweite Zeile und erste Spalte</TD>
</TR>
<TR>
<TD> Text für die zweite Zeile und die erste Spalte</TD>
<TD>Text für die zweite Zeile und die zweite Spalte</TD>
</TR>
<TABLE>
|
Sie sollten nun folgendes auf ihrem Bildschirm sehen:
Text für die erste Zeile und erste Spalte |
Text für die erste Zeile und zweite Spalte |
Text für die zweite Zeile und die erste Spalte |
Text für die zweite Zeile und die zweite Spalte |
Gibt man bei BORDER keinen Wert an, wird automatisch <BORDER=1> erzeugt. Der Befehl BORDER kann jedoch noch weiter bestimmt werden, indem man angibt wie breit der BORDER sein soll:
Die Zahl hinter BORDER bestimmt die Breite des Rahmens in Pixeln.
Beispiel:
Text für die erste Zeile und erste Spalte |
Text für die erste Zeile und zweite Spalte |
Text für die zweite Zeile und die erste Spalte |
Text für die zweite Zeile und die zweite Spalte |
Mit dem Befehl CELLSPACING kann man nun auch noch den Abstand der einzelnen Zellen zueinander in Pixel bestimmen. Man geht genauso vor wie bei dem Befehl BORDER und bestimmt mit der Zahl die Stärke der Gitterlinien in Pixel:
Beispiel:
<TABLE BORDER=5 CELLSPACING=5> ...
|
Ihre Tabelle sollte dann wie folgt aussehen:
Text für die erste Zeile und erste Spalte |
Text für die erste Zeile und zweite Spalte |
Text für die zweite Zeile und die erste Spalte |
Text für die zweite Zeile und die zweite Spalte |
Wichtig ist, dass BORDER und CELLSPACING nicht mitprogrammiert werden müssen. Will man weder das eine noch das andere, kann man jederzeit beides auch weglassen. ABER: Den Befehl TABLE brauchen Sie immer um eine funktionsfähige Tabelle zu erhalten.
An einem letzten Beispiel sehen Sie nun schon fortgeschrittenes Programmieren einer Tabelle. Sehen Sie sich zunächst den Quelltext an:
<TABLE WIDTH=80% BORDER="5" BGCOLOR="#FAC832" BORDERCOLOR="#0A0A55" ALIGN="center">
<TR>
<TH COLSPAN="2" ALIGN="center"> Farben in einer Tabelle</TH>
</TR>
<TR>
<TD ALIGN="center"> Rahmen in einem Blauton</TD>
<TD ALIGN="center">Hintergrund in Gelbton</TD>
</TR>
</TABLE>
|
Das Attribut WIDTH gibt die Breite der Tabelle an. Hier in unserem Beispiel haben wir der Tabelle die Größe 80%, d.h. 80% der Bildschirmbreite gegeben. Die Breite der Tabelle passt sich also individuell dem verwendeten Bildschirm an. Man kann WIDTH aber auch in Pixeln angeben. So bekommt die Tabelle einen festen Wert zugewiesen und das Design wird nicht zufällig von der Bildschirmgröße des jeweiligen Users bestimmt, wie das bei der Prozentangabe ist.
Das Attribut BORDER ist oben bereits beschrieben worden.
Das Attribut BGCOLOR bedeutet backroundcolor und beschreibt die Hintergrundfarbe innerhalb der Tabelle. Hier ist Sie gelb. Mit unserem
Farbauswähler können Sie jede beliebige Farbe erstellen und direkt den HTML Farbcode ablesen.
Das Attribut BORDERCOLOR gibt die Farbe des Tabellenrahmens an. Auch hier können Sie die Farbe die Sie brauchen mit unserem Farbauswähler aussuchen.
Das Attribut ALIGN gibt die Ausrichtung der Tabelle an. Als Möglichkeiten gibt es da zum Beispiel:
ALIGN="center"; ALIGN="left"; ALIGN="right"
Das Attribut COLSPAN gibt Ihnen die Möglichkeit, mehrere Zellen einer Tabelle horizontal miteinander zu verbinden. Die Zahl dahinter gibt die Anzahl der zu verbindenden Zellen an.
Die Attribute BGCOLOR und ALIGN lassen sich auch innerhalb einer Zeile bzw. Spalte anwenden. Sie stehen dann hinter TD bzw. TR.
Das Ergebnis sieht dann wie folgt aus:
Farben in einer Tabelle |
Rahmen in einem Blauton |
Hintergrund in Gelbton |
|