Tabellenlayouts

In den späten 90er Jahren sahen fast alle HTML-Dokumentkörper so ähnlich aus wie das folgende Beispiel (bitte nicht nachbauen — veraltetes und obsoletes HTML!):

<body bgcolor="#ffffff" topmargin="0">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr><td align="center">
<table border="0" bgcolor="#ffffdd" width="820" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" width="180" bgcolor="#ddffff"> 
Linke Spalte
</td>
<td align="left" height="100%" valign="top"> 
Hauptspalte
</td>
<td align="left" valign="top" width="180" bgcolor="#ddffff"> 
Rechte Spalte
</td>
</tr> 
</table> 
</td>
</tr> 
</table>  
</body>

Der Inhalt des body-Elements war in der Regel eine einzige große Tabelle, die als sogenannter Wrapper für den gesamten Fensterinhalt oder zumindest die gesamte Dokumentbreite verwendet wurde. Damit hatte man Gestaltungsspielraum. Meistens wurden dann, wie im Beispiel, noch weitere, innere Tabellen verwendet, um das Layout zu „stabilisieren“. Das war nötig, weil der seinerzeit verbreitetste Browser, Netscape 4.x, etliche Macken und eine völlig eigenwillige Art hatte, HTML zu interpretieren. Mit einigen Workarounds wie dem sogenannten „blinden Pixel“ und eben auch verschachtelten Tabellen kam der Webdesigner von damals jedoch ganz gut klar und konnte fast jegliche Verteilung von Inhalten am Bildschirm erreichen.

Die Technik war erlernbar, und wer sie beherrschte, gewöhnte sich schnell daran. Vergleicht man dieses HTML mit dem, was heute darunter verstanden wird, so lässt sich erahnen, welches Umdenken da zwischenzeitlich stattgefunden hat, und wie schmerzlich der Umlernprozess für so manchen Webdesigner war, der sich auf HTML-basiertes Webseiten-Layout mit Tabellen und jeder Menge physischem Markup eingeschossen hatte.

Noch immer gibt es zahlreiche Webseiten im Netz, die diesem veralteten Paradigma für Webseiten-Layouts folgen. Teilweise deshalb, weil die Layouts einfach noch aus der Zeit vor oder um die Jahrtausendwende stammen, teilweise aber auch deshalb, weil sie von Webdesignern erstellt wurden, die ihr Handwerk in den frühen Jahren des Web erlernt haben und sich dann nicht mehr weiterentwickelt haben.

Es gibt andererseits Hardliner, die Tabellen nur für kolonnenartige Daten verwendet sehen möchten. In diesem Buch wird die Ansicht vertreten, dass Tabellen für jede Art von tabellarischen Daten und erkennbar tabellarischen Anordnungen verwendet werden sollten. Eine tabellarische Anordnung ist beispielsweise eine Thumbnail-Galerie, also eine Vorschaubild-Tafel für größere Bilder, Videos usw. In manchen Formularen kommen auch tabellarische Anordnungen von Eingabefeldern vor. Die Grenzen sind bei Tabellen immer etwas fließend, da Tabellen von Haus aus einerseits ein semantisch sinnvolles Abbildungsmodell für Daten sind, andererseits aber auch von vorneherein eine optische Anordnung bewirken.

Webdesign und auch die Feinformatierung von Inhalten werden aus heutiger Sicht nur noch mit Hilfe von CSS realisiert. Das gilt auch dann, wenn Sie sogenannte Grid-Layouts realisieren möchten — Layouts, die sich am Spaltensatz von Zeitungen und Magazinen orientieren. Es gibt dabei ein tabellenartiges Raster, in das sich alle Inhalte einfügen. Dadurch entstehen ruhige, übersichtlich wirkende Layouts trotz vieler, unterschiedlicher Inhalte auf einer Seite. Insofern es jedoch ein Layoutwunsch ist, ist CSS dafür zuständig, nicht HTML.

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License