Tabele zebra folosind CSS
Zebra, tabele si randuri !
Hai sa ne uitam putin la urmatoarea imagine:
Orcine a folosit vreodata iTunes, va recunoaste imediat 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.
Solutia #1: Suspectul principal
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 lucru 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 simplu arata asa:
<html>
<head>
<title>tabele</title>
<style type=”text/css”>
#playlist tbody tr. par td {
background-color: #eee;
}
#playlist tbody tr.impar td {
background-color: #fff;
}
</style>
</head>
<body>
<table id=”playlist”>
<tbody>
<tr class=”par”>
<!—Aici este linia de prima culoare -->
</tr>
<tr class=”impar”>
<!—Aici este linia de a doua culoare -->
</tr>
<tr class=”par”>
<!—Aici este linia de prima culoare -->
</tr>
<tr class=”impar”>
<!—Aici este linia de a doua culoare -->
</tr>
<tr class=”par”>
<!—Aici este linia de prima culoare -->
</tr>
<tr class=”impar”>
<!—Aici este linia de a doua culoare -->
</tr>
</tbody>
</table>
</body>
</html>
Pentru ca avem de a face doar cu doua posibilitati (par / impar), putem scapa mai usor aplicad o singura clasa presupunand ca pe urmatoarea va fi aplicata regula de baza si anume cealalta clasa:
<html>
<head>
<title>tabele</title>
<style type=”text/css”>
#playlist tbody tr td {
background-color: #eee;
}
#playlist tbody tr.impar td {
background-color: #fff;
}
</style>
</head>
<body>
<table id=”playlist”>
<tbody>
<tr class=”impar”>
<!—Aici este linia de prima culoare -->
</tr>
<tr>
<!—Aici este linia de a doua culoare -->
</tr>
<tr class=”impar”>
<!—Aici este linia de prima culoare -->
</tr>
<tr>
<!—Aici este linia de a doua culoare -->
</tr>
<tr class=”impar”>
<!—Aici este linia de prima culoare -->
</tr>
<tr>
<!—Aici este linia de a doua culoare -->
</tr>
</tbody>
</table>
</body>
</html>
Destul de simplu, nu ? Dupa compactarea spatiului alb in cel de al doi-lea exemplu am obtinut doua lucruri: pe de o parte vizitatotii vor avea linii colorate diferit si vor naviga usor, iar pe de alta parte se face economie de trafic (fisierul fiind mai mic). Oricum, inca avem o problema: In primul exemplu iti smulgi parul scriind cod, iar al doi-lea exemplu este destul de primitiv. Mergem mai departe...
Problema #1: Lucrul manual
Scopul foilor de stil (CSS), indiferent ca sunt folosite intr-un site web prin intermediul unui fisier de stil (*.css) sau ca sunt folosite intr-o aplicatie precum Adobe InDesign, este sa verifice proprietatile vizualizarii elementelor cuprinse in document si de vreme ce selectorii de stil iti permit sa specifici un anumit stil pentru un anumit element din document, solutia de mai sus obliga autorul sa aplice clasa potrivita (par sau impar) la cel putin jumatate din randurile tabelului. Din moment ce tabelul contine putine randuri aceasta nu este o problema, insa cand avem de a face cu zeci sau sute de randuri copy & paste devine un calvar.
Problema poate fi evitata atunci cand tabelul este generat dinamic (server-side, din php de exemplu) , solicitand autorul sa scrie doar cateva linii de cod. Dar nu toate paginile web sunt generate dinamic si daca construiesti o aplicatie web este de dorit sa optimizezi codul paginii (prin CSS sau JavaScript) astfel incat aceasta sa se incarce cat mai repede vizitatorului.
Problema #2: Consistenta randurilor
Este posibil ca atunci cand ai de a face cu multe randuri si tot schimbi stilurile manual incercand sa gasesti varianta optima, sa le incurci cu totul si sa ai doua sau mai multe randuri consecutive cu acelasi stil. Trebuie sa o iei de la capat si iar nu e bine... Ce e de facut ? Ai putea sa folosesti pseudo-selectorii din CSS3 (http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-psudos) si ai rezolvat problema... Oricum, suportul browser-elor pentru CSS3 este destul de incomplet si iar nu e cea mai buna solutie..
Solutia: Cutia cu scule
Si aceasta este inca o solutie la problema noastra... Metoda par/impar mentionata mai sus foloseste CSS pur; Este timpul sa lasam la o parte barosul si sa folosim niste unelte mai fine: JavaScript si DOM.
In loc sa aplicam noi manual clasele css pe randurile corespunzatoare, vom folosi un pic de JavaScript pentru navigarea prin tabel si aplicarea automata a claselor css. Cam asa arata aceasta reteta:
- ne orientam sa gasim tabelul pe care il vom colora alternativ pe randuri.
- cautam toate elementele <tr> continute de elementul <tbody>.
- navigam printre <td> -uri si aplicam clasa css corespunzatoare (determinata de pozitia fiecarui <tr>)
- Schimbam culorile claselor dupa gust.
Pe cat de simplu pare in teorie, pe atat de simplu este si in practica. Ceea ce urmeaza este solutia practica ce va face treaba in locul nostru (ca sa vezi ce inseamna sa fii documentat). Vezi scriptul
Aceasta metoda are doua avantaje:
- putem folosi clasele css pentru elemente mai specifice in tabel (de exemplu, folosind metafora iTunes, putem indica daca melodia este pornita sau oprita sau daca este selectata in acel moment).
- putem aplica automat linii colorate diferit la orice tabel din orice pagina ce are functia stripe() inclusa. Trebuie doar sa facem apel la functie cu id-ul tabelului ca argument la momentul potrivit in pagina. Vezi exemplu
In timp ce ultima solutie necesita un timp de preparare mai mare si atentie sporita comparata cu prima solutie, codul ei este mai clar, simplu si usor de personalizat. Si din moment ce ai realizat-o nu iti ramane decat sa o folosesti ori de cate ori ai nevoie.
Despre autor David F. Miller a jonglat cu liniile de cod, atribute si elemente inca din vremea absolvirii "University of Calgary" (http://www.ucalgary.ca) in anul 2002. Site-ul lui personal (http://www.fivevoltlogic.com) - neactualizat de peste 3 ani - ar trebui sa cuprinda, intr-o zi, munca lui efectuata intre timp. Copyright Articol tradus de pe site-ul A List Apart de Postolache Mirabela pentru CssPlaza. Se poate prelua aceasta traducere a articolului doar cu obligatia afisarii sursei ( http://www.cssplaza.com/) precum si cu obligatia respectarii conditiilor impuse pentru articolul original. Translated with the permission of A List Apart Magazine and the author[s].