Suche
Hier ist der vierte Teil der Einführung in HTML. Er befasst sich mit Tabellen.
Tabellen werden gerne zur Seitengestaltung genommen... aber erstmal zum Aufbau von Tabellen - die Seitengestaltung interessiert uns erst ein paar Teile später.
Aufbau einer Tabelle:
Eine Tabelle ist immer folgendermaßen aufgebaut:
2
3
4
5
6
7
<table>
<tr>
<td>
[...]
</td>
</tr>
</table>
Das table-Tag leitet die Tabelle ein, das tr-Tag leitet eine neue Tabellenzeile ein und das td-Tag leitet eine Tabellenzelle ein. Daneben gibt es auch das th-Tag, welches eine Kopfzelle einleitet; es wird verwendet wie das td-Tag. Der Unterschied ist, dass der Text in einer Kopfzelle betont ist und die Inhalte in der Kopfzelle horizontal zentriert sind.
Eine Tabelle kann beliebig viele Tabellenzeilen und Tabellenzellen beinhalten - jedoch sollte darauf geachtet werden, dass man in jeder Tabellenzeile gleich viele Zellen hat; es sei denn, man gibt etwas anderes vor (genaueres werde ich in einem späteren Teil der Einführung in HTML erläutern).
Solange man nichts anderes vorgibt, passt sich die Tabelle den Inhalten an.
Attribute des table-Tag:
Man unterscheidet zwei Arten von Tabellen: zwischen Tabellen mit Gitternetzlinien und Tabellen ohne Gitternetzlinien (sogenannte "blinde Tabellen").
Der Unterschied ist, dass man bei Tabellen ohne Gitternetzlinien die Struktur der Tabelle nicht sieht, wodurch man auch nicht gleich merkt, dass man eine Tabelle vor sich hat.
Tabelle mit Gitternetzlinien:
2
3
4
5
6
7
<table border="1">
<tr>
<td>
[...]
</td>
</tr>
</table>
Tabelle ohne Gitternetzlinien:
2
3
4
5
6
7
<table border="0">
<tr>
<td>
[...]
</td>
</tr>
</table>
Seht ihr den Unterschied? Genau... hier verwende ich ein Attribut (siehe Teil 3); genauer: das border-Attribut. Bei Tabellen mit Gitternetzlinien hat es den Wert "1", was bedeutet, dass um die komplette Tabelle ein Rahmen mit der "Dicke" '1 Pixel' ist, sowie um jede Zelle.
Bei Tabellen ohne Gitternetzlinien hat es den Wert "0", was bedeutet, dass keine Rahmen angezeigt werden.
Natürlich sind auch andere Werte erlaubt - und zwar alle ganzen, positiven Zahlen (natürlich sollte man keine 100 Pixel breiten Rahmen machen 
).
Wie ich vorhin schon erwähnt habe, passt sich die Tabelle ihren Inhalten an.
Natürlich kann man das auch verhindern - zumindest in der Horizontalen (in der Breite).
Dazu gibt man der Tabellen einfach eine Breite:
2
3
4
5
6
7
<table width="400px">
<tr>
<td>
[...]
</td>
</tr>
</table>
Die Breite definiert man mit dem width-Attribut.In dem Beispiel hätte die Tabelle eine Breite von 400 Pixel (px = Schreibweise für Pixel in HTML). Hier sind Pixel- und Prozentangaben zulässig. Das war aber nur mal ein kurzer Blick darauf, wie man die Breite einer Tabelle verändert; an dieser Stelle der "Einführung in HTML" ist das aber eher nebensächlich.
Jetzt kommen aber nochmal zwei interessante Attribute:
Erlaubt sind die gleichen Werte wie beim width-Attribut.
Es gibt zwar noch weitere Attribute für das table-Tag; diese werden jedoch selten bis nie verwendet und gehen deshalb zu weit für eine Einführung.
Attribute des tr-Tag:
Eigentlich gibt es hier nur ein wirklich interessantes Attribut. Und zwar haben Tabellen die unangenehme Eigenschaft, Inhalte einer Zelle vertikal zu zenrieren, falls eine benachbarte Zelle vertikal gesehen mehr Inhalt hat. Das kann ziemlich störend sein. Zum Glück gibt es da eine Lösung:
2
3
4
5
6
7
<table>
<tr valign="top">
<td>
[...]
</td>
</tr>
</table>
Für das valign-Attribut gibt es 4 zulässige Werte; ich gehe jedoch mal davon aus, dass "top" der mit Abstand meistverwendete Wert sein dürfte und die Anderen vernachlässigbar sind.
Ansonsten gibt es für das tr-Tag nur relativ unnötige Attribute - und falls man doch mal eines brauchen sollte, findet man es spätestens per Google.
Attribute des td- und des th-Tag:
Eigentlich ist hier auch nur das valign-Attribut von Bedeutung; die meisten anderen Attribute sind unnötig, für diese Einführung zu viel oder unnötig, da die Browserunterstützung fehlt.
Der Unterschied zwischen der Verwendung des valign-Attributs in tr-Tags und td (/th)-Tags ist, dass bei der Verwendung im tr-Tag die komplette Tabellenzeile betroffen ist, bei Verwendung im td-Tag nur die Zelle. Hier könnte auch der Wert "bottom" interessant sein, welcher den Inhalt unten platziert.
2
3
4
5
6
7
<table>
<tr>
<td valign="bottom">
[...]
</td>
</tr>
</table>
Das wars erstmal zu den Tabellen; wahrscheinlich werde ich in einem späteren Teil nochmals darauf eingehen - dieser Teil hier soll wirklich nur ein Überblick über Tabellen sein.
Und wie auch bei allen anderen bisherigen Teilen gilt: Bei Fragen bitte fragen
Und auch hier habe ich eine kleine HTML-Datei mit ein paar Beispielen von oben erstellt: Klick mich
