brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Tabellen in HTML-4

Teil 1

Tabellen sind ein ausgesprochen mächtiges und gern benutztes Mittel zur Gestaltung, die weit über die reine Nutzung zur tabellarischen Anzeige irgendwelcher Werte hinausgeht.

Tabellen sind immer eigene Absätze, gehören damit zu den blockorientierten Gestaltungselementen.

Festlegung von Spaltenbreiten und Zeilenhöhen

Wir hatten gesehen, dass mit Hilfe der Attribute width und height des Tags table die Tabellenbreite- und -höhe festgelegt werden kann. Darüber hinaus lassen sich jedoch, und das mit verschiedenen Methoden, die einzelnen gewünschten Spaltenbreiten und Zeilenhöhen exakt wählen. Leider werten bei weitem nicht alle Browser diese Attribute aus.

Sie können bei jeder Zeilen- oder Zellendefinition Breite und Höhe angeben. Beachten Sie, dass diese Definitionen mittels width- und height-Attribut zwar lokal gemacht werden, aber globale Auswirkungen haben. Fordern Sie beispielsweise für irgendeine Zelle die Breite x und die Höhe y, so haben die Spalte bzw. die Zeile, in der sich die Zelle befindet, mindestens die Breite x bzw. die Höhe y. "Mindestens" heißt, dass jeweils die maximalen Werte gelten. Wir verdeutlichen dies an einigen Beispielen:

Wir geben der mittleren Zeile mit dem height-Attribut des tr-Tags eine Höhe von 100 Pixeln:

<table>
  <tr> ... </tr>
  <tr height="100"> ... </tr>
  <tr> ... </tr>
</table>

Hier hat die mittlere Zeile eine Höhe von 150 Pixel:

<table>
  <tr> ... </tr>
  <tr height="100"> ... <td height="150"> ... </td> ... </tr>
  <tr> ... </tr>
</table>

da eine td-Zelle mit Höhe 150 Pixel definiert wurde. Analog für Breiten: eine Spaltenbreitenfestlegung

<table>
  <tr> ... </tr>
  <tr> ... <td width="100"> ... </td> ... </tr>
  <tr> ... </tr>
</table>

kann durch eine andere sozusagen "überstimmt" werden

<table>
  <tr> ... </tr>
  <tr> ... <td width="100"> ... </td> ... </tr>
  <tr> ... </tr>
  ...
  <tr> ... <td width="150"> ... </td> ... </tr>
</table>

was hier zu einer Spaltenbreite von 150 Pixeln führt.

Beachten Sie, dass sich alle Zellen der Spalte oder Zeile an die schließlich durch den Browser gewählten Ausdehnungen halten. Auch hier gilt: sofern dies möglich ist. Sind z.B. Höhe und Breite so gesetzt, dass ein Zelleninhalt "beim besten Willen" nicht in diese Ausdehnung passen, so wird die Ausdehnung angepasst.

Unter Umstäden nützlich sind die parallele Verwendung von absoluten und prozentualen Angaben. Beachten Sie aber, dass diese für verschiedene Zellen gemacht werden müssen. Machen Sie die Angaben in ein und derselben Zelle, so wählt der Browser eine von diesen aus und ignoriert die andere.

<table>
  <tr> ... </tr>
  <tr> ... <td width="50"> ... </td> ... </tr>
  <tr> ... </tr>
  ...
  <tr> ... <td width="50%"> ... </td> ... </tr>
</table>

Hier nimmt die Spalte 50% der Gesamtbreite, mindestens aber 50 Pixel ein.

Beachten Sie, dass lokale Definitionen, d.h. Höhen- und Breitenangaben, sich stets auf die Gesamtbreite der Tabelle beziehen. Ist die Tabelle insgesamt zum Beispiel 50% der möglichen Gesamtausdehnung breit, so ist eine zum Beispiel wiederum 50% breite Zelle, 50% von 50%, also 25% der möglichen Gesamtausdehnung breit.

Erstes Zwischenergebnis:

Beispiel: "Eine dimensionierte Tabelle - IV" Festlegung der Spaltenbreite

<table width="50%" border="0">
  <tr>
    <td width="50%"> (Text1 siehe Ausgabe) </td>
    <td> (Text2 siehe Ausgabe) </td>
  </tr>
</table>

liefert

Ausgabe auf Ihrem Browser

In jeder Zelle kann Beliebiges stehen, insbesondere auch beliebig langer Text. Bei undimensionierten Tabellen bleibt es dem Browser überlassen, ob er Tabellen über den darstellbaren Bereich dehnt. Der Benutzer hat dann aber die Möglichkeit, den Bildschirmausschnitt nach links und rechts zu verschieben.

Bei dimensionierten Tabellen richtet sich der Browser nach Möglichkeit nach den Wünschen des Autors.

Wenn das Ergebnis nicht wie erwartet ist, verarbeitet Ihr Browser das width-Attribut nicht.

Ansonsten nimmt die gesamte Tabelle die Hälfte der möglichen Breite ein. Beide Spalten wiederum nehmen etwa Hälfte dieser Tabellenbreite ein. Somit ist jede Spalte beträgt die Breite jeder Spalte etwa 25% der möglichen Breite ein. Zur Verdeutlichung wurden die Zellen farblich hinterlegt.

Teil 3

Teil 5

Tabellen in HTML-4

Festlegung von Spaltenbreiten und Zeilenhöhen

Verwandte Artikel und Seiten