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-3

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.

Rahmendicke

Mit Attributen des Tags table passen Sie die Tabelle Ihren Bedürfnissen an.

Zunächst kann die Rahmendicke eingestellt werden, indem sie als Parameter angegeben wird, etwa border="5".

Wird ein Rahmen aktiviert, so werden damit auch innere Trennlinien, die sog. Gitternetzlinien erzeugt.

Mit Hilfe des cellspacing-Attributes wird der Abstand der Zellen untereinander angegeben. Dies hat insbesondere den Effekt, dass die Dicke der der Gitternetzlinien angepasst wird.

Beispiel: "Eine einfache Tabelle mit Rahmen"

<table border="5" cellspacing="1">
  <tr>
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Ausgabe auf Ihrem Browser

Zeile 1 - Spalte 1	Zeile 1 - Spalte 2
Zeile 2 - Spalte 1	Zeile 2 - Spalte 2

Benutzerdefinierte Tabellengröße

Der Standard definiert die Festlegung der Breite durch das Attribut width, wobei die Angabe in Prozent zur verfügbaren Breite erfolgt. Eine Erweiterung besteht in der absoluten Angabe in Pixel, etwa width="250".

Darüber hinaus lässt sich die Höhe festlegen, wofür das Attribut height verwendet wird. Seine Anwendung entspricht der von width.

Ausgesprochen beliebt ist das Attribut width und hierbei insbesondere width="100%", wodurch eine Tabelle über die gesamte, zur Verfügung stehende Bildschirmbreite erzeugt wird. Dies kann günstiger als absolute Werte sein, da sich die Tabellen nicht zuletzt den jeweiligen Einstellungen des zur Betrachtung benutzten Browsers, also wiederum den Vorlieben des Betrachters, anpassen.

Betrachten wir einige Beispiele:

Beispiel: "Eine dimensionierte Tabelle - I" Diesmal setzen wir einen dickeren Rahmen.

<table width="100%" border="5">
  <tr>
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Ausgabe auf Ihrem Browser

Zeile 1 - Spalte 1	Zeile 1 - Spalte 2
Zeile 2 - Spalte 1	Zeile 2 - Spalte 2

Der Browser wird - wenn ihm wie hier die Wahl bleibt - beide Spalten gleich breit wählen. Dies muss nicht so sein:

Beispiel: "Eine dimensionierte Tabelle - II" mit einem dünnen Rahmen.

<table width="50%" border="1">
  <tr>
    <td> Zeile 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 </td>
    <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

liefert

Ausgabe auf Ihrem Browser

Zeile 1	Zeile 1 - Spalte 2
Zeile 2	Zeile 2 - Spalte 2

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 muss dann scrollen. Bei dimensionierten Tabellen richtet sich der Browser nach Möglichkeit nach den Wünschen des Autors. Dies ist jedoch nicht immer möglich, z.B. wenn Grafiken in den Zellen angezeigt werden. Gleiches gilt auch, wenn vorformatierter Text oder Formulare eingesetzt werden. Wir schließen die Ausführungen zu dimensionierten Tabellen mit einem Beispiel:

Beispiel: "Eine dimensionierte Tabelle - III" Diesmal lassen wir den Rahmen weg.

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

liefert

Ausgabe auf Ihrem Browser

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

Solche Tabellen ohne Rahmen werden als blind tables (auch: hidden tables) bezeichnet. Dieses einfache Beispiel zeigt beispielsweise, wie eine Art von zweispaltigem Text erzeugt werden kann. Bei geschicktem Einsatz lassen sich allein damit schon recht "hübsche" Effekte und Dokumente erzeugen.

Das eben betrachtete Beispiel liefert kein allzu tolles Ergebnis. Als störend fällt zumindest auf, dass

die Spalten nicht gleich breit sind,
die Spalten recht eng nebeneinander stehen,
der Text der beiden Spalten nicht auf selber Höhe beginnt.

Wir werden diese Mägel noch betrachten und jeweils eine kurze Erläuterung geben, warum der Browser so ungünstig darstellt. Diese Erläuterung ist nicht immer fundiert, d.h. sie beruht lediglich auf den Beobachtungen des Autors. Es wird sich zeigen, dass diese Darstellung eine direkte Folge der Voreinstellungen für Tabellen ist und dass die gefundenen Begründungen nach Meinung des Autors einleuchtend sind. Wir werden dann besprechen, mit welchen Attributen wir das Ergebnis ansprechender gestalten können.

Warum also sind die Spalten nicht gleich breit? Dies liegt (wahrscheinlich) am dem default-Verhalten, dass der Browser bemüht ist, eine Tabelle so kompakt wie möglich darzustellen. D.h. die Breiten werden in gewissem Maße optimal gewählt, was i.a. sicher ein Vorteil ist. In der linken Spalte haben wir deutlich mehr Text, als in der rechten. Der Browser wählt die Breiten in gewissen Grenzen aber so, dass die von den Texten benötigte Zeilenhöhe nahezu gleich ist. In unserem Fall folgt die Spaltenbreite der rechten Spalte wesentlich aus "dimensionierten", da HTML-Browser keine Silbentrennung durchführen (können).

D.h. die Breiten werden so gewählt, dass in etwa beide (oder allgemeiner) alle Spalten, nahezu die gleiche Anzahl von Zeilen haben.

(Fortsetzung hierzu im nächsten Teil)

Teil 2

Teil 4

Tabellen in HTML-3

Rahmendicke

Benutzerdefinierte Tabellengröße

Verwandte Artikel und Seiten