Tabellenhöhe & Tabellenbreite

Wie krieg ich eine Tabelle größer oder kleiner?

  • Erstelle eine HTML-Datei mit folgendem Quellcode:

<html>
<head>
<title>Die sechste Lektion</title>
</head>

<body bgcolor="#FFCC66" text="#000000">
<table border="1" width="80%" cellpadding="0" cellspacing="0">
  <tr>
    <td>Tabelle mit
flexibler Breite</td>
    <td>
      <p>Weite 80 Prozent</p>
    </td>
  </tr>
</table>


<table border="1" width="350" height="80" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <p>Tabelle mit
festen Werten</p>
    </td>
    <td>
      <p>Weite 350 Pixel
H&ouml;he 80 Pixel</p>
    </td>
  </tr>
</table>
</body>
</html>~

  • Benenne die Datei *lektion63.htm*.
  • Öffne die Datei *lektion63.htm* im Browser. Das sieht so aus:

Du hast folgende Attribute in den Table-Tag der oberen Tabelle eingefügt:

  • width="80%"~
    Die Breite (englisch = width) der Tabelle wird prozentual zum Browserfenster festgelegt. Ziehe mal dein Browserfenster groß und klein, dann siehst du wohl den Unterschied.
  • width="350"~
    Ohne Prozentzeichen wird der Wert als feste Pixelgröße erkannt. Die Breite dürfte sich auch beim Ziehen des Browserfensters nicht verändern.
  • height="80"~
    Auch die Höhe (englisch = height) einer Tabelle kann sowohl mit festem Pixel-Wert als auch mit relativem Prozentwert festgelegt werden. In diesem Fall 80 Pixel hoch.