Tabellen

Tabellen sind ein nützliches Hilfsmittel, um die Seite zu ordnen, Bilder und Text zu gliedern.
Man kann Tabellen mit sichtbarem Rahmen machen, oder sogenannte blinde Tabellen, bei denen kein Rahmen zu sehen ist. Eine Tabelle beginnt immer mit:


Dann leitet man mit <tr> die erste Zeile ein und mit <td> die erste Spalte. Das sieht bis hierhin so aus:


Jetzt kannst du Text oder Bilder in die erste Zelle der Tabelle einfügen. Dann schließt du diese mit </td> und beginnst mit <td> eine neue:


An Stelle von <td> kannst du für Kopfzellen (also Überschriften) <th> </th> verwenden. Der Text in dieser Zelle wird dann automatisch fett und zentriert dargestellt.

Genauso läuft das ganze mit den Zeilen. Du beendest sie mit </tr> und machst mit <tr> eine neue auf.
Hier ein Beispiel für eine Tabelle mit zwei Zeilen und zwei Spalten:


Das Ganze sieht dann so aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Nun kannst du eine Tabelle mit beliebig vielen Spalten und Reihen machen.
So wie oben das border="1" kannst du noch verschiedene andere Parameter mit in den table-Tag eingeben:

border="2" Die Tabelle bekommt einen Rahmen!
align="center" Die Tabelle wird mittig ausgerichtet, geht auch mit "left" und right"
width="400" Die Tabelle wird 400 Pixel breit, du kannst auch %-Angaben verwenden.
cellspacing="0" Der Abstand zwischen den einzelnen Zellen beträgt 0 Pixel!
cellpadding="4" Der Abstand vom rand zur Schrift beträgt 4 Pixel!
bgcolor="#9999ff" Die Tabelle bekommt eine blaue Hintergrundfarbe, du kannst natürlich jede beliebige nehmen!
background="bild.gif" Die Tabelle bekommt als Hintergrund ein Bild!

Außerdem kannst du noch Spalten mit "colspan" und Zeilen mit "rowspan" verbinden. Hier noch jeweils ein Beispiel:


Das Ganze sieht dann so aus:

Überschrift
Text Text

Hier noch das Beispiel für "rowspan":


Das Ganze sieht dann so aus:

Überschrift Text
Text

Tipp:

Wenn du blinde Tabellen erstellen willst, lass erst mal border="1" stehen, dann siehst du genau, wo die Tabelle ist und es fällt dir deutlich leichter die Tabelle richtig zu erstellen. Am Ende setzt du dann border="0" ein.


© by www.knut-hilft.de counter rss-bild