HTML lernen - Tabellen - Das Grundgerüst
Für viele Inhalte im Web verwenden wir Tabellen. Sei es für das Design von Webseiten ohne CSS oder um Informationen geordnet und übersichtlich darzustellen, wir benötigen stets Tabellen.
Beispiel:
Beispiel:
Tabelle einleiten (<table>)
Mit dem table-Tag sagen Sie dem Browser, dass hier nun eine Tabelle beginnt.Attribute es table-Tags
Der table-Tag hat einige wichtige Attribute:- border: Dieses Attribut gibt die Breite der Tabellenlinien an. Werte sind ganze Zahlen. border="3" steht für einen 3 Pixel breiten Rahmen um die Tabelle. Wird border nicht angegeben, so stellen alle Browser eine Umrandung von einem Pixel dar.
Hinweis: Soll kein Rahmen angezeigt werden, so müssen Sie border="0" eingeben.
Achtung: border definiert nicht nur die Breite der Tabellenumrandung sondern die Breite aller (Gitternetz-)Linien in der Tabelle. - cellpadding: Dieses Attribut gibt den Abstand eines Zelleninhalts zum Zellenrand in Pixel an. Werte des Attributs sind ganze Zahlen.
- cellspacing: Dieses Attribut gibt den Abstand zwischen den einzelnen Zellen an. Werte sind auch hier ganze Zahlen.
- frame: Mithilfe dieses Attributs können Sie festlegen, an welchen Stellen der Tabelle ein Außenrahmen angezeigt werden soll. Werte sind box (für ganze Umrandung), above (für Rand oben), below (für Rand unten), hsides (für Rand oben und unten), vsides (für Rand links und rechts), lhs (für Rand links) und rhs (für Rand rechts). Wird frame nicht angegeben, so wird standardmäßig box gewählt.
Achtung: Die jeweilige Rahmenbreite ist abhängig von der unter border angegebenen Zahl. Haben Sie dort 0 eingegeben, so wird kein Rand angezeigt werden, obwohl Sie einen solchen mit frame festgelegt haben. - rules: erlaubt Ihnen festzulegen, wo Gitternetzlinien in der Tabelle angezeigt werden sollen. Werte des Attributs sind none (für keine), rows (für Zeilen), cols (für Spalten) und all (für alle).
- height: gibt die Höhe der Tabelle in Pixel an. Erlaubt sind alle ganzen Zahlen.
- width: gibt die Breite der Tabelle in Pixel an. Erlaubt sind alle ganzen Zahlen.
- bgcolor: Dieses Attribut erlaubt es Ihnen die eine Hintergrundfarbe für die Tabelle zu bestimmen. Werte sind die englischen Farbnamen oder die Hexadezimalcodes, die bereits in einem früheren Kapitel beschrieben wurden.
- background: Dieses Attribut bindet eine Grafik als Hintergrund für die Tabelle ein. Wert des Attributs ist der Pfad zur jeweiligen Grafik.
Achtung: Ist die Grafik, die als Hintergrund verwendet werden soll, kleiner als die Tabelle, so wird diese so oft vervielfacht, bis der komplette Tabellenhintergrund damit ausgefüllt wird. - align: Dieses Attribut bestimmt die Platzierung der Tabelle im Fließtext. Mögliche Werte des Attributs sind left für linksbündig, right für rechtsbündig und center für zentriert (mitten mi Text).
Achtung: Auch der td-Tag besitzt dieses Attribut. Dort hat es jedoch eine etwas andere Bedeutung!
Zeilen (<tr>)
Zum Anlegen einer neuen Zeile innerhalb einer Tabelle verwenden Sie den tr-Tag. Dieser muss zwischen <table> und </table> stehen.Beispiel:
<table>
<tr> </tr> <!-- Zeile 1 //-->
<tr> </tr> <!-- Zeile 2 //-->
<tr> </tr> <!-- Zeile 3 //-->
</table>
Achtung: In die einzelnen Zeilen dürfen noch keine Texte geschrieben werden. Dies ist erst erlaubt, sobald eine vollständige Zelle angelegt wurde, wie weiter unten beschrieben wird.
Attribute des tr-Tags
- height: gibt die Höhe der Zeile in Pixel an. Erlaubt sind alle ganzen Zahlen.
- width: gibt die Breite der Zeile in Pixel an. Erlaubt sind alle ganzen Zahlen.
- bgcolor: Dieses Attribut erlaubt es Ihnen die eine Hintergrundfarbe für die Zeile zu bestimmen. Werte sind die englischen Farbnamen oder die Hexadezimalcodes, die bereits in einem früheren Kapitel beschrieben wurden.
- background: Dieses Attribut bindet eine Grafik als Hintergrund für die Zeile ein. Wert des Attributs ist der Pfad zur jeweiligen Grafik.
Achtung: Ist die Grafik, die als Hintergrund verwendet werden soll, kleiner als die Zeile, so wird diese so oft vervielfacht, bis der komplette Zeilenhintergrund damit ausgefüllt wird.
Zellen (<td>)
Um nun aus der Tabellenzeile eine komplette beschreibbare Zelle zu machen, wir der td-Tag benötigt. Der td-Tag muss sich innerhalb eines tr-Codes befinden. Es können auch mehrere td-Tags in einem tr-Code stehen, da eine Zeile auch mehrere Zellen haben kann.Beispiel:
<table>
<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>
<tr><td>Zeile 3 Spalte 1</td><td>Zeile 3 Spalte 2</td></tr>
</table>
Hinweis: In die einzelnen Zellen darf nun Text geschrieben werden.
Attribute des td-Tags (und auch das th-Tags)
- height: gibt die Höhe der Zelle in Pixel an. Erlaubt sind alle ganzen Zahlen.
- width: gibt die Breite der Zelle in Pixel an. Erlaubt sind alle ganzen Zahlen.
- bgcolor: Dieses Attribut erlaubt es Ihnen die eine Hintergrundfarbe für die Zelle zu bestimmen. Werte sind die englischen Farbnamen oder die Hexadezimalcodes, die bereits in einem früheren Kapitel beschrieben wurden.
- background: Dieses Attribut bindet eine Grafik als Hintergrund für die Zelle ein. Wert des Attributs ist der Pfad zur jeweiligen Grafik.
Achtung: Ist die Grafik, die als Hintergrund verwendet werden soll, kleiner als die Zelle, so wird diese so oft vervielfacht, bis der komplette Zellenhintergrund damit ausgefüllt wird. - align: Dieses Attribut bestimmt die horizontale Ausrichtung eines Textes in der jeweiligen Zelle. Mögliche Werte des Attributs sind left für linksbündig, right für rechtsbündig und center für zentriert.
Achtung: Bitte nicht mit dem gleichnamigen Attribut des table-Tags verwechseln! - valign: Mithilfe dieses Attributs kann die vertikale Ausrichtung des Textes innerhalb einer Zelle festgelegt werden. Zur Ausrichtung sind folgende Werte möglich: top für oben, bottom für unten und middle für mittig.
- nowrap: Dieses Attribut erlaubt Ihnen, einen automatischen Zeilenumbruch innerhalb einer Zelle zu verhindern, wenn der Text zu lang wird.
Achtung: Dieses Attribut hat keine Werte. Es wird einfach so in den td-Tag geschrieben
Beispiel:<td nowrap>Langer Text...</td>