5. HTML-Kurs - Tabellen erstellen (3)
5.3 Anpassen der Tabellengröße
Auf den beiden vorigen Seiten haben wir uns bereits mit einigen Tabellenelementen beschäftigt: Grundstruktur einer Tabelle und einigen Attributen wie "border", "cellpadding" und "cellspacing". Tabellen lassen sich aber auf viele weitere Arten anpassen. Im Nachfolgenden lernen Sie, wie man die Größe einer Tabelle anpasst und den Text in den einzelnen Tabellenzellen ausrichtet.
5.3.1 Tabellenattribut "width"
Zur Anpassung der Breite einer Tabelle wird das Attribut "width" benötigt. Die Angaben können wahlweise in Prozent oder in Pixeln angegeben werden. Doch width kann nicht nur auf die Breite der kompletten Tabelle angewendet werden, sondern auch auf einzelnen Zellen. Dabei sind allerdings ein paar Besonderheiten zu beachten. Außerdem fragen Sie sich vielleicht, wozu eine bestimmte Tabellengröße überhaupt benötigt wird? Die Antwort ist einfach: wenn die Tabelle keine Breitenangabe hat, dann ist eine Spalte exakt so groß wie der breiteste Text einer Zelle. Die Spalte daneben ebenfalls. Und wenn Sie dann zufällig in der 1. Zelle ein sehr langes Wort einsetzen, in der Zelle daneben aber nur ein ganz kurzes, sieht die Tabelle recht schnell unordentlich aus. Vielleicht kennen Sie sowas von dem Tabellenkalkulationsprogramm "Excel". Dort wird ja auch mit Tabellen gearbeitet. Ein zweiter Grund, warum man die Breite einer Tabelle definieren möchte ist der Umstand, dass Sie möglicherweise eine bestimmte Breite zur Verfügung haben, die Sie dann auch komplett füllen möchten, auch wenn der Text evtl. kürzer ist. Wir schauen uns im Nachfolgenden ein paar Beispiele an, die dies verdeutlichen.
Zuerst die Syntax:
<html>
<head>
<title>Tabelle ohne Breitenangabe</title>
</head>
<body>
<table border="1">
<tr>
<td>kurz</td>
<td>laaaaaaaaaaaaaaaang</td>
</tr>
<tr>
<td>kurz</td>
<td>laaaaaaaaaaaaaaaang</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------
<html>
<head>
<title>Tabelle mit Breitenangabe</title>
</head>
<body>
<table border="1" width="500">
<tr>
<td>kurz</td>
<td>laaaaaaaaaaaaaaaang</td>
</tr>
<tr>
<td>kurz</td>
<td>laaaaaaaaaaaaaaaang</td>
</tr>
</table>
</body>
</html>
Die Ausgabe im Browser können Sie im nachfolgenden Beispiel sehen: klick!
Nun ist in diesem Beispiel die Tabelle schon in der gewünschten Breite von 500 Pixeln, aber sollten Sie beide Spalten gleich groß haben wollen oder aber - aus welchem Grund auch immer - die linke Spalte breiter als die rechte oder umgekehrt, dann ist dies an dieser Stelle noch nicht umgesetzt. Dazu muss eine weitere Breitenangabe, und zwar in den Tabellenzellen erfolgen. Auch hier kann die Angabe wahlweise in Prozent oder Pixeln erfolgen. Nachfolgend ein paar Beispiele:
<html>
<head>
<title>Tabelle mit Breitenangaben in Prozent</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td width="40%">Text 1</td>
<td width="60%">Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------
<html>
<head>
<title>Tabelle mit Breitenangabe in Pixeln</title>
</head>
<body>
<table border="1" width="500">
<tr>
<td width="200">Text 1</td>
<td width="300">Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
</body>
</html>
Und in der Ausgabe sieht das so aus: klick!
Beim 1. Beispiel wurde als Tabellenbreite 100% gewählt. In diesem Fall dehnt sich die Tabelle über die gesamte Bildschirmbreite aus, weil die Tabelle der einzige dort vorhandelen HTML-Code ohne ein Layout ist, das ist allerdings anders, wenn die Tabelle innerhalb eines Websiteelementes des Layouts eingebettet wird. Es wird immer 100% des verfügbaren Platzes genutzt. Auf dieser Seite würde das bedeutetn, dass die Tabelle sich über 100% des beschreibbaren mittleren Teiles erstreckt:
| Text 1 | Text 2 |
| Text 3 | Text 4 |
Es reicht, wenn die Breitenangaben einmalig in der 1. Tabellenzeile eingefügt werden, die nachfolgenden Zeilen passen sich automatisch an. Achtung: es funktioniert nicht, dass sie in der 1. Zeile links 200 Pixel, rechts 300 Pixel und in der nächsten Zeile links 300 Pixel und rechts 200 Pixel angeben! Wenn die einzelnen untereinander befindlichen Zellen unterschiedlich breit sein müssen, muss das anders gelöst werden und zwar mit den Attributen colspan und rowspan, doch dazu später mehr!
5.3.2 Tabellenattribut "height"
Vorweg sei erwähnt, dass das Attribut height (Höhe) zwar von den Browsern unterstützt wird, es gehört aber nicht zum HTML-Standard! Genau wie das Attribut width kann height sowohl auf die Tabelle als auch auf die einzelnen Zellen angewandt werden. Beispiel:
<html>
<head>
<title>Tabelle mit Breitenangaben in Prozent</title>
</head>
<body>
<table border="1" width="100%" height="15%">
<tr>
<td width="40%" height="5%">Text 1</td>
<td width="60%" height="10%">Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------
<html>
<head>
<title>Tabelle mit Breitenangabe in Pixeln</title>
</head>
<body>
<table border="1" width="500" height="200">
<tr>
<td width="200" height="50">Text 1</td>
<td width="300" height="150">Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
</body>
</html>
Und in der Ausgabe sieht das so aus: klick!