Tabellen verwenden
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.