HTML-Tabelle

Der Themenbereich Tabellen ist äußerst vielschichtig und daher auch etwas kompliziert. Aber dafür können auch diverse Effekte erreicht werden, die u.a. der Verschönerung der Seitengestaltung dienen. Hier sollen lediglich einfache Grundmuster der Tabellenprogrammierung behandelt werden. Auf die vielen möglichen Attribute und vor allem deren Anwendung in der Praxis wird nur unvollständig eingegangen.

Der Beginn einer HTML Tabelle wird dem Browser durch <TABLE> mitgeteilt. Soll die HTML Tabelle mit einem Außenrahmen umgeben werden, kommt das Attribut BORDER hinzu, eventuell mit gewünschter Pixelangabe.

Hinweis

In der programmiertechnischen Entwicklungsphase sollte eine HTML Tabelle grundsätzlich mit einem Rahmen versehen werden. Dadurch ist das Ergebnis viel besser überprüfbar. Erst nach Fertigstellung wird dann der Rahmen – falls gewünscht – entfernt. Alternativ kann auch BORDER=0 notiert werden.

HTML Tabelle Aufbau

Um nicht durcheinander zu kommen, sollten Sie eine HTML Tabelle nach Reihen geordnet schreiben. So beginnt also die erste Reihe/Zeile mit <TR>. Eine Reihe kann mehrere Zellen beinhalten. Dabei werden die Zellen jeweils durch <TD> und </TD> eingeschlossen. Ist das Zeilenende erreicht folgt als Abschlußtag </TR>. Entsprechend wird mit den nächsten Reihen verfahren. Das Ende der HTML Tabelle wird mit </TABLE> bezeichnet.

Beispiellisting:

<TABLE BORDER=1>
   <TR>
      <TD>Inhalt Zelle 1 von Reihe 1</TD>
      <TD>Inhalt Zelle 2 von Reihe 1</TD>
      <TD>Inhalt Zelle 3 von Reihe 1</TD>
   </TR>
   <TR>
      <TD>Inhalt Zelle 1 von Reihe 2</TD>
      <TD>Inhalt Zelle 2 von Reihe 2</TD>
      <TD>Inhalt Zelle 3 von Reihe 2</TD>
   </TR>
   <TR>
      <TD>Inhalt Zelle 1 von Reihe 3</TD>
      <TD>Inhalt Zelle 2 von Reihe 3</TD>
      <TD>Inhalt Zelle 3 von Reihe 3</TD>
   </TR>
</TABLE>

Und hier das Ergebnis:

Inhalt Zelle 1 von Reihe 1Inhalt Zelle 2 von Reihe 1Inhalt Zelle 3 von Reihe 1
Inhalt Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2
Inhalt Zelle 1 von Reihe 3Inhalt Zelle 2 von Reihe 3Inhalt Zelle 3 von Reihe 3

Jetzt soll die erste Reihe etwas verändert werden. Die erste Zelle soll leer bleiben. Dazu wird in der ersten Zelle der Inhalt durch einen <BR>-Befehl ersetzt. Zelle 2 und 3 sollen als Spaltenüberschriften dienen. Dazu werden die <TD>-Tags durch <TH>-Tags ersetzt. Das bewirkt eine Fettschrift und eine Zentrierung der Textinhalte.

Quelltext der relevanten Teile:

<TABLE BORDER=1>
   <TR>
      <TH><BR></TH>
      <TH>Zelle 2 von Reihe 1</TH>
      <TH>Zelle 3 von Reihe 1</TH>
   </TR> ….

Ergebnis:

Zelle 2 von Reihe 1Zelle 3 von Reihe 1
Inhalt Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2
Inhalt Zelle 1 von Reihe 3Inhalt Zelle 2 von Reihe 3Inhalt Zelle 3 von Reihe 3

Auch die beiden linken Zellen (1) sollen jetzt in Überschriftenzellen umgewandelt werden. Das erfolgt analog dem obigen Beispiel. Zusätzlich soll die ganze HTML Tabelle eine Überschrift erhalten. Dafür wird aber jetzt nicht der tabelleneigene CAPTION-Tag benutzt. Die Überschrift soll eben nicht wie bei CAPTION üblich außerhalb der HTML Tabelle stehen, sondern sie soll selbst Bestandteil der HTML Tabelle sein. Dies ist nur möglich, wenn eine Zellenreihe eingefügt wird, die sich über die ganze Breite der Tabelle erstreckt. In diesem Fall also über drei Spalten. Dafür gibt es das Attribut COLSPAN, dem die Anzahl der Spalten hinzugefügt werden muß. Mit dem Attribut ROWSPAN können übrigens Reihen/Zeilen verbunden werden. Um die Tabellenüberschrift mittig auszurichten, muß auch noch ein ALIGN=CENTER eingefügt werden. Ferner greifen wir auf den FONT-Befehl zurück, um die Schrift besonders hervorzuheben.

Quelltext der relevanten Teile:

<TABLE BORDER=1>
   <TR>
      <TD COLSPAN=3 ALIGN=CENTER> <FONT SIZE=+2>Tabellen-Überschrift</FONT>
      </TD>
   </TR>
   <TR>
      <TH><BR></TH>
      <TH>Zelle 2 von Reihe 1</TH>
      <TH>Zelle 3 von Reihe 1</TH>
   </TR>
   <TR>
      <TH>Zelle 1 von Reihe 2</TH> ….

Und wieder das Ergebnis:

Tabellen-Überschrift
Zelle 2 von Reihe 1Zelle 3 von Reihe 1
Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2
Zelle 1 von Reihe 3Inhalt Zelle 2 von Reihe 3Inhalt Zelle 3 von Reihe 3

Sie werden sicher schon bemerkt haben, daß sich manchmal die "Rahmenbedingungen" ändern. Wenn die Inhalte in einer Zelle keinen Platz mehr haben, verschieben sie die Begrenzungen einfach. Das werden wir gleich noch etwas deutlicher sehen. In die leere Zelle wird jetzt nämlich eine Grafik eingefügt. Und diese hat ja eine bestimmte Größe, die sie zur Darstellung braucht. Außerdem kann durch das Attribut HEIGHT (bzw. WIDTH für die Breite) und entsprechener Pixelangabe die Änderung von Zellgrößen unabhängig vom Inhalt erzwungen werden. Das hat wie immer Auswirkungen auf die Darstellung der ganzen entsprechenden vertikalen Spalte oder der waagerechten Reihe.

HTML Tabelle mit Bilddateien versehen

Für diese beiden Änderungen werden lediglich folgende Zeilen ersetzt:

<TH><BR></TH>
durch
<TH><IMG SRC="grafik1.gif" ALT="Grafik" BORDER=1></TH>

sowie z.B. die Zelle 3 von Reihe 3

<TD>Zelle 3 von Reihe 3</TD>
durch
<TD WIDTH=250 HEIGHT=80>Zelle 3 von Reihe 3</TD>

Ergebnis:

Tabellen-Überschrift
GrafikZelle 2 von Reihe 1Zelle 3 von Reihe 1
Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2
Zelle 1 von Reihe 3Inhalt Zelle 2 von Reihe 3Inhalt Zelle 3 von Reihe 3

Was fällt alles auf? Die Grafik spreizt die Höhe der Zelle. Dies wirkt sich auch auf die rechts danebenliegenden Zellen aus. Die Grafik steht in einer Zelle, die breiter ist als sie selbst. Das liegt an den Textinhalten darunter. Die brauchen Platz und haben den auch. Die Grafik ist zentriert. Das liegt am TH-Befehl, der die Grafik-Zelle als Überschriftenzelle ausweist. Für Zelle 3 der Reihe 3 hatten wir Breite und Höhe vorgegeben. Wie man sieht, hat das auch Auswirkungen auf die Breite der gesamten Spalte darüber und auf die Höhe der gesamten Reihe links daneben.

Was passiert, wenn wir mehr Text in Zelle 2 Reihe 2 und in Zelle 3 Reihe 3 schreiben? Sehen Sie selbst:

Tabellen-Überschrift
GrafikZelle 2 von Reihe 1Zelle 3 von Reihe 1
Zelle 1 von Reihe 2Der Inhalt von Zelle 2 in Reihe 2 braucht durch mehr Text mehr Platz. Dadurch vergrößert sich diese Zelle nach rechts. Aber irgendwann ist Schluß, dann wird ein automatischer Zeilenumbruch durchgeführt. Dadurch muß sich die Zelle auch vertikal vergrößern. Und dies hat Auswirkungen auf die Zellen links und rechts davon.Inhalt Zelle 3 von Reihe 2
Zelle 1 von Reihe 3Inhalt Zelle 2 von Reihe 3Der Inhalt von Zelle 3 in Reihe 3 ist auf eine bestimmte Größe festgelegt. Wenn die Breitenangabe erreicht ist, findet ein Zeilenumbruch statt. Der Zelleninhalt ist insgesamt zu lang für die Begrenzung durch die Höhenangabe. Also wird diese ignoriert und dadurch auch die Höhe der gesamten Reihe vergrößert.

Die HTML Tabelle in ihrer Gesamtheit kann ebenfalls mit einer bestimmten Breite versehen werden. Ohne Angabe stünde ihr 100% zur Vefügung. Wir sehen mal nach, was bei

<TABLE BORDER=1 WIDTH=90%>

geschieht. Außerdem schreiben wir noch in Zelle 1 von Reihe 3 ein zusammengehöriges Wort, das durch einen Zeilenumbruch nicht getrennt werden kann.

Tabellen-Überschrift
GrafikZelle 2 von Reihe 1Zelle 3 von Reihe 1
Zelle 1 von Reihe 2Der Inhalt von Zelle 2 in Reihe 2 braucht durch mehr Text mehr Platz. Dadurch vergrößert sich diese Zelle nach rechts. Aber irgendwann ist Schluß, dann wird ein automatischer Zeilenumbruch durchgeführt. Dadurch muß sich die Zelle auch vertikal vergrößern. Und dies hat Auswirkungen auf die Zellen links und rechts davon.Inhalt Zelle 3 von Reihe 2
Zelle 1 von Reihe 3: UNZERTRENNLICHInhalt Zelle 2 von Reihe 3Der Inhalt von Zelle 3 in Reihe 3 ist auf eine bestimmte Größe festgelegt. Wenn die Breitenangabe erreicht ist, findet ein Zeilenumbruch statt. Der Zelleninhalt ist insgesamt zu lang für die Begrenzung durch die Höhenangabe. Also wird diese ignoriert und dadurch auch die Höhe der gesamten Reihe vergrößert.

Folgende Breitenwerte liegen fest: Die erste Spalte wird durch die Länge des Wortes "UNZERTRENNLICH" in der Breite bestimmt, die letzte Spalte durch die oben eingeführte Breitenangabe 250 in der Zelle 3 und die HTML Tabelle insgesamt ist auf 90% Platzbedarf eingeschränkt. Diese Faktoren bewirken, daß die zweite Spalte zusammengestaucht wird.

Ich habe gerade für die Tabellenbreite einen Prozentwert benutzt. Dadurch ist man relativ unabhängig von der Monitorgröße und der Bildschirmauflösung. Wenn ich stattdessen eine feste Pixelbreite angegeben hätte, dann sähe das im Ergebnis anders aus, je nach Größe des Monitors und des Pixelwertes. Bei größeren Monitoren wäre eventuell viel ungenutzter Platz oder bei kleineren würde unten eventuell ein waagerechter Scrollbalken erscheinen.

Weitere Attribute haben ebenfalls Einfluß auf den Platz innerhalb der Zellen. So sorgt CELLPADDING mit der Angabe des gewünschten numerischen Pixelwertes für einen bestimmten einheitlichen Abstand der Tabelleninhalte zu den Begrenzungen. Die Dicke der Gitternetzlinien wird durch das Attribut CELLSPACING bestimmt. Dazu muß der TABLE-Befehl entsprechend ergänzt werden: <TABLE BORDER=1 CELLPADDING=8 CELLSPACING=5>

Das Ergebnis (mit einer anderen HTML Tabelle):

Tabellen-Überschrift
GrafikZelle 2 von Reihe 1Zelle 3 von Reihe 1
Zelle 1 von Reihe 2Zelle 2 von Reihe 2Zelle 3 von Reihe 2
Zelle 1 von Reihe 3Zelle 2 von Reihe 3Zelle 3 von Reihe 3

Mit dem Attribut BGCOLOR können ganze Tabellen oder auch nur einzelne Zellen farbig dargestellt werden.

Inhalt Zelle 1 von Reihe 1Inhalt Zelle 2 von Reihe 1Inhalt Zelle 3 von Reihe 1
Inhalt Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2
Inhalt Zelle 1 von Reihe 3Inhalt Zelle 2 von Reihe 3Inhalt Zelle 3 von Reihe 3

Im Beispiel wurde dem TABLE-Tag ein BGCOLOR=Silver hinzugefügt. Außerdem erhielten Zelle 2 von Reihe 1 BGCOLOR=Fuchsia und Zelle 2 + 3 von Reihe 3 jeweils ein BGCOLOR=Aqua. Wenn für die HTML Tabelle keine Farbe angegeben wird, wird diese automatisch in der BODY-Hintergrundfarbe angezeigt. Das wäre in diesem Fall Weiß gewesen.

Mit dem Attribut BACKGROUND= und der Angabe einer Grafik- oder Fotodatei können ganze Tabellen oder auch nur einzelne Zellen mit Hintergrundbildern dargestellt werden.

Inhalt Zelle 1 von Reihe 1Inhalt Zelle 2 von Reihe 1Inhalt Zelle 3 von Reihe 1
Inhalt Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2

Im Beispiel wurde dem TABLE-Tag ein BACKGROUND="grafik.gif" hinzugefügt. Da die Grafik kleiner als die HTML Tabelle ist, wird sie so oft wiederholt, bis die HTML Tabelle gefüllt ist. Bitte beachten Sie, daß durch Hinzufügen einer Hintergrundfarbe (Zelle 2 von Reihe 1) die Hintergrundgrafik überdeckt wird. Allerdings nicht beim Netscape-Browser.

Im folgenden Beispiel erhält nur Zelle 2 von Reihe 2 eine Hintergrundgrafik. Und jetzt zeigt auch Netscape in der darüberliegenden Zelle die Hintergrundfarbe korrekt an.

Inhalt Zelle 1 von Reihe 1Inhalt Zelle 2 von Reihe 1Inhalt Zelle 3 von Reihe 1
Inhalt Zelle 1 von Reihe 2Inhalt Zelle 2 von Reihe 2Inhalt Zelle 3 von Reihe 2

Es gibt noch weitere Anweisungen für das Tabellen-Layout. Diese sind teilweise browserabhängig. An dieser Stelle beschränke ich mich auf eine kurze Aufzählung der Möglichkeiten:

  • Horizontale und vertikale Ausrichtung der HTML Tabelle und der Tabelleninhalte
  • Veränderung des Erscheinungsbildes von Rahmen und Gitternetzlinien

Wie anfangs schon erwähnt, gibt es etliche Möglichkeiten für die Tabellenprogrammierung. Besonders das Weglassen des BORDER-Attributs kann vor allem auch in Verbindung mit der farblichen Hintergrundgestaltung einzelner Zellen interessante und nützliche Effekte hervorzaubern. Es ist auch leicht möglich eine Tabellenzelle bis auf die ganze Seite auszudehnen und so wesentlich mehr Text in die Zelle zu schreiben. Das kann letztlich so weit gehen, daß eine HTML Tabelle als solche überhaupt nicht mehr zu erkennen ist.

Es folgt ein nettes Beispiel für die Möglichkeiten der Tabellenprogrammierung. Dies ist keine Grafik, sondern es sind diverse "blinde" Tabellen (ohne Rahmen), die ineinander verschachtelt wurden. Erwarten Sie bitte nicht, daß ich Ihnen dazu den Quellcode erkläre. Auch meterhohe Wolkenkratzer wären so auf den Bildschirm zu zaubern.

Dies ist keine Grafik
  
  
  
 
 
  
__
 

Die Nachteile von Tabellen sollen hier aber auch nicht verschwiegen werden:

  • Einige Browser-Exoten können Tabellen nicht richtig interpretieren. Das könnte dann z.B. so aussehen:
    Zelle 1 von Reihe 1Zelle 2 von Reihe 1Zelle 3 von Reihe 1Zelle 1 von Reihe 2 usw.
    Durch den Einsatz von <BR> oder <P> in jeder Zelle kann das nur teilweise ausgeglichen werden.

  • Relevanter dürfte allerdings sein, daß die Browserversionen manche Anweisungen unterschiedlich interpretieren. Gerade im Zusammenhang mit der Tabellenprogrammierung sollten Tests zum Pflichtprogramm gehören.

  • Der Browser muß den Inhalt der kompletten HTML Tabelle "kennen", bevor er diese darstellen kann. Das bedeutet u.U. lange Ladezeiten, ohne daß der Leser etwas zu sehen bekommt. Dies kann jedoch durch Aufsplitten von Riesentabellen in kleinere Einheiten umgangen werden.

  • Die Befehle, die sich auf die Darstellung der Schrift auswirken, müssen eventuell für jede einzelne Zelle neu eingegeben werden. Allerdings nur, wenn diese von der Grundeinstellung der Tabellen-Seite abweicht. Da ich dies nicht gemacht habe, sehen die Textinhalte meiner Tabellen hier etwas anders aus.

Abschließend kann festgehalten werden, daß die Tabellenprogrammierung viele Möglichkeiten zur Layoutgestaltung bietet, daß diese aber Schritt für Schritt erforscht werden sollten. Gerade hier gilt der Satz: "Probieren geht über Studieren".

Wir freuen uns auf Ihr Projekt. Kontaktieren Sie uns!
Kostenlose Erstanalyse

Beratung vereinbaren