SELFHTML/Quickbar
HTML
Tabellen SELFHTML/Quickbar
HTML
Tabellen
 |
Tips zum Umgang mit blinden Tabellen |
|
|
 | |
Wenn Sie bei WWW-Seiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente stoßen, wurde in vielen Fällen mit der Technik der "blinden Tabellen" gearbeitet. Blinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, daß es sich in Wirklichkeit um eine 
Tabelle handelt.
Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer WWW-Seite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden vom WWW-Browser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in dem Augenblick, wo der WWW-Browser genau weiß, wie groß und wie breit die Tabelle angezeigt werden muß. Das bedeutet bei der Datenübertragung aus dem WWW, daß ein Anwender am Bildschirm länger wartet, bis überhaupt etwas angezeigt wird. Es sei denn, Sie benutzen den Befehl, um Spalten vorzudefinieren.
Einige Aufgaben, für die mit herkömmlichem HTML blinde Tabellen erforderlich waren, lassen sich mittlerweile auch mit Hilfe von 
CSS Style-Sheets lösen. Das gilt beispielsweise für Abstände und Ränder, für die Hintergrundgestaltung einzelner Bereiche oder für das Positionieren von Elementen.
|
Mehrspaltigkeit
Anzeigebeispiel: So sieht's aus
Tabellen dienen nicht nur dazu, um tabellarische Information anzuzeigen. In HTML wie in anderen textverarbeitenden Systemen dienen Tabellen auch dazu, um einen "Mehrspaltensatz" am Bildschirm zu erzwingen.
Mit Hilfe etwa einer dreispaltigen blinden Tabelle können Sie einen attraktiv aussehenden 3spaltigen Textsatz im Stil einer Zeitung realisieren.
<table cellpadding=5>
<tr valign=top>
<td width=33%>
Hier folgt der Text von Spalte 1
</td>
<td width=33%>
Hier folgt der Text von Spalte 2
</td>
<td width=34%>
Hier folgt der Text von Spalte 3
</td>
</tr>
</table>
|
In diesem Beispiel werden drei Spalten definiert, deren Breiten mit den Angaben width= 33%, 33% und 34% (= 100%) definiert werden. Innerhalb jeder der 3 Spalten können beliebige Elemente stehen. Grafiken, die zu breit sind, sprengen allerdings die erzwungenen Spaltenbreiten.
(siehe auch Breite von Spalten erzwingen)
Da die Inhalte der Spalten unterschiedlich lang sein können, wird mit valign=top im einleitenden Tag der Zeile (<tr>) erreicht, daß alle Inhalte obenbündig ausgerichtet werden.
(siehe auch Ausrichtung oben, mittig und unten)
Achten Sie darauf, daß die Inhalte aller definierten Spalten ungefähr gleich lang sind und möglichst nicht mehr Inhalt enthalten, als ein Bildschirm bei 640 x 480 Pixeln Auflösung anzeigen kann. Denn sonst muß der Anwender dauernd scrollen. Falls Sie mehr Information unterbringen wollen, sollten Sie danach einfach eine neue Tabellenzeile mit den nächsten drei Zellen notieren. Falls Sie Zwischenüberschriften oder Trennlinien notieren wollen, die sich über alle drei Spalten erstrecken sollen, müssen Sie dafür ebenfalls eine eigene neue Tabellenzeile notieren. Statt drei Zellen notieren Sie dabei aber nur eine und erstrecken Sie mit der Zusatzangabe colspan=3 über alle drei Spalten.
(siehe auch Zellen in einer Zeile spaltenweise verbinden)
Zur Realisierung von Mehrspaltigkeit in HTML gibt es neben der Möglichkeit blinder Tabellen auch noch eine direkte Möglichkeit für mehrspaltigen Textfluß, die aber nur von Netscape seit V3.0 interpretiert wird.
Daneben gibt es auch eine offizielle und standardisierte Variante, nämlich Style-Sheet-Angaben zu mehrspaltigem Textfluß. Diese Angaben werden jedoch von Netscape und dem MS Internet Explorer auch in den 4er-Versionen noch nicht interpretiert.
|
|
Text und Grafik Anzeigebeispiel: So sieht's aus
Mit Hilfe von blinden Tabellen können Sie mehrere Grafiken sauber nebeneinander plazieren und haben die Möglichkeit, darüber und darunter ebenso sauber Text zu plazieren.
<table width=500 cellpadding=10>
<tr align=center>
<td><h3>Überschrift</h3><img src="grafik1.gif" width=70 height=76 border=0>
<td><h3>Überschrift</h3><img src="grafik2.gif" width=66 height=76 border=0>
<td><h3>Überschrift</h3><img src="grafik3.gif" width=81 height=76 border=0>
</tr>
<tr align=center valign=top>
<td><Beschreibungstext>
<td><Beschreibungstext>
<td><Beschreibungstext>
</tr>
</table>
|
In diesem Beispiel werden drei Spalten definiert. In der ersten Zeile sollen 3 Überschriften mit 3 dazugehörigen Grafiken unterhalb stehen, in der zweiten Zeile 3 passende Beschreibungstexte, wiederum unterhalb der jeweiligen Grafiken. Mit der Angabe width=500 wird eine Gesamtbreite der Tabelle erzwungen. Die Breite ist in Abstimmung mit der Summe der Breite aller Grafiken und dem Textumfang so gewählt, daß es optisch ordentlich aussieht.
(siehe auch Höhe und Breite der gesamten Tabelle erzwingen).
Durch die Angabe cellpadding=10 wird sichergestellt, daß sich die Zelleninhalte bei größerem Inhalt nicht zu nahe kommen.
(siehe auch Randabstand von Zelleninhalt zum Zellenrand).
Mit <tr align=center> werden alle Zellen der jeweiligen Zeile zentriert ausgerichtet. Da die Beschriebungstexte unterschiedlich lang sein können, wird mit der Angabe valign=top erreicht, daß sie alle obenbündig ausgerichtet werden,
(siehe auch Ausrichtung horizontal und Ausrichtung vertikal).
Überschriften und Grafiken sind im obigen Beispiel zwar unmittelbar nebeneinander notiert. Da Überschriften aber einen eigenen Absatz erzeugen, wird die dahinterstehende Grafik bei der Anzeige unterhalb der Überschrift plaziert. Da der Zellinhalt zentriert ausgerichtet wird, steht die Überschrift sauber zentriert über der jeweiligen Grafik.
(siehe auch Überschriften und Grafiken einbinden).
|
|
Seitenränder erzwingen Anzeigebeispiel: So sieht's aus
<div align=center>
<table width=70%>
<tr>
<td>
Hier folgt der eigentliche Inhalt
</td>
</tr>
</table>
</div>
|
In diesem Beispiel wird zunächst mit <div align=center> ein zentriert ausgerichteter Bereich definiert.
(siehe auch Bereich mit mehreren Elementen definieren).
Zwischen dem Tag und seinem Gegenstück </div> wird eine Tabelle definiert, die nur eine Zeile mit einer Zelle enthält. In dieser Zelle steht der gesamte Inhalt, der mit Seitenrändern versehen wird. Die Seitenränder selbst werden erreicht durch die Angabe width=70% im einleitenden Tabellen-Tag. Da die Tabelle selbst zentriert ausgerichtet wird, entsteht so links und rechts je ein Seitenrand von 15%.
(siehe auch Höhe und Breite der gesamten Tabelle erzwingen).
Mittlerweile können Sie sich solche Wünsche auch mit Hilfe von CSS Style-Sheets erfüllen. Geeignet dazu sind die Style-Sheet-Angaben zu Abständen, Rändern und Ausrichtung.
|
|
Farbflächen Anzeigebeispiel: So sieht's aus
Mit blinden und zugleich farbigen Tabellen können Sie einzelne Flächen farbig hinterlegen, ohne daß dies wie eine Tabelle wirkt. Sämtliche Beispiele in diesem Dokument, auch das folgende, basieren auf dieser Technik.
<table bgcolor=#000066 cellpadding=20>
<tr>
<td>
<div color=#FFFFFF>Hier folgt der Inhalt - weiß auf dunkelblauem Grund</font>
</td>
</tr>
</table>
|
In diesem Beispiel wird eine Tabelle mit einer einzigen Zelle definiert. Durch die Angabe bgcolor=#000066 wird der Tabelle ein dunkelblauer Hintergrund zugewiesen. Damit die Fläche den Text großzügig einrahmt, wird mit cellpadding=20 ein Randabstand definiert. Um den Text in der Zelle von dem dunklen Hintergrund abzuheben, wird mit <font color=#FFFFFF> eine kontrastierende Textfarbe (weiß) definiert.
(siehe auch Farbige Tabellen, Randabstand von Zelleninhalt zum Zellenrand und Schriftfarben).
Mittlerweile können Sie sich solche Wünsche auch mit Hilfe von CSS Style-Sheets erfüllen. So können Sie beispielsweise einen Bereich mit <div>...</div> definieren und im einleitenden <div>-Tag Style-Angaben notieren. Geeignet sind die Style-Sheet-Angaben zur Hintergrundfarbe, zur Textfarbe und zum Innenabstand.
|
| |
weiter: |
Tabellen und nicht-visuelle Medien
|
zurück: |
Tabellenbeschriftung und Tabellenausrichtung
|
