tvorba www stránek
tvorba internetových obchodů
programování a vývoj internetových řešení
Kontaktní informace
+420 604 675 156

Tabulka v CSS aneb alternativa tagu TABLE pomocí DIV

Klasická tabulka s použitím tagu <table>, lze také jednoduchým způsobem vytvořit pouze za použití vhodně nastylovaného blokového elementu - v tomto případě pomocí tagu <div> :

#csstable {
width:300px;
border-top:1px solid #000;
border-left:1px solid #000;
}

#csstable div {
float:left;
width:91px;
padding:4px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}

.title {
background:#FFCC00;
font-weight:bold;
}
.br {
clear:both;
}

Html kód je pak následující:

<div id="csstable">

<div class="title">Firstname</div>
<div class="title">Surname</div>
<div class="title">Age</div>

<div>Martin</div>
<div>Soukup</div>
<div>28</div>

<div>Petra</div>
<div>Dolinova</div>
<div>25</div>

<div>Eduard</div>
<div>Jelus</div>
<div>33</div>

<br class="br" />
</div>

Klasická tabulka se tedy dá řešit i alternativně za pomocí CSS - ukázka . Na zobrazování obsáhlejších dat je však toto řešení ne příliš vhodné a z hlediska sémantiky (X)HTML kódu je vhodné používat pro zobrazování dat klasickou tabulku.

Komentáře

[1] pavel 25.01.2006 [08:43] <pavelv(zavinac)quick.cz>
Ahoj Martine! Prosím, nefunguje odkaz na Ukázka CSS TABLE (link Tež půlka članku je "neviditelná". Děkuji Ti za zprovoznění. Pavel
[2] Eda 26.01.2006 [08:58] <sadera(zavinac)e-d-a.info> www
Článek Tabulka v CSS jsem inovoval a nyní by mělo vše fungovat bez problémů.
Komentovat tento článek