Etwa dieses Prinzip:
+-------+
| |
| |
+-------+
+ = Eckgrafik
- = Hintergrund horizontal (Header / Footer)
| = Hintergrund vertikal (Seitenraender)
Konkret in einem Beispiel:
<html>
<head>
<title>Header / Footer</title>
<style type="text/css">
<!--
table { background: none; border-collapse: collapse; }
table, td, th { border: none; }
.header { background-image:url(gheader.png); background-position: center;
background-repeat: repeat-x; }
.footer { background-image:url(gfooter.png); background-position: center;
background-repeat: repeat-x; }
.side { background-image:url(gside.png); background-position: center;
background-repeat: repeat-y; }
//-->
</style>
</head>
<body>
<table>
<tr>
<th><img src="gedgetl.png" alt=""></th>
<th class="header" colspan="2"><center>Überschrift</center></th>
<th><img src="gedgetr.png" alt=""></th>
</tr>
<tr>
<td class="side" rowspan="3"> </td>
<td>Zeile eins, Position eins</td>
<td>Zeile eins, Position zwei</td>
<td class="side" rowspan="3"> </td>
</tr>
<tr>
<td>Zeile zwei, Position eins</td>
<td>Zeile zwei, Position zwei</td>
</tr>
<tr>
<td>Zeile drei, Position eins</td>
<td>Zeile drei, Position zwei</td>
</tr>
<tr>
<td><img src="gedgebl.png" alt=""></td>
<td class="footer" colspan="2"> </td>
<td><img src="gedgebr.png" alt=""></td>
</tr>
</table>
</body>
</html>
