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
-
-
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
Thunderbolt 4 vs. OCuLink: Přišel čas na upgrade?
27. května 2024
Nejnovější
-
Zoner Photo Studio X se mění na Zoner Studio
13. června 2025 -
Co je to transformer v umělé inteligenci (AI)
10. června 2025 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
20 let Ubuntu: Cesta od revoluce k digitální každodennosti
30. května 2025