HTML-Kurs Lektion 10 Teil 1

Lektion 10/Teil 1 - Tabellen

Eigentlich dienen die Tabellen dazu Diagramme darzustellen. Aber sie helfen Ihnen auch dabei Texte und Bilder zu positionieren.

Allerdings gehören die Tabellen auch zu den etwas komplizierteren HTML-Befehlen. Die Seiten mit der Programmierung werden schnell ziemlich lang und man muss aufpassen, dass man den Überblick behält.

Das Grundgerüst einer Tabelle sieht so aus:

<TABLE>...</TABLE> umschließt die ganze Tabelle. Im <TABLE>-Befehl kann man eine ganze Menge Zusatzangaben machen:

BORDER=Pixelanzahl bestimmt, ob die Tabelle eine Umrandung hat oder nicht. Bei BORDER=0 hat sie keine. Mit BORDER=2 bekommt die Tabelle eine Umrandung, die 2 Pixel breit ist.

CELLSPACING=Pixelanzahl bestimmt, wieviele Pixel breit die Stege zwischen den Spalten sind.

CELLPADDING=Pixelanzahl bestimmt, wieviel Abstand die Schrift in den Feldern vom Rand hat..

<TR>...</TR> umschließt alles, was innerhalb einer Tabellenreihe steht. TR steht für Table-Row. 'Row' heißt auf deutsch 'Reihe'.

Im <TD>...</TD>-Befehl steht der eigentliche Tabelleninhalt. Für jedes Feld in der Tabelle braucht man ein <TD>...</TD>. Je mehr <TD> eine <TR> enthält, desto mehr Spalten bekommt die Tabelle. TD steht für Table-Data. 'Data' heißt auf deutsch 'Daten'.

Das erste Beispiel:

<HTML>
<HEAD>
   <TITLE>Tabellen</TITLE>
</HEAD>

<BODY TEXT="#0000FF" BGCOLOR="#C0C0C0">

<TABLE BORDER=10 CELLSPACING=10 CELLPADDING=10>
      <TR>
            <TD>Das ist die erste Spalte in der ersten Reihe</TD>
            <TD>Das ist die zweite Spalte in der ersten Reihe</TD>
            <TD>Das ist die dritte Spalte in der ersten Reihe</TD>
      </TR>
      <TR>
            <TD>Das ist die erste Spalte in der zweiten Reihe</TD>
            <TD>Das ist die zweite Spalte in der zweiten Reihe</TD>
            <TD>Das ist die dritte Spalte in der zweiten Reihe</TD>
      </TR>
</TABLE>

</BODY>
</HTML>

Beispiel anzeigen

Innerhalb des <TD>-Befehls kann man weitere Angaben machen. Man kann ähnlich wie beim <P>...</P>-Befehl angeben, welche Ausrichtung der Inhalt haben soll:

<TD ALIGN=LEFT> - der Tabelleninhalt steht am linken Rand. Diesen Befehl kann man sich in der Regel sparen. Denn wenn man es nicht anders angibt, steht der Inhalt sowieso links.

<TD ALIGN=CENTER> - der Tabelleninhalt wird in die Mitte der Spalte gestellt.

<TD ALIGN=RIGHT> - der Tabelleninhalt steht an der rechten Seite der Spalte.

<TD VALIGN=TOP> - der Tabelleninhalt steht am oberen Rand der Spalte.

<TD VALIGN=MIDDLE> - der Tabelleninhalt steht in der Mitte der Spalte. Diesen Befehl kann man sich in der Regel sparen. Denn wenn man es nicht anders angibt, steht der Inhalt sowieso in der Mitte.

<TD VALIGN=BOTTOM> - der Tabelleninhalt steht am unteren Rand der Spalte.

Das zweite Beispiel:

<HTML>
<HEAD>
<TITLE>Tabellen</TITLE>
</HEAD>

<BODY TEXT="#000000" BGCOLOR="#C0C0C0">

<TABLE BORDER=5 CELLSPACING=10 CELLPADDING=10>
<TR>

<TD VALIGN=TOP>

Das ist die erste Spalte in der ersten Reihe. Der Text steht am oberen Rand der Spalte.</TD>

<TD ALIGN=CENTER>

Das ist die zweite Spalte in der ersten Reihe. Der Text steht in der Mitte. Damit man bei den anderen Spalten sieht, dass der Text einmal am oberen und einmal am unteren Spaltenrand steht, muss dieser Text etwas länger sein.</TD>

<TD ALIGN=RIGHT VALIGN=BOTTOM>

Das ist die dritte Spalte in der ersten Reihe. Der Text steht am rechten unteren Spaltenrand.</TD>

   </TR>
   <TR>
      <TD>Das ist die erste Spalte in der zweiten Reihe.</TD>

<TD ALIGN=RIGHT>

Das ist die zweite Spalte in der zweiten Reihe. Der Text steht am rechten Spaltenrand.</TD>

<TD VALIGN=TOP ALIGN=CENTER>

Das ist die dritte Spalte in der zweiten Reihe. Der Text steht in der Mitte der Spalte und fängt am oberen Seitenrand an.</TD>

</TR>
</TABLE>

</BODY>
</HTML>

Beispiel anzeigen

zur Lektion 10/2