nicht angemeldet
Hallo,
Folgendes sei gegeben:
Ich nehme an, das folgende Aussehen willst Du erreichen (Rahmen sind nur zur Veranschaulichung):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit UL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table, td {border:1px solid black;}
td {padding:5px;}
-->
</style>
</head>
<body>
<table>
<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
<tr><td colspan="3">Spalte 1 und 2 und 3</td></tr>
<tr><td>Spalte1 länger</td><td>Sp2</td><td>Spalte3 länger</td></tr>
<tr><td colspan="2">Spalte 1 und 2</td><td>Spalte3</td></tr>
</table>
</body>
</html>
Das versuchst Du so ähnlich umzusetzen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit UL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul, li, span {border:1px solid black;}
ul {display:table; margin:0; padding:0; list-style-type:none;}
li {display:table-row;}
span {display:table-cell; padding:5px;}
-->
</style>
</head>
<body>
<ul>
<li><span>Spalte1</span><span>Spalte2</span><span>Spalte3</span></li>
<li><span>Spalte 1 und 2 und 3</span></li>
<li><span>Spalte1 länger</span><span>Sp2</span><span>Spalte3 länger</span></li>
<li><span>Spalte 1 und 2</span><span>Spalte3</span></li>
</ul>
</body>
</html>
Nun ist klar, dass das Aussehen des zweiten Codes sich nicht ohne colspan-ähnliche Darstellungen an das des ersten Codes angleichen lässt. Colspan ist aber in CSS derzeit nicht vorgesehen. Man kann darüber streiten, ob das richtig oder falsch ist. Meine Meinung ist, was wie eine Tabelle aussehen soll, kann auch eine Tabelle sein.
Folgendes wäre ohne Tabelle möglich (Grundgerüst wie oben):
<ul style="position:relative;">
<li><span>Spalte1</span><span>Spalte2</span><span>Spalte3</span></li>
<li><span style="position:absolute; white-space:nowrap;">Spalte 1 und 2 und 3</span><span> </span></li>
<li><span>Spalte1 länger</span><span>Sp2</span><span>Spalte3 länger</span></li>
</ul>
Die letze Tabellenzeile wirst Du aber nicht ohne Tabelle darstellen können.
[1] Genauer: Ich behelfe mich derzeit mit display:table-caption,
Das wage ich zu bezweifeln. Captions sind entwerder oberhalb oder unterhalb der _gesamten_ Tabelle. Wie willst Du damit das angeführte Aussehen abbilden?
viele Grüße
Axel