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
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: