Tabellen 2

Nebeneinander liegende Zellen verbinden

Natürlich kann man Zellen auch verbinden. Wenn die zu verbindenden Zellen nebeneinander liegen gibt man im <td>- bzw. <th>Tag zusätzlich colspan="2" an (col steht dabei für column; engl. - Spalte. span heißt Spannweite). Die 2 Steht dabei für die Anzahl der Spalten über die sich die Zelle erstreckt. Natürlich muß die Reihe dann entsprechend weniger Zellen enthalten, als die anderen Reihen.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text.
<table border>
<tr>
<td colspan="2">Zelle 1</td>
</tr>
<tr>
<td>Zelle 2.1</td>
<td>Zelle 2.2</td>
</tr>
</table>
Hier steht beliebiger Text.
</body>
</html>

Untereinander liegende Zellen verbinden

Wenn die zu verbindenden Zellen untereinander liegen, gibt man im <td>- bzw. <th>Tag zusätzlich rowspan="2" an (row: engl. - Reihe, Zeile). Die 2 steht dabei für die Anzahl der Zeilen über die sich die Zelle erstreckt. Die Zelle die sich über mehrere Zeilen erstreckt wird nur in der ersten Zeile erwähnt. Die anderen Zeilen müssen natürlich entsprechend weniger Zellen enthalten.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text.
<table border>
<tr>
<td rowspan="2">Zelle x.1</td>
<td> Zelle 1.2</td>
</tr>
<tr>
<td> Zelle 2.2 </td>
</tr>
</table>
Hier steht beliebiger Text.
</body>
</html>

Tabellengröße festlegen

Breite

Wenn die gesamte Tabelle eine bestimmte Breite haben soll musst du das <table>Tag um z.B. width="300" ergänzen (width: engl. - Breite). Die 300 gibt dabei die gewünschte Breite in Pixeln an. In früheren HTML-Versionen durfte man die Anführungszeichen weg lassen. Mir ist auch bisher kein Browser bekannt bei dem es ohne sie nicht geht. Erlaubt sind positive ganze Zahlen ohne Einheit für die Angabe der Breite in Pixel oder positive Zahlen in %. Dabei (bei Prozentangaben) sind Dezimalbrüche (Kommazahlen) erlaubt. Dezimaltrennzeichen ist natürlich der Punkt! Die Prozentangabe bezieht sich auf das übergeordnete Element. Wenn die Tabelle in einer Zelle einer größeren Tabelle ist, ist das diese Zelle. Wenn die Tabelle in einem Frame ist, ist es der Frame. Wenn du die Tabelle nicht in irgend was eingebaut hast ist es die Fenstergröße beim Betrachter. Diese Angabe ist nur wirksam wenn der Tabelleninhalt noch Platz hat. Ansonsten wird die Tabelle so groß dargestellt, dass der Inhalt in die Tabelle passt. Die Spaltenbreiten werden anteilmäßig nach der jeweils breitesten Zelle festgelegt.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text.
<table width="300" border>
<tr>
<td> Dies ist Zelle 1.1 </td>
<td> Zelle 1.2 </td>
</tr>
<tr>
<td> Zelle 2.2 </td>
<td> Zelle 2.2 </td>
</tr>
</table>
Hier steht beliebiger Text.
</body>
</html>

Höhe

Wenn die gesamte Tabelle eine bestimmte Höhe haben soll musst du das <table>Tag um z.B. height="140%" ergänzen (height: engl. - Höhe). Die 140 gibt dabei die gewünschte Höhe in Prozent an. In diesem Fall ist die Tabelle also 1,4 mal so hoch wie das Fenster. Erlaubt sind die gleichen Werte unter den gleichen Bedingungen, wie bei der Breite. Die Zeilenhöhen werden anteilmäßig nach der jeweils höchsten Zelle festgelegt.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text.
<table height="140%" border>
<tr>
<td> Zelle 1.1 </td>
<td> 1.2 </td>
</tr>
<tr>
<td> Zelle 2.2 </td>
<td> Zelle 2.2 </td>
</tr>
</table>
Hier steht beliebiger Text.
</body>
</html>

Zellengröße festlegen

Spaltenbreite

Um die Breite einer Spalte festzulegen, reicht es die Breite einer Zelle dieser Spalte festzulegen. Zweckmäßigerweise nimmt man die erste Zelle dieser Spalte. Dazu fügt man ins <td>Tag zum Beispiel width="60%" ein. Die 60% gibt dabei die gewünschte Breite an. Die Prozentangabe bezieht sich auf die Breite der ganzen Tabelle. Das Attribut wird aber nur berücksichtigt wenn keine Zelle dieser Spalte einen breiteren Inhalt enthält. Es gelten die gleichen Bedingungen wie bei der Tabellenbreite. Wenn für alle Spalten eine Breite festgelegt wurde, und die Tabellenbreite ebenfalls festgelegt wurde, hat die Tabellenbreite Vorrang (falls sich die Angaben widersprechen).

Zeilenhöhe

Um die Höhe einer Zeile festzulegen, musst du die Höhe der ersten Zelle dieser Zeile festlegen. Alternativ dazu kannst du die Höhenangabe auch ins <tr>Tag einfügen. Dazu fügt man ins <td>Tag zum Beispiel "height=100" ein. Auch hier gelten die gleichen Bedingungen wie bei der Tabellenbreite. Wenn für alle Zeilen eine Höhe festgelegt wurde, und die Tabellenhöhe ebenfalls festgelegt wurde, hat die Tabellenhöhe Vorrang.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border>
<tr>
<td width="60%" height="100">Zelle 1.1</td>
<td> Dies ist Zelle 1.2 </td>
</tr>
<tr>
<td> Zelle 2.2 </td>
<td> Zelle 2.2 </td>
</tr>
</table>
Hier steht beliebiger Text.
</body>
</html>

Ladezeit und Darstellung

Ladezeit

Aus den Breiten- und Höhenangaben für die Tabelle und deren Zellen, bzw. durch den Inhalt der Tabelle, ergibt sich deren Größe und Aufteilung. Das bedeutet aber, dass der Browser die Tabelle erst darstellen kann wenn der gesamte Inhalt geladen ist. Für den Betrachter bedeutet das im ungünstigsten Fall, dass er lange Zeit vor einer fast leeren Seite sitzt. Um das zu verhindern kann man die Spaltenbreiten vordefinieren. Vor allen Dingen bei großen Tabellen ist das sinnvoll.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border>
<colgroup>
<col width="40">
<col width="100">
</colgroup>

<tr>
<td> Zelle 1.1 </td>
<td> Zelle 1.2 </td>
</tr>
<tr>
<td> Zelle 2.2 </td>
<td> Zelle 2.2 </td>
</tr>
</table>
</body>
</html>

Das obere Beispiel zeigt die Definition für eine Spalte mit 40 Pixel Breite und eine Spalte mit 100 Pixel Breite. Dazu wird mit dem <colgroup>Tag (colgroup steht für column group; column: engl. - Spalte; group: engl. - Gruppe) der Definitionsbereich für die Spalten festgelegt. Für jede Spalte muß ein Tag nach dem Muster <col width="40"> gemacht werden. Die Breite kann in Prozent oder in Pixel festgelegt werden.

Das untere Beispiel zeigt die Definition für eine Tabelle mit lauter gleich breiten Spalten. Bei width= wird die Breite der Spalten in Pixel oder Prozent angegeben, bei span= wird die Anzahl der Spalten angegeben.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border>
<colgroup width="200" span="2">
</colgroup>

<tr>
<td> Zelle 1.1 </td>
<td> Zelle 1.2 </td>
</tr>
<tr>
<td> Zelle 2.2 </td>
<td> Zelle 2.2 </td>
</tr>
</table>
</body>
</html>

Auch das <col>Tag darf das Attribut span= erhalten. Dann gilt die Breitenangabe für entspechend viele Spalten. Wenn du z.B. <col span="5" width="80"> angibst, erhält diese und die nächsten 4 Spalten die Breite von 80 Pixeln. Es ist auch erlaubt mehrere <colgroup>Tags zu verwenden. Du kannst z.B. mit zwei Befehlen wie <colgroup width="60" span="4"> und <colgroup width="220" span="7"> insgesamt 11 Spalten für die Tabelle definieren, wobei die ersten 4 Spalten eine Breite von 60 Pixeln haben und die nächsten 7 Spalten eine Breite von je 220 Pixeln.

Weiter geht es mit dem Kapitel Tabelleninhalte ausrichten.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: