Passepartout

[rernanded]

Hallo,
ich habe mir ein Passepartout "gebaut". Leider verstehe ich nicht wie ich nun am besten das img(s.u.) in die Mitte kriege. Ausserdem verstehe ich nicht warum das Bild nach rechts "zieht" wenn ich <img ... top="200%" ...> eingebe.
Vllt. gibts ja auch eine bessere/andere Lösung?

MONI

<table align="center" bgcolor="cccccc" border="0" cellpadding="0" cellspacing="0" style="opacity:0.6; z-index:2; position:absolute; top:0%; left:0%;" width="100%" height="20%">
<tr>
<td>
<!-- obere Deckfläche -->
</td>
</tr>
</table>

<table align="center" bgcolor="cccccc" border="0" cellpadding="0" cellspacing="0" style="opacity:0.6; z-index:2; position:absolute; top:0%; left:0%;" width="20%" height="100%">
<tr>
<td>
<!-- linke Deckfläche -->
</td>
</tr>
</table>

<table align="center" bgcolor="cccccc" border="0" cellpadding="0" cellspacing="0" style="opacity:0.6; z-index:2; position:absolute; top:0%; left:80%;" width="20%" height="100%">
<tr>
<td>
<!-- rechte Deckfläche -->
</td>
</tr>
</table>

<table align="center" bgcolor="cccccc" border="0" cellpadding="0" cellspacing="0" style="opacity:0.6; z-index:2; position:absolute; top:80%; left:0%;" width="100%" height="20%">
<tr>
<td>
<!-- untere Deckfläche -->
</td>
</tr>
</table>



<table border="0" style="z-index:1;" align="center" style="vertical-align:middle;">
<tr>
<td align="center" style="vertical-align:middle;">
<img src="bestkids.jpg" border="0" alt="bestkids.jpg" width="200%" height="auto">
</td>
</tr>
</table>

 

[ikosaeder]

Tabelle zur Layoutgestaltung sind schon seit ein paar Jahren verpönt.
Besser sind Lösungen, die auf CSS basieren.
Es ist möglich, Bilder in einem Div-Container anzuzeigen und den Rand dieses Containers als Rahmen zu verwenden.
Eine andere einfache Variante:
http://www.webmaster-homepage.de

Mit modernen CSS und HTML-Varianten kann man auch direkt den Rahmen eines Bildes formatiern:
Ein Beispiel für Rahmen mit CSS findest du zum Beispiel hier.
http://www.dynamicdrive.com/style/csslibrary/item/image_frames_using_css3_border_image/