Mrrrr
Moderator
 Din: boschetzi
Inregistrat: acum 18 ani
Postari: 1368
|
|
Poate ca multi dintre cititori se întreaba ce rost le mai putem da tabelelor în ziua de azi. Dupa ce miscarea standardelor a câstigat în sfârsit respectul meritat, le putem da tabelelor rolul pentru care au fost proiectate, si anume afisarea de date tabulare. Da, ma gândeam la voi, cei care mai faceti layout-uri din tabele. Nu, nu ar trebui sa mai faceti asta.
Vom arunca o privire asupra singurului mod în care vom folosi tabelele de acum încolo, urmând ca în articole urmatoare sa tratam problema layoutingului 100% CSS. Vom folosi tot CSS si pentru a ne face tabelele frumoase. În alte articole, vom vedea cum putem crea un formular accesibil fara tabele, cum am fi fost tentati sa procedam acum câtiva ani.
Sa presupunem ca avem urmatorul tabel:
<table>
<tr>
<th>Nume</th>
<th>Website</th>
<th>Email</th>
</tr>
<tr>
<td>Alma</td>
<td>www.alma.ro</td>
<td> </td>
</tr>
<tr>
<td>Vlad</td>
<td>www.vlad.ro</td>
<td> </td>
</tr>
<tr>
<td>Lari</td>
<td>www.lari.ro</td>
<td> </td>
</tr>
</table>
Vom folosi CSS pentru a stila întregul tabel. În primul rând, vom scapa de orice spatii albe dintre celule, pentru a putea apoi sa le stilam dupa bunul plac.
table{
border:0;
padding:0;
margin:0;
border-collapse:collapse;
}
Daca dorim sa centram tabelele, putem folosi margin:auto. Daca dorim bordere, putem specifica acest lucru cu atributul border: în loc de 0 vom pune 1px, 2px etc…, apoi culoarea în hexa, urmata de stilul borderului(solid, dashed etc). Si asa mai departe…
Un tabel, o clasa de tabele
Regulile CSS scrise mai sus vor afecta toate nodurile copil ale tuturor tabelelor, fie ele tr, td sau th(table header). Daca dorim sa afectam doar anumite tabele, fiecarui tabel îi putem da un className, astfel: Selectorul css pentru a afecta doar acest tabel si toate tabelele din clasa lui ar fi table.className:
table.tabel_colorat{
}
Daca dorim sa afectam un singur tabel, este de preferat sa scriem o clasa separata numai pentru el. Exista însa si o alta posibilitate, si anume sa îi atribuim un id. Cred ca va amintiti de acestea de la JavaScript.
<table></table>
Acest tabel poate fi selectat apoi folosind #id:
#tabelnume{
}
Aceasta metoda prezinta avantajul unei identificari facile în cod.
Ce e th si de ce e acolo?
th este eticheta pentru table header. Este derivata din td, comportându-se întocmai ca o celula de tabel. Singura diferenta: celulele th trebuie sa contina informatie de cap de tabel. Eticheta ne avantajeaza atunci când dorim sa stilam diferit capul de tabel de restul rândurilor. Adica exact cazul nostru.
th{
border-bottom:1px solid #F2E4AB;
height:5px;
vertical-align:middle; /*similar lui valign din vechile practici de tabele*/
text-align:left;
text-transform:capitalize; /*sau titlecase; mai putem alege uppercase si lowercase*/
}
Atentie însa la clase! Daca doriti ca doar th-ul unei anumite clase de table sa se comporte asa, atunci trebuie sa precedati th de numele clasei:
table.numeclasa th{ La fel si în cazul id-ului, numai ca de data aceasta, dupa cum am vazut, nu scriem numele etichetei, pentru ca pentru un id nu conteaza:
#id th{
Machiajul pentru tr
Pentru o mai buna citire a tabelului, hai sa facem rândurile în zebra. Efectul este usor de realizat daca declaram doua clase pentru tr.
tr.black{
background-color:#000;
}
tr.grey{
background-color:#efefef;
}
În HTML vom atribui etichetelor tr clasele, din doua în doua. De observat ca ar fi extrem de usor de generat automat aceste atribuiri, prin setarea unei variabile si incrementarea ei la fiecare ciclu. Daca variabila este para, atunci scriem class=black, altfel scriem class=grey.
Arata bine, dar parca îi lipseste ceva. Mda, nu se vede textul. Pentru rândurile negre, culoarea textului din celule este setata default, adica negru. Vom suprascrie aceasta regula din clasa tr.black.
tr.black{
background-color:#000;
color:#fff;
}
Dar daca cineva va folosi o regula pentru modificarea culorii textului din toate td-urile, atunci regula lui va suprascrie regula noastra, deoarece td este un element copil al unui tr, iar regulile css au prioritate de la mic la mare (cu cât e mai adânc un obiect în DOM - cu cât e mai "copil", cu atât are mai mare prioritate în css). Asa ca vom scrie putin diferit, si anume vom aplica regula doar la acele td-uri dintr-un tr care are clasa black.
tr.black td {
color:#fff;
}
Sa clipeasca rândurile!
Multe rânduri de tabele clipesc atunci când trece mouse-ul peste ele. O sa-mi spuneti ca e simplu de facut. Sincer, este. Dar si aici avem ceva de îmbunatatit. Tehnica poarta numele de unobtrusive JavaScript. Scopul este de a separa orice linie de script de etichetele HTML si stocarea lor într-un fisier .js.
Întâi vom declara o clasa de hover:
tr.over{
background-color:#547E5E;
color:#fff;
}
Acum vom face magie, si liniile de tabel vor avea eventuri onmouseover si onmouseout generate de JavaScript. Ideea este sa selectam toate tr-urile din document si sa le atribuim valori pentru eventurile respective.
function clipici(){
var trs=document.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
trs[i].title=trs[i].className;
trs[i].onmouseover=function(){this.className='over'};
trs[i].onmouseout=function(){this.className=this.title};
}
}
Pentru a tine minte vechea clasa a tr-ului respectiv, am recurs la un mic artificiu: am stocat vechiul nume de clasa în atributul "title" al etichetei, pentru a-l reda apoi în eventul onmouseout. Puteam rezolva si altfel, punând conditii de genul if(trs[i].className='black') .... trs[i].onmouseout...this.className='black', si la fel pentru clasa 'grey'. Dar asa am scris mai putin cod, nu? Dezavantajul este ca nu mai pot folosi atributul title.
Datorita faptului ca scriptul foloseste DOM-ul, functia nu va face nimic decât când întreg documentul a fost încarcat si DOM-ul creat. Adica, pentru a încarca functia, va trebui sa folosim window.onload:
window.onload=function(){
clipici();
}
Daca dorim si alte astfel de functii, nu trebuie decât sa le adaugam la lista. Pentru o functie care are grija de window.onload, uitati-va si pe functia addLoadEvent() a lui Simon Willison.
Concluzii si extinderi
Cei mai atenti au observat ca si headerul clipeste. Problema se poate elimina printr-o singura conditie în scriptul nostru. Astfel, functia va arata asa:
function clipici(){
var trs=document.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++)
if(trs[i].childNodes[1].tagName!='TH'){
trs[i].title=trs[i].className;
trs[i].onmouseover=function(){this.className='over'};
trs[i].onmouseout=function(){this.className=this.title};
}
}
Acum, daca cineva stie de ce trebuie TH scris cu litere mari, sa-mi spuna si mie la sparkle.vlad arond gmail.com.
Folosind functia clipici, putem adauga tot felul de eventuri la fiecare tr, putând de exemplu sa facem vizibil un div cu o imagine sau o descriere amanuntita, sau chiar functii de edit/delete pentru un CMS.
Codul sursa îl gasiti ca de obicei în exemplul pe care l-am construit.
Autor Vlad Fratila
_______________________________________
Multe Instrumentale - 1000++
|
|
