top

Tabele zebra - CSS

 
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului CoZmA -> Tutoriale CSS
Autor Mesaj
TripleH
Administrator
Administrator
TripleH

Data inscrierii: 23/Sep/2007
Mesaje: 2565

MesajTrimis: 03/12/2007 20:43    Titlul subiectului: Tabele zebra - CSS Raspunde cu citat (quote)

Hai sa ne uitam putin la urmatoarea imagine:
Tabele zebra - CSS Tabele zebra - CSS
Orcine a folosit vreodata iTunes, va recunoaste fără întârziere originea imaginii. Dungile care alterneaza intre alb si albastru au dublu rol: In primul rand arata mai bine din punct de vedere estetic si in al doi-lea rand ghideaza ochiul privitorului, permitandu-i acestuia observe mai bine detaliile unui rand.

Daca aveti impresia ca al doilea motiv nu este chiar asa de intemeiat observati diferentele in aceste imagini.

In eventualitatea in care utilizezi o asezare dinamica (liquid layout) in pagina unui site, poti ajunge in situatia arata in comparatia de mai sus. Coloanele sunt separate de mult spatiu alb (gol), facand dificila trecerea de la o coloana la alta pe acelasi rand.

Obtinerea efectului de linii colorate diferit in XHTML este destul de usor: se alterneaza culorile fundalului pentru liniile pare si impare. Una alba, una albastra, etc ..
Acest fapt poate fi facut cu doua clase CSS (una pentru dungile pare si alta pentru dungile impare) care se aloca cate una pentru fiecare rand, alternativ. Un exemplu necomplicat arata asa:

Cod:
<html>
<head>
<title>tabele</title>
<style>
#playlist tbody tr. par td {
background-color: #eee;
}
#playlist tbody tr.impar td {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<8212>
</tr>
<tr>
<8212>
</tr>
<tr>
<8212>
</tr>
<tr>
<8212>
</tr>
<tr>
<8212>
</tr>
<tr>
<8212>
</tr>
</tbody>
</table>
</body>
</html>

_________________
Tabele zebra - CSS Tabele zebra - CSS
Sus
Vezi profilul utilizatorului Trimite mesaj privat
Afiseaza mesajele pentru a le previzualiza:    Subiectul anterior : Subiectul urmator  
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului CoZmA -> Tutoriale CSS Ora este GMT + 2 ore
Pagina 1 din 1

 
Mergi direct la:  
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum

Fa-ti si tu propriul forum GRATUIT, pe www.myforum.ro