nicht angemeldet
Hallo!
Habe mir mal die Beiträge zum Thema 'Layouttabelle zugunsten "reinem" CSS wegfallen lassen' durchgelesen. Wenn ich ehrlich bin, weiß ich aber in meinem konkreten Fall trotzdem nicht, ob das sinnvoll wäre. Die Layouttabelle ist sehr einfach, die Struktur seht Ihr oben in dem angegeben Code.
Was meint Ihr: Bekomme ich das einfach hin, auf die Tabelle zu verzichten, so dass das Ganze halbwegs ähnlich aussieht? (Wenn ja, würde ich mich über kleine Tipps freuen.)
Schon mal vielen Dank.
<html> <head>
<style type="text/css"> <!-- /*
|-----|---------|---------|-----| | 1 | 2 | 3 | 4 | |-----|---------|---------|-----| | | | | | 5 | | 7 | | | | | |-----| |-----| | 8 | 6 | 9 | |-----| |-----| | | | | | 10 | | 11 | | | | | |-----|---------|---------|-----| | 12 | 13 | 14 | 15 | |-----|---------|---------|-----|
*/ -->
body { background-color:#ffffff; color:#000000; }
.layoutTable { border:none; margin-top:2%; margin-left:2%; width:95%; }
.eins { width:140px; border-right-width:2px; border-right-color:#ff0000; border-right-style:solid; border-bottom-width:2px; border-bottom-color:#ff0000; border-bottom-style:solid; }
.zwei { font-size:135%; font-weight:bold; padding:15px; text-align:center; vertical-align:middle; border-bottom-width:2px; border-bottom-color:#ff0000; border-bottom-style:solid; }
.drei { border-bottom-width:2px; border-bottom-color:#ff0000; border-bottom-style:solid; }
.vier { width:140px; }
.fuenf { vertical-align:top; padding-top:8px; border-right-width:2px; border-right-color:#ff0000; border-right-style:solid; }
.sechs { text-align:justify; vertical-align:top; padding:30px; }
.sieben { padding-top:8px; padding-bottom:8px; }
.acht { border-right-width:2px; border-right-color:#ff0000; border-right-style:solid; }
.neun { border-left-width:2px; border-left-color:#ff0000; border-left-style:solid; }
.zehn { }
.elf{ border-left-width:2px; border-left-color:#ff0000; border-left-style:solid; }
.zwoelf { }
.dreizehn { border-top-width:2px; border-top-color:#ff0000; border-top-style:solid; }
.vierzehn{ padding:15px; border-top-width:2px; border-top-color:#ff0000; border-top-style:solid; }
.fuenfzehn{ border-left-width:2px; border-left-color:#ff0000; border-left-style:solid; border-top-width:2px; border-top-color:#ff0000; border-top-style:solid; }
</style>
<title>Titel</title> </head>
<body>
<table cellpadding="0" cellspacing="0" class="layoutTable"> <tbody> <tr> <td class="eins"> </td> <td class="zwei">Überschrift</td> <td class="drei"> </td> <td class="vier"> </td> </tr> <tr> <td class="fuenf"> <div><a href="xy.html">Ein Link</a></div> <div><a href="xy.html">Noch ein Link</a></div> <div><a href="xy.html">Link-Link-Link-Link</a></div> </td> <td rowspan="3" colspan="2" class="sechs">
asdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asd asdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asdasdasdasd adasdasd gsfdgsdf dasfsad dasdasdasd asd asd asd asd asd asd asd
</td> <td class="sieben"> </td> </tr> <tr> <td class="acht"> </td> <td class="neun"> </td> </tr> <tr> <td class="zehn"> </td> <td class="elf"> </td> </tr> <tr> <td class="zwoelf"> </td> <td class="dreizehn"> </td> <td class="vierzehn">bla blabla blabla blabla bla</td> <td class="fuenfzehn"> </td> </tr> </tbody> </table> </body> </html>