Tabele si fisierele CSS – Mic tutorial
Aseara m-am chinuit ceva tot cautand o modalitate de a afisa pe o singura pagina un mic sumar al produselor prezente in viitorul site. Pana la urma am ales simplitatea (doar e vorba de Simple web design, nu?) si am aranjat toate produsele intr-un mic tabel la care am atasat, folosind stilurile CSS, cateva proprietati care il fac mai interesant. Am sa incerc sa va si arat cum am facut, la scara mai mica desigur.
CSS si tabele – Mic tutorial
Pentru inceput avem nevoie de un tabel. Pentru exemplificare, alegem un tabel cu doua randuri si doua coloane (dorim sa prezentam un produs si imaginea acestuia).
<table width="450px" align="center" class="tabel"> <tr> <td>imagine</td> <td>produs</td> </tr> <tr> <td>imagine</td> <td>produs</td> </tr> </table>
Cu alte cuvinte, am creat un mic tabel de 450 pixeli, centrat pe mijloc. Prima coloana este rezervata imaginilor, iar cea de a doua, textului de prezentare a produsului. Odata tabelul terminat e timpul sa-l coloram folosind CSS-ul. CSS este un acronim provenind din Cascading Style Sheets, care inseamna “foi de stil in cascada” (cea mai apropiata traducere). Pentru aceasta tot ce trebuie sa facem este sa definim un stil pentru acest tabel creat si sa definim fisierul CSS:
.tabel {color: white; background: black; text-align: left;}
.tabel td {padding: 10px; text-align: left;}
.tabel tr {background: green;}
.tabel tr:hover {background: blue; color: white;}
Primele 3 linii definesc tabelul (randurile si coloanele) in stare initiala. Ultimul rand este secretul pentru obtinerea acelui efect de On Mouse Over. Culorile sunt luate la intamplare si le poti schimba cum vrei tu, folosind chiar si codurile hexa sau imagini ca si background. Salveaza acest fisier CSS ca si tabel.css (sau orice alt nume iti doresti). Acum, tot ce mai trebuie facut este sa atasezi fisierul tabel.css documentului html in care apare tabelul:
<link href="css.css" rel="stylesheet" type="text/css" />
Si sa-i atribui tabelului acest stil (modificand prima linie din codul tabelului) astfel:
<table width="450px" align="center" class="tabel">
Din pacate insa, aceasta metoda functioneaza cred ca numai pe Firefox. In internet Explorer inca nu am apucat sa o testez pentru ca momentan sunt pe Linux.
Daca esti in pana de idei si nu sti cum sa-ti “desenezi” tabelul, am gasit pentru tine o pagina special creata in acest sens. Data Tables and Cascading Style Sheets Gallery este exact demonstratia a ceea ce se poate crea folosind fisierele de tip CSS. 69 de modele va asteapta pentru inspiratie si modelare.
Succes.
