Netabulková data naformátovaná jako tabulka

16. ledna 2005

•

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>