Netabulková data naformátovaná jako tabulka
16. 01. 2005 | Miroslav Kučera | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Malware: android pod palbou, mobily v ohrožení?
- Pozvánka na Microsoft TechDays 2012
- Reklamní slepota: co to je a jak s ní bojovat?
- Pět důvodů, proč vybrat redakční systém Drupal
- Čeština pro WordPress 3.3.1 k dispozici
Tematicky související články
- Tabulka se skrolováním
- Tabulka s posuvníkem a pružnou šířkou
- CSS font
- Třísloupcový fluidní layout
- Nadpis s obrázkem jako odrážkou a podtržením
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
