|
Tabellen
Verwendung von Tabellen
Oft werden Tabellen da eingesetzt wo man sie gar nicht vermuten würde. Sie dienen oft als Makierungen und rücken den Text in die rchtige Position.
Wieso sehen wir "nie" diese Tabellen? Das liegt daran das die Tabellen unsichtbar gemacht werden. D.h. die Umrandung wird weggemacht und nur der Inhalt (Schrift, Bilder, etc.) ist sichtbar.
Die Struktur
Tabellen werden immer mit <table>
eingeleitet. Als nächster Schritt folgt die Zeilenbennennung die
man direkt nach <table> setzt. Diese sieht folgendermaßen
aus: <tr>
Um die Übersicht zu behalten macht man nach
<table> ein Absatz
und führt dann mit <tr> weiter. So weit wir bisher sind kann
keine Tabelle entstehen, da wir ja nur bisher wissen, dass es eine Tabelle
sein soll mit 1 Zeile aber 0 Spalten. Das heißt, dass keine Tabelle
so existieren kann. Nun dann fügen wir eine Spalte ein. Dies geht
mit der Anweisung: <td>
Wie schon oben genannt wird der Übersicht halber ein Absatz eingefügt,
sodass man den Quellcode immer noch entziffern kann.
Jetzt kommt ein sehr wichtiger Teil. Wie bei allen Tags werden diese auch
abgeschlossen! Das heißt wenn man mit der Zeile fertig ist oder
mit der Spalte muss abgeschlossen werden. Das wird per
</td> und
</tr> gemacht. Wenn Sie mit der Tabelle fertig
sind, müssen Sie diese auch
abschließen. Ich mache das jetzt extra eine Zeile darunter, weil
es das letzte einer Tabelle ist! Also dementsprechend:
</table>
Der hauptsächliche Text kommt IMMER zwischen den
<td>HIER KOMMT DER TEXT HIN UND NUR HIER!!!</td>
Jetzt machen wir ein kleines Beispiel für eine einfache Tabelle.
<html>
<head>
<title>Meine erste Tabelle</title>
</head>
<body>
<table>
<tr>
<td> Hier ist die erste Spalte in der ersten Zeile!</td>
<td> Hier ist die zweite Spalte in der ersten Zeile!</td>
</tr>
<tr>
<td> Hier ist die erste Spalte in der zweiten Zeile!</td>
<td> Hier ist die zweite Spalte in der zweiten Zeile!</td>
</tr>
</table>
</body>
</html>
Wie wir in
dem Beispiel sehen können, können wir in der Zeilenteilung mehrere
Spalten einfügen. Es ist auch möglich in den Spalten noch einmal
seperat eine frische Tabelle zu machen. Dies eignet sich hervoragend für
Navigationen oder andere Sachen. Dazu auch ein Beispiel:
<html>
<head>
<title>Eine Tabelle in einer Tabelle</title>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>Das funktioniert</td>
<td>Spitze!</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Hier ist die erste Spalte in der zweiten Zeile!</td>
</tr>
</table>
</body>
</html>
Auch wenn
kein Inhalt im <td></td> steht wird dieser Teil trotzdem hineingeschrieben.
Es wird dazwischen meist ein (Leerzeichen) eingefügt um
ein "unsichtbaren" Inhalt einzufügen.
colspan & rowspan
Jetzt kommen wir zu einem sehr wichtigen Punkt bei Tabellen. Es ist für
den Anfang sehr schwer zu verstehen, aber wird nach dem zweiten Mal sehr
einfach!
Die Rede
ist von colspan und rowspan. Sie werden in dem
<td>-Tag geschrieben
und haben folgende Bedeutung:
colspan = verbindet
Zeilen miteinander
Beispiel:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" width="300"><div align="center">Beispiel
für colspan!</div></td>
</tr>
<tr>
<td><div align="center">Spalte 1</div></td>
<td><div align="center">Spalte 2</div></td>
</tr>
</table>
</body>
</html>
In colspan wird <td> direkt nach dem definieren des colspan geschrieben. D.h. im zweiten <tr>-Bereich.
rowspan = verbindet Spalten miteinander
Beispiel:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" width="300"><div align="center">Beispiel
für rowspan!</div></td>
<td width="200"><div align="center">Spalte
2</div></td>
</tr>
<tr>
<td width="200"><div align="center">Auch
spalte 2</div></td>
</tr>
</table>
</body>
</html>
In rowspan wird <td> im selben <tr>-Bereich geschrieben indem der rowspan-Tag definiert worden ist.
<th>
Dieser Tag ersetzt den <td>-Tag und bewirkt, dass der geschrieben
Text zentriert und fett geschrieben wird.
Dies wird oft bei Tabellenüberschriften genutzt. (ähnelt dem
h1, h2, ...)
Thead, Tfoot, Tbody
Diese Befehle sind sogenannte Einteilungen. Wie bei Word bekannt gibt
es eine Kopfzeile und eine Fußzeile, sowie der Hauptteil. Diese
3 Befehle spiegeln genau das wieder. Es wird im unteren Beispiel deutlich,
dass zuerst thead, dann tfoot und erst zum Schluss tbody geschrieben
wird, aber vom Browser wird es wie folgt ausgegeben: thead, tbody, tfoot.
<html>
<head>
<title>Thead, Tfoot, Tbody</title>
</head>
</body>
<table border="1" rules="groups">
<thead>
<tr>
<th>Beispiel 1</th>
<th>Beispiel 2</th>
<th>Beispiel 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td><i>xxx:<br>77777</i></td>
<td><i>yyy:<br>88888</i></td>
<td><i>zzz:<br>99999</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>1.1</td>
<td>1.2</td>
</tr><tr>
<td>2</td>
<td>2.1</td>
<td>2.2</td>
</tr><tr>
<td>3</td>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</body>
</html>
caption-side (Ausrichtung der Tabellenüberschrift)
Mit caption kann man einer Tabelle eine Überschrift geben. Man könnte
dies mit fieldset vergleichen
Ein Beispiel dazu sähe so aus:
<html>
<head>
<title>caption-side</title>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1">
<caption style="caption-side:bottom">Beispiel</caption>
<tr>
<th>1.1</th><th>1.2</th><th>1.3</th>
</tr><tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr><tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>
</body>
</html>
Ich denke, an dem Beispiel wäre alles geklärt. Es wird direkt nach dem Einleitung der Tabelle (<border>) per CSS angewandt. Man kann anstatt "bottom" top, middle left und right schreiben und somit die Ausrichtung des Textes bestimmen.
Größenangaben
Sie können einer Tabelle eine bestimmte Größe
zuordnen oder eine die sich nach der Größe des Browsers richtet. Das erstgenannte wird mit
<td width="300" height="400">
gemacht. Dies hat den Vorteil, dass man sein Style direkt designen kann, ohne auf
Veränderungen zu achten.
Für eine angleichende Größe der Tabelle am Browser wird <td width="45%" height="70%">
genutzt. Dies hat jedoch den Nachteil das man auch auf die Veränderungen gefasst sein
muss. Deshalb empfehle ich immer Pixelangaben zu machen.
Feste Größe bei Tabellen
Wenn Sie eine Tabelle mit einer festen Größe haben wollen, die
trotz eines zu langen Textes die feste Größe beibehält,
müssen Sie das hier in den <body>Tag schreiben:
style="table-layout:fixed"
Ein Beispiel wäre dann so:
<html>
<head>
<title>table-layout</title>
</head>
<body bgcolor="FFFFFF" text="#000000">
<table
border="1" style="table-layout:fixed">
<colgroup span="3" style=""></colgroup>
<tr>
<td style="width:100px">1234567890123456789012345678901234567890
12345678901234567890 </td>
<td style="width:200px">1234567890123456789012345678901234567890
12345678901234567890 </td>
<td style="width:300px">1234567890123456789012345678901234567890
12345678901234567890 </td>
</tr>
</table>
</body>
</html>
Ausrichtung
Es gibt zwei verschiedene Attribute für die Ausrichtung von Tabellen und/oder Tabelleninhalte (Zelleninhalte):
1.) vertikale oder senkrechte Ausrichtung
valign="top" Der Text wird nach oben gesetzt
valign="middle" Der Text wird von der Höhe her Zentriert
angezeigt (Standart)
valign="bottom" Der Text wird nach unten gesetzt
2.) horizontale oder waagerechte Ausrichtung
align="left"
Der Text wird linksbündig angezeigt(Standart)
align="center" Der Text wird zentriert angezeigt
align="right" Der Text wird rechtsbündig angezeigt
Table-Tags
So jetzt zu den Tags die in <table> kommen:
<table
bordercolor="#000000">
//Definierung der Farbe der Rennlinie der Tabelle.
<table bordercolordark="#******">
//Dunkle Randfarbe
<table bordercolorlight="#******">
//Helle Randfarbe
<table border="0">
//Definierung der Dicke der Linien. Eine der wichtigsten Befehle!!!( Bei
dem Wert 0 sagt man auch blinde Tabelle dazu)
<table cellspacing="2">
//Definierung des Abstandes von den einzelnen Spalten und Tabellen.
<table cellpadding="1">
//Definierung des Innenabstandes von Borderspacing.
Definitionen von Tabellenhintergünden
Jetzt gibt es in Tabellen noch ein paar kleine Definierungscodes für
die Hintergründe. Sie können in <td>, <table> oder
<tr> eingesetzt werden.
<td bgcolor="#000000">
Definierung der Hintergundfarbe
<td background="./bild.gif"> Definierung eines Hintergrundbildes
Achtung: Wenn Sie <table background="bild.jpg">
einstellen, kann dies vom Netscape anders angezeigt werden als vom IE.
Dieser Workshop ist ein Service von more4webmaster.de
Für Hilfe und mehr besuchen Sie unser more4webmaster.com Board
|
