SELFHTML: HTML / Tabellen / Höhe und Breite erzwingen
Description: (SELFHTML 7.0) Wie Sie in HTML-Tabellen Breite und Höhe der Tabelle, bestimmter Spalten oder Zeilen kontrollieren können.
Keywords: SELFHTML, HTML, Tabellen, Spalten, Zeilen, Höhe, Breite

SELFHTML/Quickbar HTML Tabellen

| ## Höhe und Breite erzwingen
| Höhe und Breite der gesamten Tabelle erzwingen Breite von Spalten erzwingen Höhe von Zeilen erzwingen Zeilenumbruch in Zellen verhindern

## Höhe und Breite der gesamten Tabelle erzwingen

Anzeigebeispiel: So sieht's aus

Sie können eine Tabelle in Gesamtbreite und Gesamthöhe auf ein bestimmtes Maß bringen.

### Beispiel:

    <table border width=60% height=400>
       <!--hier folgt der Tabelleninhalt-->
    </table>

### Erläuterung:

Durch das Attribut `width=` im einleitenden Tag einer Tabelle erreichen Sie, daß der Browser die Tabelle so breit anzeigt wie angegeben (width = Breite). Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, daß die Tabelle so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, daß die Tabelle maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen.

Durch das Attribut `height=` erreichen Sie, daß der Browser die Tabelle so hoch anzeigt wie angegeben (height = Höhe). Auch hier können Sie eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 1000, erzwingen Sie eine Tabellenhöhe unabhängig von der Größe des Anzeigefensters. Mit einem Prozentwert können Sie die Höhe der Tabelle relativ zur Größe des Anzeigefensters bestimmen.

### Beachten Sie:

Die Angabe `height=` ist im Gegensatz zu `width=` nicht im HTML-Standard erwähnt, wird aber von tabellenfähigen Browsern interpretiert.

Die Angaben zu Breite und Höhe einer Tabelle sind nur wirksam, wenn der Tabelleninhalt kleiner ist, so daß leerer Raum entsteht. Wenn der Tabelleninhalt größer ist, werden die Angaben zu Breite und Höhe außer Kraft gesetzt. Die Tabelle wird in diesem Fall vom WWW-Browser so dimensioniert, daß der gesamte Inhalt angezeigt wird.

## Breite von Spalten erzwingen

Anzeigebeispiel: So sieht's aus

Sie können die Breite einzelner Spalten einer Tabelle bestimmen.

### Beispiel:

    <table border>
        <tr>
          <th width=300>Kopfzelle: 1. Zeile, 1. Spalte</th>
          <th>Kopfzelle: 1. Zeile, 2. Spalte</th>
          <th>Kopfzelle: 1. Zeile, 3. Spalte</th>
        </tr>
        <tr>
          <td>Datenzelle: 2. Zeile, 1. Spalte</td> <!-- Breite 300 gilt auch hier -->
          <td>Datenzelle: 2. Zeile, 2. Spalte</td>
          <td>Datenzelle: 2. Zeile, 3. Spalte</td>
        </tr>
        <tr>
          <td>Datenzelle: 3. Zeile, 1. Spalte</td>  <!-- Breite 300 gilt auch hier -->
          <td>Datenzelle: 3. Zeile, 2. Spalte</td>
          <td>Datenzelle: 3. Zeile, 3. Spalte</td>
        </tr>
    </table>

### Erläuterung:

Durch das Attribut `width=` im einleitenden Tag einer Kopfzelle (`<th>`) oder einer Datenzelle (`<td>`) erzwingen Sie eine bestimmte Spaltenbreite (width = Breite). Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, daß die Spalte so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, daß die Spalte maximal vo viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen.

Da die Angabe spaltenweit gilt, brauchen Sie sie nur einmal pro Spalte zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Zeile der Tabelle zu notieren. Im obigen Beispiel wird die gesamte erste Spalte der Tabelle, die aus drei Zeilen besteht, auf 300 Pixel Breite gebracht.

### Beachten Sie:

Die Angabe zur Spaltenbreite ist nur wirksam, wenn der Spalteninhalt in jeder Zeile kleiner ist, so daß leerer Raum entsteht. Wenn der Inhalt größer ist, wird die Angabe außer Kraft gesetzt. Die Spalte wird in diesem Fall so dimensioniert, daß der gesamte Inhalt angezeigt wird. Das ist beispielsweise der Fall, wenn in der Spalte eine Grafik vorkommt, die breiter ist als die angegebene Spaltenbreite.

Falls Sie zugleich eine bestimmte Breite der gesamten Tabelle angeben, hat die Angabe zur Gesamtbreite im Konfliktfall Vorrang gegenüber der angegebenen Breite einer einzelnen Spalte.

Erzwungene Spaltenbreiten und erzwungene Zeilenhöhen (siehe folgender Abschnitt) sind kombinierbar.

Eine übersichtlichere und letztlich auch sauberere Lösung, die Breite von Tabellenspalten zu definieren, steht mit der Möglichkeit zur Verfügung, Spalten vorzudefinieren. Die hier beschriebene Möglichkeit hat dagegen den Vorteil, auch von älteren Browsern interpretiert zu werden.

## Höhe von Zeilen erzwingen

Anzeigebeispiel: So sieht's aus

Sie können die Höhe einzelner Zeilen einer Tabelle bestimmen.

### Beispiel:

    <table border>
        <tr>
          <th height=300>Kopfzelle: 1. Zeile, 1. Spalte</th>
          <th>Kopfzelle: 1. Zeile, 2. Spalte</th>  <!-- Höhe 300 gilt auch hier -->
          <th>Kopfzelle: 1. Zeile, 3. Spalte</th>  <!-- Höhe 300 gilt auch hier -->
        </tr>
        <tr>
          <td height=200>Datenzelle: 2. Zeile, 1. Spalte</td>
          <td>Datenzelle: 2. Zeile, 2. Spalte</td>  <!-- Höhe 200 gilt auch hier -->
          <td>Datenzelle: 2. Zeile, 3. Spalte</td>  <!-- Höhe 200 gilt auch hier -->
        </tr>
        <tr>
          <td height=100>Datenzelle: 3. Zeile, 1. Spalte</td>
          <td>Datenzelle: 3. Zeile, 2. Spalte</td>  <!-- Höhe 100 gilt auch hier -->
          <td>Datenzelle: 3. Zeile, 3. Spalte</td>  <!-- Höhe 100 gilt auch hier -->
        </tr>
    </table>

### Erläuterung:

Durch das Attribut `height=` im einleitenden Tag einer Kopfzelle (`<th>`) oder einer Datenzelle (`<td>`) erzwingen Sie eine bestimmte Zeilenhöhe (height = Höhe). Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, daß die Zeile so viel Pixel hoch dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, daß die Spalte maximal vo viel Höhe des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen.

Da die Angabe für die gesamte Zeile gilt, brauchen Sie sie nur einmal pro Zeile zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Spalte einer Zeile zu notieren.

### Beachten Sie:

Die Angabe zur Zeilenhöhe ist nur wirksam, wenn der Inhalt in jeder Spalte der Zeile kleiner ist, so daß leerer Raum entsteht. Wenn der Inhalt größer ist, wird die Angaben außer Kraft gesetzt. Die Zeile wird in diesem Fall so dimensioniert, daß der gesamte Inhalt angezeigt wird. Das ist beispielsweise der Fall, wenn in der Zeile eine Grafik vorkommt, die höher ist als die angegebene Zeilenhöhe.

Falls Sie zugleich eine bestimmte Höhe der gesamten Tabelle angeben, hat die Angabe zur Gesamthöhe im Konfliktfall Vorrang gegenüber der angegebenen Höhe einer einzelnen Zeile.

Erzwungene Zeilenhöhen und erzwungene Spaltenbreiten sind kombinierbar.

Zelleninhalte werden bei erzwungener Zeilenhöhe mittig ausgerichtet, wenn Sie nichts anderes angeben. Sie können den Zelleninhalt oben oder unten ausrichten.

## Zeilenumbruch in Zellen verhindern

Anzeigebeispiel: So sieht's aus

Sie können festlegen, daß beim Inhalt einer Zelle kein automatischer Zeilenumbruch erfolgen darf. Die Spalte der Tabelle wird bei der Anzeige entsprechend breit dimensioniert.

### Beispiel:

    <table border>
        <tr>
          <th>Kopfzelle: 1. Zeile, 1. Spalte</th>
          <td nowrap>Datenzelle: 1. Zeile, 2. Spalte - Text wird nicht umgebrochen!</td>
        </tr>
    </table>

### Erläuterung:

Durch das Attribut `nowrap` im einleitenden Tag einer Kopfzelle (`<th>`) oder einer Datenzelle (`<td>`) verhindern Sie einen automatischen Zeilenumbruch beim folgenden Zelleninhalt.

### Beachten Sie:

Diese Angabe ist nur bei relativ kurzen und bestimmten Zellinhalten sinnvoll, zum Beispiel bei Quellcode-Zeilen eines Programms.

weiter: | Zelleninhalte ausrichten
zurück: | Rahmendicke, Gitternetzlinien, Randabstand

SELFHTML/Quickbar HTML Tabellen

© 1998 Stefan Münz, muenz@csi.com