Tutorial Tabellen mit HTML
Tabellen werden immer in den <body> - Tag gesetzt.
Index:
[1] Verwendung von Tabellen
[2] Struktur (Einführung)
[3] colspan & rowspan
[4] <th>
[5] Thead, Tfoot, Tbody
[6] caption-side (Ausrichtung der Tabellenüberschrift)
[7] Größenangaben (feste Größen sowie verstellbare Größen)
[8] Ausrichtung
[9] Table-Tags
[10] Definitionen von Tabellenhintergünden
[11] CSS und Tabellen
[1] 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 richtige Position.
Wieso sehen wir "nie" diese Tabellen. Das liegt daran dass
die Tabellen unsichtbar gestaltet werden können.
D.h. die Umrandung wird entfernt und nur der Inhalt
(Schrift, Bilder, etc.) ist sichtbar.
<table border=0><tr><td></td></tr></table>
[2] Struktur
Tabellen werden immer mit
<table>
eingeleitet. Als nächster Schritt folgt die Zeilenbenennung, die man direkt nach <table> setzt. Diese schaut folgendermaßen aus:
<tr>
Um die Übersicht zu behalten wird oft nach <table> ein Absatz erstellt.
Jetzt fügen wir jetzt eine Spalte ein. Dies geht mit dem Befehl:
<td>
Wie schon oben genannt wird der Übersicht halber ein Absatz erstellt, so dass man den Quellcode immer noch entziffern kann.
Jetzt kommt ein sehr wichtiger Teil, denn wie bei allen Tags werden diese auch abgeschlossen. Das heißt, wenn man eine Zeile oder Spalte beenden will muß der Tag abgeschlossen werden. Dies geschied so:
</td>
</tr>
</table>
Texte werden immer zwischen td und /td geschrieben.
<td>TEXT</td>
Hier ein Beispiel für eine einfache Tabelle:
<html>
<head>
<title>1. 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>
Ergebnis:
http://jin.piranho.de/html/firsttable.html
Wie sie in dem Beispiel sehen können kann man in der Zeilenteilung mehrere Spalten einfügen. Es ist ebenfalls möglich in den Spalten noch eine separate Tabelle zu erstellen. 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>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> Hier ist die erste Spalte in der zweiten Zeile!</td>
</tr>
</table>
</body>
</html>
http://jin.piranho.de/html/tableintable.html
Sollte in <td></td> kein Inhalt vorhanden sein muss dieser Teil trotzdem benutzt werden. Es wird dazwischen meist ein eingefügt , um ein "unsichtbaren" Inhalt einzufügen.
[3] colspan & rowspan
Colspan und rowspan werden in dem <td>-Tag geschrieben und haben folgende Bedeutung:
colspan = ersetzt 2 Tabellen Spalten durch 1.
http://jin.piranho.de/html/colspan.html
Quellcode dafür:
<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>
rowspan = verbindet 2 Tabellen Zeilen miteinander!
http://jin.piranho.de/html/rowspan.html
Quellcode dafür:
<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>
[4] <th>
Dieser Tag ersetzt den <td>-Tag und bewirkt, dass der geschriebene Text zentriert und fett geschrieben wird.
Dies wird oft bei Tabellenüberschriften genutzt.
[5] Thead, Tfoot, Tbody
Diese 3 Befehle erstellen in einer Tabelle den head footer und den body. Sie können aber einfacher durch td und tr abgelöst werden.
<html>
<head>
<title>thx @ roeselhof</title>
</head>
</body>
<table border="1" rules="groups">
<thead>
<tr>
<th>Assoziation 1</th>
<th>Assoziation 2</th>
<th>Assoziation 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td><i>betroffen:<br>4 Mio. Menschen</i></td>
<td><i>betroffen:<br>2 Mio. Menschen</i></td>
<td><i>betroffen:<br>1 Mio. Menschen</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>München</td>
</tr><tr>
<td>Miljöh</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</tbody>
</table>
</body>
</html>
http://jin.piranho.de/html/body.html
[6] caption-side
Mit dem Tag Caption wird einer Tabelle eine Überschrift gegeben:
<html><head><title>caption-side</title>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1">
<caption style="caption-side:bottom">Assoziationen</caption>
<tr>
<th>Berlin</th><th>Hamburg</th><th>München</th>
</tr><tr>
<td>Miljöh</td><td>Kiez</td><td>Bierdampf</td>
</tr><tr>
<td>Buletten</td><td>Frikadellen</td><td>Fleischpflanzerl</td>
</tr></table>
</body></html>
http://jin.piranho.de/html/caption.html
[7] Größenangaben
Sie können einer Tabelle eine bestimmte Größe geben:
<td width="300" height="400">
Für eine angleichende Größe der Tabelle an den Browser wird
<td width="45%" height="70%">
genutzt.
[8] 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 oben plaziert.
valign="middle" Der Text ist zentriert.
valign="bottom" Der Text wird unten plaziert.
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
[9] Table-Tags
Folgende Tags können in <table> benutzt werden:
<table bordercolor="#000000"> Die Farbe des Randes.
<table border="0"> Definierung der Dicke der Linien.
<table cellspacing="2"> Definierung des Abstandes der einzelnen Spalten.
<table cellpadding="1"> Definierung des Innenabstandes.
<table bgcolor=#000000 background=back.jpg> Hintergrundbild und Farbe.
<table width=50 height=50 > Größe der Tabelle .
weitere unter http://selfhtml.teamone.de/navigation/html.htm#tabellen
[10] Definitionen von Tabellenhintergünden
<td bgcolor="#000000"> Definierung der Hintergrundfarbe
<td background="bild.gif"> Definierung eines Hintergrundbildes
[11] CSS und Tabellen
In Tabellen ist die Anwendung von CSS sehr nützlich, denn
so kann man mit cursor:url(''); einen eigenen Mauszeiger erstellen.
Mit background-color ist es möglich, die Hintergrundfarbe und mit font-family die Schriftart zu bestimmen.
Font-size gibt dabei die Schriftgröße in Tabellen an:
<style>
<!--
td {
cursor:url('http://www.hpserver.de/cursor.cur');
background-color:#FFFFFF;
font-family: Verdana;
font-size: 8pt;
}
-->
</style>
Autor dieses Tutorials ist "jin". Vielen Dank auch an dieser Stelle für die freundliche Genehmigung des Autors das Tutorial hier zu veröffentlichen!
|
Weiter gehts mit einer kurzen Anmeldung:
|
