| Das HTML Tabellen-Element wurde zur Darstellung üblicher Tabellen-Daten 'erfunden' und wird dazu noch heute mit Erfolg verwendet. | Später fand man heraus, dass sich das Layout von Webseiten mit unsichtbaren Tabellen gut gestalten lässt. Diese Seite zeigt, wie das funktioniert. |
 Web-Start
|
In 6 Schritten zum eigenen Internet-Auftritt |
| Tabelle | Das HTML <table> Element |
| Unsichtbar | Tabellen nicht für Daten sondern für das Layout |
| Zeilen & Spalten | Erstellung und spätere Änderung von Tabellen |
| Breite und Höhe | Einstellung der Tabellen-Dimensionen und der Ausrichtung |
| Verschachtelung | Tabellen in Tabellen |
| Zusammenfassung | von Tabellen-Zellen zur Erstellung komplexer Layouts |
| Rahmen (frames) | Alternative zur Layout-Gestaltung |
Tabellen in Webseiten |
|||||||||
|
Voraussetzungen:
●
Sie haben ein Web am eigenen PC angelegt● Sie haben bereits eigene Webseiten erzeugt ● Sie beherrschen die Navigation mit Hyperlinks |
Vorbereitung:
●
Legen sie zum Experimentieren mit Tabellen eine neue Webseite an und speichern sie diese
z.B. als tabtest.htm ● Legen sie von der Startseite einen Link zur Tabellen-Seite. ● Legen sie von der Tabellen-Seite einen Home-Link zur Startseite. |
||||||||
|
•
An jeder Stelle einer Webseite kann eine Tabelle eingefügt werden: ● Markieren sie die Position und geben sie den Menü-Befehl Der Befehl kann je nach Web-Editor etwas unterschiedlich lauten. Die Anzahl der Spalten & Zeilen ist zunächst belanglos, z.B. 2 Spalten & 3 Zeilen (Muster rechts) |
Muster einer HTML Tabelle
|
||||||||
|
•
In jede Webseite können beliebig viele Tabellen eingefügt werden • Jede Tabelle kann (fast) beliebig viele Spalten und Zeilen enthalten. • Jede Tabelle kann individuell formatiert werden, theoretisch sogar jede einzelne Zelle. |
•
In jede Zelle der Tabelle können Daten (Text) oder beliebige weitere HTML-Elemente
eingefügt werden, auch Grafik und sogar
↓
weitere Tabellen. • Keine Zelle einer Tabelle darf leer bleiben. Sie muss mindestens ein 'geschütztes Leerzeichen' enthalten - Die meisten Web-Editoren sorgen automatisch dafür. |
||||||||
|
●
Fügen sie beliebigen Text in jede Zelle ihrer Tabelle ein. Der Text sollte mehr als
eine Zeile umfassen, damit sie den automatischen Umbruch (neue Zeile) testen können. ● Formatieren sie ausgewählte Teile der Texte in den Zellen (z.B. Fett, Unterstrichen, Farbe, ...) Damit demonstrieren sie, wie man beliebige HTML-Elemente innerhalb von Tabellen-Zellen verwendet. |
●
Fügen sie in eine Tabellen-Zelle eine Grafik ein. ● Testen sie ihre experimentelle Tabellen-Webseite: • Öffnen sie mit einem Browser ihre Startseite • Navigieren sie zur Tabellen-Seite • Ändern sie die Fenster-Größe, um das Verhalten der Tabelle zu studieren. • Wiederholen sie den Test mit einem oder mehreren anderen Browsern: Damit finden sie (besonders später, bei komplexen Webseiten) heraus, welche Elemente mit jedem Browser funktionieren - Sie sollten nur solche verwenden. |
||||||||
Unsichtbare Tabellen |
|||||||
|
Tabellen eignen sich ausgezeichnet zur Gestaltung des Layouts von Webseiten. ● In diesem Fall enthalten die einzelnen Zellen nicht einfache Daten (z.B. Zahlen) sondern größere Bauteile einer Webseite, z.B. Kapitel, Artikel, Grafiken, usw. ● Die Tabelle selbst wird normalerweise unsichtbar gemacht. Das Beispiel rechts zeigt eine Layout-Tabelle mit 3 Spalten und 2 Zeilen. 
Diese Methode bietet große Vorteile:● Sie funktioniert auf allen Systemen, mit allen gängigen Browsern. ● Sie arbeitet rasch und zuverlässig. ● Die Herstellung ist vergleichsweise einfach. |
Muster einer un/sichtbaren Tabelle:
Rand (border="1"): |
||||||
|
●
Legen sie eine neue Webseite an, z.B. tabtestt.htm ● Legen sie von der Startseite einen Link zur Tabellen-Layout-Seite. ● Fügen sie keinen einfachen Inhalt in die neue Webseite ein, sondern eine Tabelle, z.B. mit 3 Spalten und 3 Zeilen. • Wenn möglich, geben sie die Breite mit 100% an - Details zum Thema Breite & Höhe ↓ auf dieser Seite. • Die Tabelle sollte zunächst noch sichtbar sein - Das erleichtert die Gestaltung der Webseite. |
●
Tragen sie einen Titel in die oberste Zeile / Mitte ein ● Tragen sie einen Home-Link ein, sinnvoll an der gleichen Position wie auf ihren anderen Webseiten (im Beispiel. links oben) ● Tragen sie in einige oder alle Zellen Inhalt ein. Gut geeignet sind längere Texte, z.B. Artikel mit eigenem Titel, evtl. auch Grafik. ● Während der Entwicklung werden die Ränder der Zellen angezeigt, z.B. mit dem Attribut border=1 des <table> Elements. ● Zur Anwendung werden die Ränder ausgeblendet, z.B. durch Änderung des Attributs border=0 des <table>-Elements (Hier zur Demonstration mit Mausklick). |
||||||
|
Web-Editor
Die Vorgangsweise, um eine Tabelle abwechselnd sichtbar oder unsichtbar zu machen,
ist leider je nach Web-Editor Programm sehr unterschiedlich.● Markieren sie die Tabelle und versuchen sie, mit Rechtsklick oder mit einem Menü-Befehl die Zellen-Ränder zu ändern. |
● Wenn sie in der Layout-Ansicht ihres Web-Editors keinen Erfolg haben, dann müssen sie die Quelltext-Ansicht (Code, Source-Code, HTML-Code) verwenden. Suchen sie das <table>-Element und ändern sie dessen border-Attribut:
<table border="1" width="100%">
<tr><td>Sichtbare Tabelle</td></tr>
</table><table border="0" width="100%"> <tr><td>Unsichtbare Ränder</td></tr>
</table>
|
||||||
Tabellen-Zeilen und -Spalten |
|
|
●
HTML-Tabellen werden zeilenweise aufgebaut: Jedes <table>-Element enthält beliebig viele Zeilen aus <tr>-Elementen (table row) |
●
Jede Zeile enthält gleich viele Spalten aus <td>-Elementen
(table data). Wenn diese Regel nicht eingehalten wird, dann ist das Ergebnis je nach Browser unterschiedlich, jedenfalls nicht vorhersagbar ! |
|
Einfügen einer neuen Zeile in eine bestehende Tabelle: ● Markieren sie (je nach Web-Editor) die Zeile oder die ganze Tabelle. Versuchen sie, mit Rechtsklick oder mit einem Menü-Befehl eine neue Zeile einzufügen (insert row). ● Wenn das nicht klappt, dann wechseln sie zur Quelltext-Ansicht. • Suchen sie die gewünschte Position und fügen sie eine neue Zeile ein: • Sie besteht aus genau 1 <tr> Element und gleich vielen <td>-Elementen wie alle anderen Zeilen. • Jedes Element besteht aus einer Beginn- und einer Ende-Anweisung. • Jedes <td>-Element muss mindestens 1 (beliebiges) Füll-Zeichen enthalten (hier ein * ). Beispiel:
<tr><td>Zeile</td><td>vorher</td></tr>
<tr><td>*</td><td>*</td></tr>
<tr><td>Zeile</td><td>nachher</td></tr>
|
Löschen einer Zeile:
●
Markieren sie die Zeile und versuchen sie die Lösch-Taste oder einen Menü-Befehl
zum Löschen (delete, remove row)● Wenn das nicht klappt, dann wechseln sie zur Quelltext-Ansicht. • Suchen sie die zu löschende Zeile und löschen sie die gesamte Zeile, beginnend mit <tr> bis zu ihrem Ende </tr> |
|
Einfügen einer neuen Spalte:
●
Markieren sie (je nach Web-Editor) die Spalte oder die ganze Tabelle.
Versuchen sie, mit Rechtsklick oder mit einem Menü-Befehl eine neue Spalte
einzufügen (insert column).● Die Bearbeitung in der Quelltext-Ansicht ist ziemlich aufwändig: Die neue Spalte muss als neues <td>*</td> Element in jede vorhandene Zeile eingetragen werden. Beispiel:
<tr><td>alt</td><td>*</td><td>alt</td></tr>
<tr><td>alt</td><td>*</td><td>alt</td></tr> <tr><td>alt</td><td>*</td><td>alt</td></tr> |
Löschen einer Spalte:
●
Markieren sie die Spalte und versuchen sie die Lösch-Taste oder einen Menü-Befehl
zum Löschen (delete, remove column)● Wenn das nicht klappt, dann wechseln sie zur Quelltext-Ansicht. • Die zu löschende Spalte ( <td>-Element) muss aus jeder einzelnen Zeile (<tr>-Element) gelöscht werden. Achten sie dabei auf die richtige Reihenfolge der <td> Spalten in jeder <tr> Zeile. |
Breite, Höhe und Ausrichtung von Tabellen, Spalten und Zeilen |
|
|
Tabellen-Breite
Die meisten Web-Editoren erzeugen eine neue Tabelle mit dem
Attribut width="100%"Das bedeutet: Die Tabelle nimmt die gesamte zur Verfügung stehende Breite ein. Wenn sich nur eine Tabelle auf einer Webseite befindet, dann wird sie so breit wie das Fenster (abzüglich Rand des Browser-Fensters und der Webseite). ♥ Diese Variante ist sehr empfehlenswert ! Vorteil: Jeder Browser gleicht die Tabelle automatisch an die Fenster-Breite an. Dabei handelt es sich um eine wichtige Eigenschaft von Webseiten: Sie sollen unabhängig von der Größe und Einstellung des Monitors und unabhängig von der Größe des Fensters so gut wie möglich angezeigt werden. Es ist sehr schlechter Stil, die Größe einer Webseite zwangsweise festzulegen - Das führt oft zu Browser-Problemen, mit denen man BesucherInnen verärgert. Fixe Breite
In wenigen Ausnahme-Fällen kann die Breite einer Tabelle fix eingestellt werden.
Die Breite sollte jedoch ca. 600 Pixel oder 21cm keinesfalls überschreiten.Keine Breite
Ohne Angabe eines width-Attributs (oder wenn es gelöscht wird),
wird eine Tabelle mit minimaler Breite erzeugt. Dieses Verhalten ist fast nie
erwünscht und kann je nach Browser unterschiedlich aussehen.
|
Tabellen-Höhe
Die Höhe ergibt sich automatisch aus der Höhe und Anzahl aller in der
Tabelle enthaltenen Zeilen.Normalerweise enthält daher eine Tabelle kein height-Attribut ! ♥ Diese Variante ist sehr empfehlenswert ! Fixe Höhe
In wenigen Ausnahme-Fällen kann die Höhe einer Tabelle manuell vorgegeben werden.Das ist jedoch nicht nur schlechter Stil sondern ergibt je nach Browser teilweise unvorhersehbare Resultate ! Änderung von Breite oder Höhe
Manche Web-Editoren bieten die Möglichkeit, Höhe und/oder Breite einer
markierten Tabelle bzw. von markierten Zeilen und Spalten durch Ziehen mit der Maus
einzustellen.Danach sollten sie das Ergebnis unbedingt im HTML Quelltext kontrollieren ! Am sichersten ist es, nicht die Maus-Funktionen zu verwenden, sondern die Attribute im Quelltext anzugeben. |
|
Spalten-Breite
Ohne besondere Angaben - d.h. ohne width-Attribut - wird die
Spalten-Breite vom Browser automatisch eingestellt.♥ Diese Variante ist für AnfängerInnen empfehlenswert ! Die meisten Browser regeln die Breite der Spalten so, dass die gesamte Tabelle so kompakt wie möglich wird. Das bedeutet: Spalten mit mehr Inhalt werden breiter formatiert als solche mit wenig Inhalt. Relative Breite
Professionelle Tabellen werden meist mit relativer Breite formatiert, d.h. in % der
gesamten Breite der Tabelle. Das garantiert ein ähnliches Aussehen der Tabelle
auch bei unterschiedlicher Größe des Monitors und des Browser-Fensters.Je nach Browser lässt sich diese Variante in den Vorgaben oder bei der Einstellung der Spalten-Breite auswählen. Die Summe der Breite aller Spalten sollte 'ungefähr' 100% ergeben. ● Die Spalten-Breite wird nur in der ersten Zeile eingestellt ! Alle weiteren Zeilen enthalten keine width-Attribute:
<table>
<tr>
</table>
<td width="60%">*</td>
</tr><td width="20%">*</td> <td width="20%">*</td> <!-- weitere Zeilen -->
|
Absolute Breite
Diese Variante ist schwieriger zu kontrollieren und sollte von AnfängerInnen
besser nicht verwendet werden.♣ Tipp: Wenn sie die Breite einer Spalte fix vorgeben, dann sollten sie die Breite der restlichen Spalten nicht festlegen - Sie werden dann automatisch formatiert. ♣ Auf keinen Fall sollten sie die Breiten aller Spalten fix vorgeben: Wenn der zur Verfügung stehende Platz (Fenster-Breite) zu klein ist, um die Tabelle anzuzeigen, dann ist das Verhalten der Browser nicht vorhersagbar ! Beispiel:
<table>
<tr>
</table>
<td width="200">*</td>
</tr>
<td>*</td><td>*</td> <!-- weitere Zeilen -->
Hinweis: Als Einheit werden Bildpunkte (Pixel) angenommen, im Beispiel oben daher 200px für die erste Spalte, der Rest wird automatisch aufgeteilt. Standard-Monitore sind auf eine Auflösung von 72 dpi (Pixel pro Zoll) eingestellt: 100 Pixel entsprechen ca. 3.5 cm Neuere Monitore sind evtl. auf 144 dpi eingestellt, in diesem Fall sind 100 Pixel ca. 1.76 cm |
|
Zeilen-Höhe
Ohne besondere Angaben - d.h. ohne height-Attribut - wird die
Zeilen-Höhe vom Browser automatisch eingestellt.♥ Diese Variante ist für AnfängerInnen empfehlenswert ! Die Höhe aller Zellen einer Zeile ist genau gleich und kann auch manuell nicht unterschiedlich eingestellt werden. In Ausnahme-Fällen kann die Zeilen-Höhe manuell in Bildpunkten (Pixeln) fix eingestellt werden. Dazu wird ein height-Attribut in das <tr>-Element der Zeile eingetragen:
<tr><td>...</td></tr>
♣
Vorsicht - Wenn die vorgegebene Höhe zu klein ist, um die Inhalte der Zellen
dieser Zeile anzuzeigen, dann ist das Verhalten der Browser nicht vorhersagbar !
|
Ausrichtung
Ohne besondere Angaben ist die horizontale Ausrichtung in Tabellen stets links -
wie allgemein üblich.♣ Die Standard vertikale Ausrichtung von Tabellen-Zellen ist jedoch ohne Angaben zentriert ! ● Wenn sie wünschen, dass der Inhalt von Tabellen oben beginnt, dann muss jede einzelne <tr> Zeile mit dem Attribut valign="top" versehen werden:
<tr valign="top"><td>...</td></tr>
Diese Anweisung gilt für alle Zellen der betreffenden Zeile.Das ist mühsam, jedoch mit den Mitteln von HTML nicht zu ändern. Nur die Verwendung von CSS gibt die Möglichkeit, die Ausrichtung einzelner oder aller Tabellen-Zeilen zentral zu steuern. |
|
Die Verwendung von CSS
erlaubt die wesentlich genauere Einstellung von Format und Layout aller HTML-Elemente -
Auch von Tabellen, Zeilen und Spalten. Die Verwendung von CSS wird für fortgeschrittene AnwenderInnen unbedingt empfohlen. |
AnfängerInnen arbeiten zunächst besser ohne CSS: Die Erfahrung zeigt, dass man nur mit HTML zwar weniger professionell aussehende Webseiten erzeugt, diese jedoch wesentlich rascher und sicherer funktionieren. |
Schlechtes Layout mit fixer Breite oder Höhe |
|
|
Dieses Element enthält einen Demo-Text. Er dient nur dazu, die Lesbarkeit zu testen.
Der Text wird mehrmals wiederholt, damit sie den Effekt verschiedener Layout-Maßnahmen
studieren können. Dieses Element enthält einen Demo-Text. Er dient nur dazu,
die Lesbarkeit zu testen.
Dieses Element enthält einen Demo-Text. Er dient nur dazu, die Lesbarkeit zu testen.
Der Text wird mehrmals wiederholt, damit sie den Effekt verschiedener Layout-Maßnahmen
studieren können. Dieses Element enthält einen Demo-Text. Er dient nur dazu,
die Lesbarkeit zu testen.
Dieses Element enthält einen Demo-Text. Er dient nur dazu, die Lesbarkeit zu testen.
Der Text wird mehrmals wiederholt, damit sie den Effekt verschiedener Layout-Maßnahmen
studieren können. Dieses Element enthält einen Demo-Text. Er dient nur dazu,
die Lesbarkeit zu testen.
| |
| Darüber hinaus demonstriert dieses Beispiel auch Probleme, die bei der nachträglichen Änderung von Eigenschaften auftreten können. |
Es ist zwar mit
DOM-Methoden möglich, Höhe und Breite jedes beliebigen Elements einer
Webseite zu ändern, das funktioniert jedoch mit aktuellen Browsern nur in
einfachen Fällen. In Tabellen treten Layout-Fehler auf ! |
Unabsichtliche Fehler:
Die meisten Web-Editoren erlauben es ohne Warnung, die Höhe oder
Breite von Tabellen mit der Maus zu ändern.
Das verursacht unangenehme Layout-Fehler.
|
Solche Fehler werden von den meisten AnfängerInnen unabsichtlich
aber häufig gemacht.
♣
Ziehen sie Tabellen, Zeilen oder Spalten niemals mit gedrückter
Maustaste !
|
||
|
Höhe
Die Höhe (Attribut height) von Tabellen, Zeilen und Spalten
sollte immer automatisch eingestellt werden, d.h. in Tabellen sollte es überhaupt
keine height-Attribute geben !Kontrolle !
Wechseln sie zur Quelltext-(Code)-Ansicht.Suchen sie nach height-Attributen. Löschen sie alle (irrtümlich) eingetragenen Höhen-Vorschriften. ♣ Tipp: In normalen Webseiten sollten height-Attribute ausschließlich in <img> Bildern vorkommen ! |
Dieses schlechte Beispiel kann von einem Browser ohnehin nicht befolgt werden.
Das Aussehen der Tabelle ist daher unvorhersehbar:
<table height="50">
<tr height="100">
</table>
<td height="30">Z1S1</td>
</tr>
Verbessert: ohne height-Attribute:
<table>
<tr><td>Z1S1</td></tr>
</table>
|
||
|
Breite
Die Breite (Attribut width) von Tabellen, Zeilen und Spalten
sollte immer relativ eingestellt werden, d.h. in %♣ Stellen sie die Breite niemals mit der Maus ein, sondern immer digital durch Angabe der %-Zahl (Rechtsklick | Eigenschaften oder im Quelltext). ● Die häufigste Einstellung für eine Tabelle lautet width="100%" - über die gesamte Breite. Ein Monitor-Fenster hat im Gegensatz zu einem Blatt Papier niemals eine bestimmte Breite ! ● Für 2 gleich breite Spalten erhält jede Zelle der ersten Zeile das Attribut width="50%" ● Für 3 gleich breite Spalten erhält jede Zelle der ersten Zeile das Attribut width="33%", usw. |
Breite nur in der 1. Zeile
Nur die Zellen der ersten Zeile dürfen width-Attribute tragen !Wenn die Zellen weiterer Zeilen width-Attribute enthalten, dann sind diese entweder gleich wie in der 1. Zeile und daher überflüssig, oder widersprüchlich und daher nicht ausführbar. ● Löschen sie alle width-Attribute nach der 1. Zeile ! Typisches Beispiel: Tabelle über die gesamte verfügbare Breite, 2 gleich breite Spalten, automatische Einstellung der Höhe:
<table border="1" width="100%">
<tr>
</table>
<td width="50%">Z1S1</td>
</tr><td width="50%">Z1S2</td> <tr><td>Z2S1</td><td>Z2S2</td></tr> <tr><td>Z3S1</td><td>Z3S2</td></tr> |
||
|
Kontrolle:
►
Öffnen sie die gespeicherte Webseite mit einem Browser und kontrollieren sie,
ob das Layout ihrem Wunsch entspricht.► Ändern sie Breite und Höhe des Browser-Fensters. Alle Elemente ihre Webseite sollten sich anpassen, insbesondere alle Tabellen, Zeilen und Spalten. ► Führen sie den Test mit mehreren Browsern durch, z.B. Firefox, M$IE, Opera |
♥ Professionelles Design erkennt man daran, dass sich bei jeder Fenster-Größe ein sauberes Layout ergibt. • Bei besonders kleiner Fenster-Größe kann das Aussehen leiden. Das Layout darf jedoch nicht zusammenbrechen, oder Teile ihrer Webseite unsichtbar werden. • Gutes Layout kommt ohne Zwang (zu bestimmter Höhe oder Breite) aus ! • Nur Pfuscher verwenden solche Hinweise:
|
Verschachtelung: Tabellen in einer Tabelle |
|
|
Zur Erzeugung komplizierter Layouts kann man Tabellen ineinander verschachteln: ● In jeder Zelle einer Tabelle kann man eine weitere Tabelle einfügen. Auf diese Weise gelangt man theoretisch zu beliebig komplizierten Layouts. Es ist weise, diese Methode nicht zu sehr zu strapazieren - Sie sollten die Übersicht über alle verwendeten Tabellen haben. |
Beispiel: Alle Kapitel dieser Seite (und des gesamten Webs) sind als Tabellen angelegt. Die Beispiele ↑ der ersten Kapitel enthalten daher Beispiel-Tabellen in den Zellen anderer Tabellen. |
| Die Grenzen dieser Methode sind u.a. durch die Abstände (Ränder) der einzelnen Elemente gegeben. Diese lassen sich zwar (mit CSS) genau einstellen, der dazu nötige Aufwand ist jedoch für AnfängerInnen viel zu hoch. | Wesentlich eleganter ist die Erstellung komplizierter Layouts durch ↓ Zusammenfassung von Zellen. |
Zusammenfassung von Tabellen-Zellen |
|||||||||||||
|
Zur Erzeugung kompliziert aufgebauter Tabellen (und entsprechender Layouts mit
unsichtbaren Tabellen) kann man mehrere Zellen zusammenfassen. Das Beispiel rechts zeigt eine Tabelle mit 5 Zeilen zu je 3 Spalten = 15 Zellen. Einige Zellen sind zu größeren Einheiten zusammengefasst. ● Die Zellen Z1Sp2 und Z1Sp3 sind zusammengefasst. Dazu wird in die Anfangs-Zelle Z1Sp2 ein colspan-Attribut eingefügt. Das letzte Element dieser Zeile wird ausgelassen bzw. gelöscht:
<tr>
Diese Methode ist empfehlenswert, wenn sie bereits über etwas Erfahrung mit
HTML-Tabellen verfügen.
<td>Z1Sp1</td>
</tr>
<td colspan="2">Z1Sp2</td> |
Beispiel:
An 3 Stellen sind mehrere Zellen zu größeren Einheiten zusammengefasst. |
||||||||||||
|
●
Die Zellen Z2Sp2 und Z3Sp2 sind
zusammengefasst. Dazu wird in Anfangs-Zelle Z2Sp2
ein rowspan-Attribut eingefügt. Das 2. Element der
nächsten Zeile wird ausgelassen bzw. gelöscht:
<tr>
Die Zusammenfassung von untereinander liegenden Zellen ist wesentlich schwieriger als
die von nebeneinander liegenden Zellen (1. Zeile). Dazu sollten sie über gute
Erfahrung mit HTML-Tabellen verfügen.
<td>Z2Sp1</td>
</tr><td rowspan="2">Z2Sp2</td> <td>Z2Sp3</td> <tr>
<td>Z3Sp1</td>
</tr>
<td>Z3Sp3</td> |
●
Die Zellen Z4Sp1, Z4Sp2, Z5Sp1, Z5Sp2 sind zusammengefasst.
Dazu werden in die Anfangs-Zelle colspan- und rowspan-Attribute eingefügt:
<tr>
Es erfordert genaue Überlegung, die richtigen Zellen zusammenzufassen und genau
die überflüssigen Zellen zu löschen.
<td colspan="2" rowspan="2">Z4Sp1</td>
</tr><td>Z4Sp3</td> <tr>
<td>Z5Sp3</td>
</tr>
♣ Tipp: Planen sie solche Tabellen am besten mit Hilfe einer kleinen Zeichnung. |
||||||||||||
|
Mit dieser Methode sind auch sehr komplizierte Tabellen exakt herstellbar.
Die Unterstützung durch Web-Editoren ist sehr unterschiedlich -
Meist müssen sie im HTML Quelltext nachhelfen. Die Zusammenfassung kann auch mehr als 2 Zellen umfassen, z.B. mit colspan="5" |
Beispiel einer einfach aussehenden Tabelle:
|
||||||||||||
Rahmen (frames) |
|
|
Eine alternative Methode zur Gestaltung von Layouts sind Rahmen: Wechsel-Rahmen (frames) sind HTML-Elemente, deren Verständnis für AnfängerInnen etwas kompliziert ist: • Man teilt eine Webseite in 2 oder mehr Wechsel-Rahmen. • Der Inhalt jedes Rahmens lässt sich unabhängig von den anderen Rahmen austauschen. Demo in einem eigenen Fenster |
Rahmen-Beispiel: |
|
Die Ergebnisse dieser Methode sehen ähnlich aus wie bei Anwendung unsichtbarer Tabellen.
Aus einem unbekannten Grund gelten HTML-Rahmen bei AnfängerInnen als besonders schick. Die meisten Profis vertreten die umgekehrte Ansicht: Es ist eine Tatsache, dass viele der von wenig geübten EntwicklerInnen hergestellten Rahmen fehlerhaft arbeiten oder abscheuliche Ansichten ergeben. ♣ Tipp: Rahmen sind durchaus brauchbar, wenn sie sparsam und mit Fachkenntnis eingesetzt werden. AnfängerInnen können selbstverständlich ebenfalls Rahmen herstellen. Es ist jedoch weise, sie nicht für 'echte' Internet Anwendungen einzusetzen: Unsichtbare Tabellen sind einfacher, schneller und sicherer. |
Beispiel: Dieses Web ist mit Hilfe von 2 Rahmen ausfgebaut: • Ganz links der Navigations-Rahmen, der eine schmale Webseite mit fixer Breite enthält. • Rechts (hier) ein Rahmen variabler Breite zur Anzeige der Inhalte - auch dieser Webseite. ♦ Details zur Programmierung von Rahmen |
