HTML - Teil 4
Arbeit mit Tabellen
Tabellen !? - Wieso,Weshalb,Warum ?
Tabellen verwendet man, wenn man Seiten strukturieren möchte oder einfach
einen bestimmten Sachverhalt übersichtlich darstellen will.
Wie wird eine Tabelle erstellt ?
Mit den HTML-Tag Table leiten Sie die Tabelle ein.
Bei der Erstellung einer Tabelle muß jedoch beachtet werden, dass sie zeilenweise
aufgebaut wird.
Erst wenn Sie eine Zeile beendet haben, können Sie mit der nächsten beginnen.
Eine Zeile leiten Sie mit den Tr-Tag ein,Sie können nun mit
Hilfe des Td-Tags die Zeile in mehreren Spalten einteilen.
Wenn Sie also eine Tabelle mit zwei Zeilen und je zwei Spalten erstellen
wollen, so müßte der Quellcode folgendermaßen aussehen :
<table>
<tr><td> 1.Spalte ; 1.Zeile </td><td> 2.Spalte ; 1.Zeile</td></tr>
<tr><td> 1.Spalte ; 2.Zeile </td><td> 2.Spalte ; 2.Zeile</td></tr>
</table>
Der Quellcode würde dann folgende Tabelle erzeugen :
| 1.Spalte ; 1.Zeile | 2.Spalte ; 1.Zeile |
| 1.Spalte ; 2.Zeile | 2.Spalte ; 2.Zeile |
Um eine Tabelle zu vervollenden bedarf es einer Tabellenüberschrift.
Dazu gibt es in HTML den Th-Tag.
Dieser Tag zeigt den Browser an, das nun eine Spaltenüberschrift folgt,
mit den Attribut colspan geben Sie die Anzahl der
Spalten an, welche mit dieser Überschrift versehen werden.
Soll also unsere Beispieltabelle mit einer Überschrift versehen werden,
so müßte der folgende Quellcode eingegeben werden :
<table>
<tr><th colspan="2"> Überschrift </th></tr>
<tr><td> 1.Spalte ; 1.Zeile </td><td> 2.Spalte ; 1.Zeile</td></tr>
<tr><td> 1.Spalte ; 2.Zeile </td><td> 2.Spalte ; 2.Zeile</td></tr>
</table>
Die Tabelle würde dann so aussehen :
| Überschrift |
|---|
| 1.Spalte ; 1.Zeile | 2.Spalte ; 1.Zeile |
| 1.Spalte ; 2.Zeile | 2.Spalte ; 2.Zeile |
Den Table-Tag können Sie mit folgendem Attributten versehen :
Beispiel : <Table border=1>
| Table - Attribute |
|---|
| align=... |
bestimmt die Ausrichtung der Tabelle, die Werte left, right, center
|
| border="..." |
definiert die Rahmenbreite der Tabelle und ihren Zellen |
| cellspacing="..." |
legt den Raum zwischen den Zellen fest |
| cellpadding="..." |
legt den nicht beschreibbaren Raum innerhalb einer Zelle fest |
| width="..." |
definiert die Breite der Tabelle in Pixeln |
| height="..." |
definiert die Höhe der Tabelle in Pixeln |
| bgcolor="color" |
bestimmt die der Tabelle hinterlegte Farbe |
| background="pic-file" |
bestimmt eine Grafik, welche als Hintergrund der Tabelle dient |
|