Layout/Design in Tabellenbauweise

Die Tabellenbauweise ist die einfachste Form eine Homepage zu erstellen und somit sehr gut für Anfänger geeignet.
Wichtig bei der Tabellenbauweise ist, dass mehrere Tabellen für das Design erstellt werden da der Microsoft Internet Explorer die Angewohnheit hat, eine Tabelle erst anzuzeigen wenn die Tabelle vollständig geladen ist.

Somit musst Du Dein Layout/Design in mindestens zwei Bereiche aufteilen - der erste Bereich ist dann Logo und Banner und der zweite Bereich ist für die Links und den Inhalt.

Wie Du dies in HTML und CSS umsetzt zeige ich Dir nun im Anschluss.

Als erstes benötigst Du wieder die "index" (.html oder .php) und die "formatierung.css" um mit den Arbeiten beginnen zu können. Diese sollten am besten wieder leer sein um mit den hier durchgeführten Programmierungen nicht durcheinander zu kommen.

Der Inhalt (Quelltext) der "index" Datei wäre also nur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Meine erste Homepage</title>
<link rel="stylesheet" type="text/css" href="privates/formatierung.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="robots" content="index, follow">
<meta name="keywords" content="hier circa 10 Suchbegriffe angeben">
<meta name="description" content="Suchmaschinentext">
<meta name="date" content="JAHR-MONAT-TAG">
<meta http-equiv="Content-Language" content="de">
<meta name="author" content="DEIN NAME">
<meta name="audience" content="alle">
 
</head>
<body>
 
</body>
</html>

Der Inhalt der "formatierung.css" wäre nur:

body { background-color:#ffffff; color:#000000; }

Um jetzt die zwei Bereich (Logo/Banner und Links/Inhalt) einrichten zu können benötigen wir Namen um diese Bereiche aufzurufen.
Der erste Bereich ist Logo und Banner, somit wäre mein Vorschlag "logo_banner" (für die Tabelle), "logo" und "banner" (für die Spalten/Zellen)
und
für den zweiten Bereich (Links und Inhalt) dann "links_inhalt" (für die Tabelle), "links" und "inhalt" (für die Spalten/Zellen).

Als nächstes musst Du Dir überlegen, welche minimale Browserauflösung Du verwenden möchtest. Dabei kannst Du davon ausgehen, dass kaum noch Auflösungen von weniger 1024 x 768 Pixel verwendet werden.
Um diese minimale Breite auch in jedem Browser zu erzwingen benötigen wir wieder einen Bereich, diesen kannst Du sinnvoller Weise "min_breite" benennen.

Und so würde die "formatierung.css" jetzt aussehen:

body { background-color:#ffffff; color:#000000; }

table.logo_banner { }
td.logo { }
td.banner { }

table.links_inhalt { }
td.links { }
td.inhalt { }

td.min_breite { }
div.min_breite { }

Aufgerufen werden die Bereiche in der "index" dann wie folgt:

<body>
 
<table class="logo_banner">
<tr>
  <td class="logo"> </td>
  <td class="banner"> </td>
</tr>
<tr>
  <td colspan="2" class="min_breite"><div class="min_breite"></div></td>
</tr>
</table>
 
<table class="links_inhalt">
<tr>
  <td colspan="2" class="min_breite"><div class="min_breite"></div></td>
</tr>
<tr>
  <td class="links"> </td>
  <td class="inhalt"> </td>
</tr>
</table>
 
</body>

Falls Du jetzt Deine "index" mit einem Browser aufrufst, dann wundere Dich nicht, wenn der Browser nur eine leere weiße Seite anzeigt, denn Du musst in den Bereichen noch die Formatierungsangaben machen.

Und so könnte die Formatierung aussehen:

Angabe Erläuterung
body { background-color:#ffffff; color:#000000; } allgemeine Angaben zur Webseite, hier Hintergrund weiß (#ffffff) und Textfarbe Schwarz (#000000)
 
table.logo_banner { width:100%; } Hauptangabe zur Tabelle für Logo/Banner - hier Breite von 100% der Auflösung (also volle Fensterbreite)
td.logo { width:25%; height:160px; } Angabe zur Spalte des Logos - hier 25% der Tabellenbreite und Höhe 160 Pixel
td.banner { width:75%; height:160px; } Angabe zur Spalte des Banners - hier 75% der Tabellenbreite und Höhe 160 Pixel
 
table.links_inhalt { width:100%; } Hauptangabe zur Tabelle für Links/Inhalt - hier Breite von 100% der Auflösung (also volle Fensterbreite)
td.links { width:25%; } Angabe zur Spalte der Links - hier 25% der Tabellenbreite und KEINE Höhe
td.inhalt { width:75%; } Angabe zur Spalte des Inhalts - hier 75% der Tabellenbreite und KEINE Höhe
 
td.min_breite { height:2px; } Angabe zur Spalte der minimalen Breite - hier nur Höhenangabe (zum Beispiel 2px)
div.min_breite { width:988px; height:1px; line-height:1px; } Angabe zum Block der minimalen Breite - hier wird die minimale Auflösung (988px für Auflösung 1024x768 Pixel) sowie die Größe des Feldes bestimmt
 

Da weder Hintergrundfarben noch -bilder bestimmt sind wird der Browser jetzt immer noch eine leere weiße Seite anzeigen. Um die Aufteilung zu sehen, welche hier in der Formatierung gemacht wurden, müsstest Du also Hintergrundfarben und/oder -bilder bestimmen (oder alternativ Rahmen).
Also folgende Angaben ergänzen:
Hintergrundfarbe: background-color:#?????? - Hintergrundbild: background-image:url(???) oder Rahmen border:???. Genauere Angabe dazu findest Du in den Grundlagen.

Hier habe ich eine fertige Seite in Tabellenbauweise vorbereitet:
Entwurf in Tabellenbauweise - Quelltext zu dieser Seite - Formatierung zu dieser Seite

Natürlich kannst Du diesen Entwurf auch verwenden um Deine Seite zu kreieren - viel Spaß.