Netabulková data naformátovaná jako tabulka
Toto řešení ukazuje, jak můžeme netabulková data přinutit, aby se formátovala jako klasické tabulky. Může se například stát, že od někoho dostaneme hotový HTML dokument, který nemůžeme z nějakého důvodu měnit a přesto chceme některé části textu přinutit chování, na které jsme u tabulek zvyklí.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Riki Fridrich. Bližší popis najdete v článku Tabulka pomocou CSS.
CSS
.tabulka
{
border: solid black 2px;
min-width: 1px;
_width: 1px; /* IE */
width: 100%;
}
.radek
{
clear: left;
}
.bunka
{
float: left;
border: solid #333 1px;
width: 33.333%;
p adding: .2em .5em;
margin: -1px;
}
.hlavicka
{
font-weight: bold;
}
.cl
{
clear: both;
}
.matrjoska
{
padding: .2em .5em;
}
XHTML
<html>
<body>
<div class=“tabulka“>
<div class=“radek“>
<div class=“bunka hlavicka“><div class=“matrjoska“>Lorem</div></div>
<div class=“bunka hlavicka“><div class=“matrjoska“>Ipsum</div></div>
<div class=“bunka hlavicka“><div class=“matrjoska“>Dolor</div></div>
</div>
<div class=“radek“>
<div class=“bunka“><div class=“matrjoska“>sit</div></div>
<div class=“bunka“><div class=“matrjoska“>amet</div></div>
<div class=“bunka“><div class=“matrjoska“>consetetur</div></div>
</div>
<div class=“radek“>
<div class=“bunka“><div class=“matrjoska“>sadipscing</div></div>
<div class=“bunka“><div class=“matrjoska“>elitr</div></div>
<div class=“bunka“><div class=“matrjoska“>sed</div></div>
</div>
<div class=“cl“></div>
</div>
</body>
</html>
