Seitengestaltung mit Tabellen
(HTML-Kurs, 8)

Mit Hilfe "unsichtbarer" Tabellen (ohne border-Attribut beim <table>-Tag) lassen sich Texte und Bilder fast beliebig auf einer Seite anordnen.
Tabellen können so als "Layoutwerkzeug" zur Formatierung eingesetzt werden (Ramm, S. 183).

"Dabei verläßt man zwar den "Pfad der Tugend", weil man anfängt, HTML-Elemente zur optischen anstatt zur inhaltlichen Gestaltung zu verwenden, aber ein klein wenig Abwechslung im HTML-Einheitsdesign ist ja nicht unbedingt schlecht."
(Ramm, ibid.)
Zudem geht es nicht nur um Design, sondern um die gut lesbare Strukturierung z.B. einer Homepage mit zahlreichen links. Dabei sind Tabellen immer noch den frames vorzuziehen, die schwierig zu handhaben sind (Ausdruck, Speicherung, Lesezeichen, Navigation) und von vielen Browsern nicht gelesen werden können. Kann ein Browser eine Tabelle nicht darstellen, so wird wenigstens der Inhalt wiedergegeben - bei frames erscheint im entsprechenden Fall eine völlig leere Seite.
Wünschenswert wäre es natürlich, eine zusätzliche no tables-Version anzubieten!

Beispiel 1: Zwei gleich große Spalten

Johann Peter Eckermann:
Gespräche mit Goethe in den letzten Jahren seines Lebens
        Ich saß eines Abends bei angezündeter Lampe mit beiden Eltern am Tische. Mein Vater war von Hamburg zurückgekommen und erzählte von dem Verlauf und Fortgang seines Handels. Da er gerne rauchte, so hatte er sich ein Paket Tabak mitgebracht, das vor mir auf dem Tische lag und als Wappen ein Pferd hatte. Dieses Pferd erschien mir als ein sehr gutes Bild, und da ich zugleich Feder und Tinteund ein Stückchen Papier zur Hand hatte, so bemächtigte sich meiner ein unwiderstehlicher Trieb es nachzuzeichnen. Mein Vater fuhr fort von Hamburg zu erzählen, während ich, von den Eltern unbemerkt, mich ganz vertiefte im Zeichnen des Pferdes. Als es fertig war, kam es mir vor, als sei meine Nachbildung dem Vorbilde vollkommen ähnlich und ich genoß ein mir bisher unbekanntes Glück.
(Einleitung)

Beispiel 2: Randtexte

(Ramm, S. 184)

Leicht zu
erlernen
Die Skriptsprache "PERL" (Practical Extraction and Report Language) ist äußerst einfach zu erlernen, da fast alle Sprachkonstrukte an verbreitete Sprachen (C) und Hilfsprogramme (awk, sed) angelehnt sind.
effizient PERL ist eine sehr mächtige Sprache. Schon mit wenigen Zeilen kann man Daten, die in einem bestimmten Format vorliegen, extrahieren, auswerten usw.
vielseitig Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp. Usw. etc. pp.
Quelltext:

<table>
            <tr>
                  <td valign=top><em>Leicht zu<br>erlernen</em></td>
                  <td>Die Skriptsprache "PERL" usw. </td>
             </tr>
... usw.

"Wichtig ist das <BR>-Tag bei "Leicht zu erlernen"; ohne diesen erzwungenen Zeilenumbruch hätte der Browser aller Wahrscheinlichkeit nach die erste Spalte so breit ausgelegt, daß der Text "Leicht zu erlernen" in der ganzen Breite hineinpaßt, und das hätte die Optik empfindlich gestört."
(ibid.)
Oder, mit farbigem Tabellen-Hintergrund:
(Beispiel von Bernd Cappel, Düsseldorf)
Vorbemerkung
PHP/FI ist ein Interpreter-Programm, das auf einem WWW-Server abgelegte Web-Dokumente dynamisch, also zur Zeit der Zugriffe durch einen Client, aufbereitet. Die PHP-Dokumente enthalten i.d.R. Text und HTML-Markup wie normale - statische - HTML-Dokumente, zusätzlich aber einen Programm-Sourcecode in der PHP-Interpretersprache, der von dem PHP-Programm interpretiert und ausgeführt wird und z.B. an der Stelle seines Auftretens variable Teile einer HTML-Seite erzeugt.

Aufgrund der zahlreichen Möglichkeiten von PHP, vor allem seiner Vielzahl von Standardfunktionen, beschränken sich die Anwendungen nicht auf variable Bestandteile in Dokumenten. Genauso können Formulareingaben ausgewertet und in Dateien oder ggf. Datenbanken hinterlegt werden. Einiges davon sollen die folgenden Beispiele illustrieren. Die Beispiele sollen auch als "Kochrezepte" für eigene Anwendungen dienen - zum Verwenden und Anpassen, ohne alle Details der Interpretersprache kennen zu müssen.

Quelltext:

<TABLE BORDER=0 WIDTH="100%" CELLSPACING=16>
<TR>
<TH ALIGN=RIGHT VALIGN=TOP WIDTH="30%" BGCOLOR="#e0e0e0">
<FONT FACE="Arial" SIZE=4>
Vorbemerkung
</FONT>
<HR NOSHADE SIZE=2>
</TH>
<TD ALIGN=LEFT VALIGN=TOP WIDTH="70%">
<FONT FACE="Book Antiqua,Helvetica,Times">
PHP/FI ist ein Interpreter-Programm, das auf einem WWW-Server abgelegte
Web-Dokumente dynamisch, ... usw.
</table>


Anmerkung:
Ähnlich strukturiert könnte die Seite auch mit Hilfe einer Glossarliste (<dl>) werden (und wäre damit für alle Browser lesbar).

Beispiel 3: Bild- und Textausrichtung

(Ramm, S. 183)

Um den Aufbau dieser Seiten zu erkennen, kann man sie abspeichern und und <table> durch BORDER=1 ergänzen.

Die Universitätsbibliothek Dortmund ist eine zentrale Betriebseinheit der xxx-Universität Dortmund. Sie steht allen Hochschulangehörigen, aber auch der Bevölkerung usw. usw. usw. usw.

Hier sehen Sie ein Photo des Bibliotheksgebäudes. Photo der UB Dortmund

Die Bibliothek besitzt nicht nur einen Bestand von x Millionen Büchern, sondern stellt darüber hinaus auch zahlreiche Medieneinheiten in Form von Mikrofiches und -filmen, CD-ROMs, Videos etc. zur Verfügung. usw. usw. usw.


Quelltext:

Die Universitätsbibliothek Dortmund ist eine usw.<p>
<table width="100%">
<tr>

<td align=right valign=bottom><em>Hier sehen
Sie ein Photo des Bibliotheksgebäudes.</em></td>
<td>

<img src="http://www.ub.uni-dortmund.de/images/ubmini.gif"
alt="Photo der UB Dortmund">
</td>
</tr>
</table><p>
Die Bibliothek besitzt nicht nur einen Bestand von x Millionen usw.

Beispiel 4-5

  1. Frühere Hauptseite der Universitäts- und Landesbibliothek Düsseldorf
  2. Frühere Hauptseite der Universitätsbibliothek Dortmund
  3. Plan des Lesesaals der Brechtbau-Bibliothek

Beispiel 6

Strukturierung von Seiten mit Hilfe sichtbarer Tabellen:
  1. Recherche-Seite der Brechtbau-Bibliothek

HTML-Kurs, 9: Formulare und dynamische Web-Seiten (CGI, PHP, Java, Javascript und ActiveX)

HTML-Kurs

Letzte Änderung: 26.5.2017.
Dr. Thomas Hilberer, th@hilberer.de.
http://www.hilberer.de/html/tab3.html