StarHTML  Weiteres Blinde Tabellen
Blinde Tabellen
 Die Nützlichkeit der blinden Tabellen
Blinde Tabellen, gemeint sind damit Tabellen ohne sichtbare Rand- und Gitternetzlinien, spielen bei der
Internetseitengestaltung eine große Rolle. Sie ermöglichen es, Objekte nahezu frei auf einer Website zu
positionieren.
Außerdem können Sie damit die Ausdehnung von Text begrenzen, blinde Tabellen eignen sich also auch sehr gut für
Spaltentext.
Achtung: Der Inhalt einer Tabelle wird erst im Browser angezeigt, wenn der gesamte Inhalt
der Tabelle geladen wurde! Wenn Sie die gesamte Seite in eine Tabelle setzen möchten, bedeutet das, dass ein Besucher der
Seite länger warten muss, um überhaupt etwas zu sehen!
Einfügen einer blinden Tabelle
Das Erstellen einer Tabelle wurde bereits beschrieben. Zu beachten ist dabei bei
blinden Tabellen:
- Zunächst innerhalb des Tabellen-Tags <table> die Option border angeben.
<table border>
...Tabelleninhalt...
</table>
|
z.B. |
| Tabellen | inhalt |
| Tabellen | inhalt |
|
- Nun können Sie die Tabelle nach Ihren Wünschen bearbeiten und formatieren. Dabei sind die Rahmen sichtbar.
- Am Schluss die Option border wieder aus dem Tabellen-Tag <table> entfernen,
dadurch werden die Ränder unsichtbar.
<table>
...Tabelleninhalt...
</table>
|
z.B. |
| Tabellen | inhalt |
| Tabellen | inhalt |
|
Beispiel: Seitenränder
Mit Hilfe von blinden Tabellen lassen sich Seitenränder festlegen. Dafür wird eine Tabelle angelegt und zentriert. Das
erzeugt eine Spalte in der Seitenmitte. Mit der Breitenangabe für die Tabelle können Sie die Breite der Spalte
angeben.
Bei StarHTML beispielsweise werden alle Seiten in einer zentrierten Tabelle mit einer Breite von 613 Pixeln
angezeigt. Dadurch werden alle Inhalte auf die nutzbare Breite eines 14-Zoll-Monitors begrenzt.
<div align=center>
<table width=613><tr><td>
...Tabelleninhalt...
</table>
</div> |
Sie können auch eine Prozentangabe verwenden, dann wird immer der festgelegte Anteil der verfügbaren Breite als
Spaltenbreite genutzt, das dient lediglich dem guten Layout. Wenn Sie jedoch, wie im Beispiel, eine exakte Pixelangabe
verwenden, können Sie sichergehen, das der Text unter jeder Auflösung gleich formatiert wird.
Beachten Sie bitte, dass bei Tabellen in dieser Tabelle die Tags zum Beenden von Zellen und Zeilen
</td> bzw. </tr> verwendet werden müssen!
Beispiel: Mehrspaltigkeit
Sie müssen sich nicht auf eine Spalte Text beschränken. Sie können Ihren Text im Zeitungsstil gestalten:
<table cellpadding=5>
<tr valign=top>
<td width=33%>
...Text der 1. Spalte...
</td>
<td width=33%>
...Text der 2. Spalte...
</td>
<td width=34%>
...Text der 3. Spalte...
</td>
</tr>
</table>
|
1. Spalte:
Das ist ein Beispiel eines 3-spaltigen Textes. Damit zwischen den Spalten etwas Raum ist, ist
der Tabelleninhalt überall 5 Pixel vom Rand entfernt. |
2. Spalte:
Alle Zellen sind gleich breit (Prozentangabe). Die Zellenbreite wird automatisch an zu große
Bilder angepasst. Da nicht in allen Zellen gleich viel Text steht, wird dieser nach oben ausgerichtet. |
3. Spalte:
Wieviel Spalten Sie einsetzen, spielt keine Rolle. Machen Sie mehrspaltigen Text nicht zu lang,
sonst müssen Ihre Besucher dauernd scrollen. |
|
Beispiel: Farbflächen
Mit Hilfe einer Hintergrundfarbe in einer blinden Tabelle können Sie eine Farbfläche erzeugen, ohne das diese gleich wie eine Tabelle
wirkt. Alle Beispiele in StarHTML sind auf diese Weise hervorgehoben.
<table bgcolor=navy cellpadding=10>
<tr>
<td>
<font color=#ffffff
face="Arial" size=2>
...Inhalt...
</font>
</td>
</tr>
</table> |
Beispiel
Wie Sie sehen, können Sie damit Text ganz leicht hervorheben. Natürlich können Sie auch Bilder, Verweise usw. einfügen.
Sie können auch die Größe der Tabelle begrenzen oder die gesamte Tabelle zentrieren. Es gibt zahlreiche
Einsatzmöglichkeiten. |
|
Tipp: Wenn Sie mehrere nebeneinanderliegende Tabellenzellen farbig hinterlegen, sehen Sie zwischen den
Zellen noch den Hintergrund der Seite. Mit cellspacing=0 im Tabellen-Tag entfernen Sie diese Gitternetzlinien.
Beispiel: Text und Bilder positionieren
Durch blinde Tabellen wird es möglich, Text und Bilder exakt nebeneinander zu positionieren.
<table width=500 cellpadding=10>
<tr align=center>
<td><h3>Überschrift</h3>
<img src="bild1.gif" width=70 height=76>
<td><h3>Überschrift</h3>
<img src="bild2.gif" width=70 height=76>
</tr>
<tr align=center valign=top>
<td>Beschreibungstext</td>
<td>Beschreibungstext</td>
</tr>
</table> |
aqua |
navy |
| Beschreibung: eine helles Blau. |
Beschreibung: ein dunkles Blau. |
| | |
<table cellpadding=5>
<tr>
<td valign=top>
<img src="bild1.gif">
</td>
<td>
Beschreibungstext
</td>
</tr>
</table> |
|
Beschreibungstext: dieser Text kann beliebig lang sein, er steht immer rechts vom Bild.
|
|
| 
