HTML Tabellen Tipps Trick Internet WebDesign WebHosting WebSpace HomePage PageRankVerbesserung Seitenoptimierung MetaTags

In FrontPage und Webseiten in Word können wir einige Dinge nicht so einfach machen, wie wir es vom *normalen* Word gewöhnt sind, zB können wir keine Bilder einfügen und beliebig verschieben - hier müssen wir uns zwecks Positionierung oft mit Tabellen behelfen.

Wichtig ist, dass wir uns immer genau überlegen, ob wir eine fixe Breite und Höhe der Zellen und auch der gesamten Tabelle angeben - und auch, ob wir dies in Pixel oder Prozent machen

<table border="1" width="100%">	</table>	Tabelle über die gesamte Breite des Bildschirms mit einem schmalen Rahmen (diese Tabelle)
<table border="0" width="74%">	</table>	Tabelle über 74 % der Bildschirmbreite ohne Rahmen - oben für Seitencode
<tr>	</tr>	Tabellenzeile
<td>	</td>	Tabellenzelle
<div align="center">	</div>	Tabelle zentrieren

Wenn wir nachträglich Spalten einfügen werden die festgelegten Breiten nicht automatisch angepasst, d.h. die einzelnen Spaltenbreiten müssen händisch nachkorrigiert werden sonst kann es zu Problemen mit der Textanzeige kommen.

Wenn wir einen Text vor einem Foto haben wollen, können wir dies,
indem wir eine Tabelle oder eine Zelle in der exakten Größe des Fotos machen
(finden wir im Bildbearbeitungsprogramm unter Datei/Seite einrichten oder Bild/Seitengröße oder ähnlichem)
dann für diese Zelle *oder auch die ganze Tabelle* als Hintergrundbild unser Foto auswählen
und dann in die Zelle den Text schreiben, z.B.:

Dies ist Text
der über einem
Foto liegt

Der entsprechende html-code:

<div align="center">
<center>
<table border="0" width="214" height="235">
<tr>
<td width="100%" background="logo-db-mittel.gif">
<p align="center"><font color="#FF0000"><b><span style="background-color: #000000">Dies ist Text<br>
der über einem<br>
Foto liegt</span></b></font></td>
</tr>
</table>
</center>
</div>

Ein weiteres Beispiel wäre ein Text zwischen zwei Grafiken - auch hierzu verwenden wir eine Tabelle - diesmal mit drei Spalten, wobei die erste und letzte händisch verkleinert wird (ev. gleich direkt im html-code) die mittlere Spalte wird verbreitert:

Der entsprechende Code nachdem ich die Blumen und den Text xxxxxxx eingefügt habe:

<table border="0" width="100%">
<tr>
<td width="29%" align="center"> <img border="0" src="blume2.gif" width="262" height="400"></td>
<td width="42%" align="center">
<p>
xxxxxxx
</p>
<p align="center"><font color="#008000">Diesmal händisch korrigiert auf:</font></p>
<p>
xxxxxxx
</td>
<td width="29%" align="center"><img border="0" src="blume.gif" width="262" height="400"> </td>
</tr>
</table>