|
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.
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 exestieren kann. Nun dann fügen wir eine Spalte ein. Dies geht
mit dem Befehl:
<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 muß abgeschlossen werden. Das wird per
</td>
</tr>
gemacht. Wenn Du mit der Tabelle fertig bist, mußt du diese auch
abschließen. Ich mache das jetzt extra eine Zeile darunter, weil
es das letzte einer Tabelle ist! Also demenstprechend:
</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 hingeschrieben.
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 2 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 2 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 ersezt 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 sogennante 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 Schluß tbody geschrieben
wird, aber vom Browser wird es wiefolgt 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 anstadt
"bottom" top, middle left und right schreiben und somit die
Ausrichtung des Textes bestimmen.
Größenangaben
Du kannst einer Tabelle eine bestimmte Größe geben oder eine
die sich nach der größe des Brwosers 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ändeungen 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 muß. Deshalb empfehle ich immer Pixelangaben zu machen.
Feste Größe
bei Tabellen
Wenn ihr eine Tabelle haben wollt mit einer festen Größe, die
trotz eines zu langen Textes die feste Größe beibehält,
müßt ihr 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 du <table background="bild.jpg"> machst wird es von
NS anders angezeigt wie von dem IE.
|