Standardmäßig ist die Breite einer Tabelle anhängig von dem Text, der in ihr steht. Die Tabellenbreite kann dabei die Breite des Browserfensters erreichen oder über den Rand hinaus gehen.
Um das Aussehen einer Tabelle individuell gestalten zu können, stellt HTML das Attribut width zur Verfügung, mit dem man die Breite der gesamten Tabelle festlegen kann. Dabei kann man die Breite der Tabelle als prozentuelle Breite in Abhängigkeit des Browserfensters oder als festen Wert in Pixeln angeben.
<table width="Wert">
Die Angabe width (Breite) innerhalb des <table>-Tags legt die Breite der Tabelle fest ohne auf den Inhalt zu achten.
Ändere bei der Aufgabe „Steckbrief“ die Tabellenbreite auf 40 %!
So wie man die Breite einer gesamten Tabelle angeben kann, kann auch die Breite einzelner Spalten angegeben werden.
<td width="Wert">
Die Angabe widthinnerhalb des Tags <td> oder auch <th> setzt die Breite einer einzelnen Spalte fest.
Prozentangaben sind abhängig von der Tabellenbreite, Pixelangaben sind dagegen feste Werte. Das Zeichen * ist ein Spezialfall und bedeutet: Rest der übrig bleibt.
a) Setze die Breite der ersten Spalte auf 40 % und die der 2. auf 60 % b) Formatiere die erste Spalte 150 Pixel breit. Die zweite Spalte soll den Rest ausmachen!
Mittels des Attributs height hat man die Möglichkeit, in den Tags <td> und <th> die Höhe einer Zelle für die aktuelle Zeile zu definieren. Werden mehrere Höhen innerhalb einer Zeile angegeben, gilt die größte Angabe.
<table align="center" border="1" height="90%"> <tr height="30%"> <td>Zellenhöhe 30%</td> </tr> <tr height="*"> <td>Zellenhöhe *</td> </tr> <tr height="50%"> <td>Zellenhöhe 50%</td> </tr> </table>
Die Tabelle besitzt eine Höhe von 90 % des Browserfensters. Die erste Tabellenzeile nimmt 30 % der Tabellenhöhe ein. Die letzte Zeile nimmt 50 % der Höhe ein. Der mittleren Zeile wird die restliche Höhe zugewiesen.