HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Tabellen in HTML Teil III
Mit Tabellentechniken können Sie viele Layout-Pobleme in der Regel sehr einfach lösen. Sie können Tabellen auf dem Bildschirm erzeugen, die auch als Tabellen darstellen und Daten tabellarisch anzeigen. Sie können mit Tabellen jedoch auch das Layout Ihrer HTML Seite bestimmen.

HTML Quellcode:

<html>
<head>
<title>Mustermanns Blumentips</title>
<style type="text/css">
<!--
body { background-color:#33EE00; color:#002000; font-family:Times; }
table { background-color:white; color:black; }
th { background-color:navy; color:white; }
-->
</style>
</head>
<body>
<table align="center" border="1">
<tr>
<th colspan="2"> Blumentips </th>
</tr>
<tr>
<th>Nummer</th>
<th>Tipp</th>
</tr>
<tr>
<td>Blumentip 1</td>
<td>
Vergessen Sie nie Ihre Blumen zu gie&szlig;en!
</td>
</tr>
<tr>
<td>Blumentip 2</td>
<td>Nachtschattengew&auml;chse im Dunkeln lagern</td>
</tr>
</table>
</body>
</html>

So sieht's im Browser aus...

Erklärung:

Das neu hinzugekommene Attribut colspan verbindet zwei Spalten zu einer einzigen Zelle. Diese Zelle erstreckt sich über die gesamte Tabellenbreite. Man kann die Breite sogar individuell festsetzen, unabhängig von der vorgegebenen Standardbreite der Tabelle.
Zusätzlich gibt es noch das Attribut: rowspan Mit Rowspan haben Sie die Möglichkeit, Zellen über mehrere Reihen hinweg zu verbinden.
Die Vorgehensweise ist für beide Attribute gleich: Sie setzen erst das Attribut und mit der Ziffer teilen dem Browser mit, wieviele Spalten oder Reihen verbunden werden sollen. Wichtig hierbei ist, dass Sie die Anfangszelle mitzählen, sowie darauf achten, daß sich die Anzahl der einzelnen Zellen in den entsprechenden Reihen vermindert.


Hier ein Beispiel zur Verdeutlichung:

<table border="2">
<tr>
<td>Zelle1, Reihe1</td>
<td>Zelle2, Reihe1</td>
<td>Zelle3, Reihe1</td>
</tr>
<tr>
<td colspan="2">Zelle1, Reihe2</td>
<td rowspan="2">Zelle2, Reihe2</td>
</tr>
<tr>
<td>Zelle1, Reihe3</td>
<td>Zelle2, Reihe3</td>
</tr>
</table>

So sieht's im Browser aus...

Hinweis:
Die einsetzbaren Attribute für das td Tag z.B. bgcolor , align, width,... bleiben erhalten, so dass sich keine Einschränkungen ergeben. Mit colspan und rowspan lassen sich teilweise sehr komplexe Layouts erstellen. Denken Sie bei Planungen von anspruchsvollen oder komplexen Layouts stets auch an den Einsatz dieser beiden Hilfen.


HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

©2003 de Vries