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>
Mohlo by vás také zajímat
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024 -
-
Fandíme českým sportovcům a rozdáváme hosting ZDARMA!
26. července 2024
Nejnovější
-
-
LAMP VPS: Rychlé a efektivní nasazení webových aplikací
6. února 2025 -
OpenAI zpřístupnilo ChatGPT Search všem uživatelům
6. února 2025 -