HTML-Code verstehen

Tabellen

Ziele

  • Du kennst das Grundgerüst einer Tabelle mit den Tags <table>, <tbody>, <tr> und <td>.
  • Du schließt von gegebenen Attributen auf die Formatierung der Tabelle und ihrer Zellen.

Grundstruktur

Eine Tabelle besteht aus mehreren Befehlen. Der äußerste Tag ist dabei <table> </table>. Dieser umfasst die ganze Tabelle. Möchtest du eine speziell hervorgehobene Kopfzeile haben, ist der nächste Tag <thead> </thead>, sonst <tbody> </tbody>. Eine Tabellenzeile wird durch <tr> </tr> markiert. Für jede Zelle, die diese Zeile beinhalten soll (Spaltenanzahl), fügt man ein <td> </td> hinzu.
Alles zusammen sieht der Code der Tabelle rechts aus wie folgt:

<table border="1">
	<tbody>
		<tr>
			<td>Zeile 1, Spalte 1</td>
			<td>Zeile 1, Spalte 2</td>
		</tr>
		<tr>
			<td>Zeile 2, Spalte 1</td>
			<td>Zeile 2, Spalte 2</td>
		</tr>
	</tbody>
</table>
Zeile 1, Spalte 1 Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2


Tabellenattribute

Wie du schon bemerkt hast, wurde oben das Tabellenattribut border auf 1 (px) gesetzt. Wenn du dies nicht tust, ist die Default-Einstellung 0, d.h. man sieht keine Umrandung.
In der Tabelle oben siehst du, dass die Umrandung der ganzen Tabelle und die der einzelnen Zellen sichtbar sind. Möchtest du, dass diese übereinander liegen, so kannst du den Zwischenraum mit cellspacing="0" eliminieren oder durch eine größere Zahl vergrößern.

Den Textfluss kannst du wie bei den Bildern mit align="left/right" beeinflussen. Auch Breite und Höhe lassen sich durch width und height festlegen. Dabei kannst du einmal Breite und Höhe der ganzen Tabelle und die Spaltenbreite und die Zeilenhöhe verändern, je nachdem an welcher Stelle du dieses Attribut festlegst.


Ausrichtung des Zelleninhalts

Um den Zelleninhalt horizontal anzuordnen, verwendest du align="left/middle/right" und valign="top/middle/bottom" um die Darstellung vertikal zu beeinflussen.
Entweder für die ganze Tabelle im Start-Tag <table> oder für einzelne Zellen im jeweilen Tag <td>. Die Default-Einstellung ist hier valign=top und align=left.


Öffne ein neues HTML-Dokument mit KompoZer. Erzeuge eine Tabelle und verändere sie, wie du möchtest. Dann wechsle in den Quelltextmodus.
Findest du deine Änderungen auch im Quelltext?

Computer-Eule