carieleido
New member
Viele Webseiten und Webmaster nutzen immer noch das veraltete Table-Tag. Es sollte darauf aufmerksam gemacht werden, dass alle aktuellen Browser (und dazu gehört der IE7 nicht) die neuen CSS3-Tags unterstützen. Für alle, die "Display Table" noch nicht kennen oder Probleme damit haben: Hier ist eine Vorlage für eine CSS3 Tabelle mit Display Table und Table-Cell.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>HTML Div-Table</title>
<style type="text/css">
body{
margin:8px;
padding:0px;
}
.bold{font-weight:bold;}
.cell1, .cell2{
display:table-cell;
border-color:#000000;
border-style:solid;
padding:15px;
width:33%;
}
.cell1{border-width:0px 1px 1px 1px;}
.cell2{border-width:0px 1px 1px 0px;}
.row{
display:table-row;
width:100%;
}
.table{
border-color:#000000;
border-style:solid;
border-width:1px 0px 0px 0px;
display:table;
width:100%;
}
</style>
</head><body>
<div class="table"><div class="row">
<div class="cell1">
<a class="bold">Thema 1.1</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
<div class="cell2">
<a class="bold">Thema 2.1</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
<div class="cell2">
<a class="bold">Thema 3.1</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
</div><div class="row">
<div class="cell1">
<a class="bold">Thema 1.2</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
<div class="cell2">
<a class="bold">Thema 2.2</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
<div class="cell2">
<a class="bold">Thema 3.2</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
</div><div class="row">
<div class="cell1">
<a class="bold">Thema 1.3</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
<div class="cell2">
<a class="bold">Thema 2.3</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
<div class="cell2">
<a class="bold">Thema 3.3</a><br><br>
Zeile 1: Dies ist der erste Inhalt<br>
Zeile 2: Hier kommt ein ganz anderer Inhalt<br>
</div>
</div></div>
</body></html>
!