Tabele
Acest tutorial te va invata cum poti seta diferite proprietati ale tabelelor HTML folosind CSS.
Unui tabel ii pot fi setate urmatoarele proprietati folosindu-ne de CSS:
- border-collapse – Specifica daca browserul poate uni borderul celulelor comune sau il face sa apara sepaBrat.
- border-spacing – distanta dintre celulele unui tabel.
- empty-cell – specifica daca o celula goala este afisata sau nu
- width & height – setarea latimii si respectiv inaltimii
- colors – culorile tabelului
1.Despre Border Collapse
Aceasta optiune ii specifica browserului daca va uni conturul (borderul) unei celule cu alta sau nu.
<style type="text/css"> table.unu {border-collapse:collapse;} table.doi {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b {border-style:solid; border-width:3px; border-color:#333333; padding:10px; } </style> <table class="unu"> <caption>Exemplu Collapse</caption> <tr><td class="a"> Casuta A Collapse</td></tr> <tr><td class="b"> Casuta B Collapse</td></tr> </table> <br /> <table class="doi"> <caption>Exemplu Border Separat</caption> <tr><td class="a"> Casuta A border separat</td></tr> <tr><td class="b"> Casuta B border separat</td></tr> </table>
2.Despre Border Spacing
Aceasta proprietate specifica distanta dintre doua celule ale aceluiasi tabel. Aceasta proprietate poate primi atat una cat si 2 valori, acestea fiind valori numerice de distanta.Cand este data o singura valoare aceasta va fi aplicata atat pe verticala cat si pe orizontala, altfel prima valoare se refera la spatiul de pe orizontala iar a doua la cel de pe verticala.
Aceasta proprietate nu functioneaza in Netscape 7 si IE6
<style type="text/css"> table.unu { border-collapse:separate; width:250px; border-spacing:10px; } table.doi { border-collapse:separate; width:250px; border-spacing:10px 50px; } </style> <table class="unu" border="1"> <caption>Contur separat si border-spacing</caption> <tr><td> Exemplu casuta A</td></tr> <tr><td> Exemplu casuta B</td></tr> </table> <br /> <table class="doi" border="1"> <caption>Contur separat si border-spacing</caption> <tr><td> Exemplu casuta A</td></tr> <tr><td> Exemplu casuta B</td></tr> </table>s
3.Despre Empty Cell
Aceasta proprietate indica daca o celula fara continut ar trebuii sa fie afisata sau nu.
Aceasta proprietate nu poate avea decat 2 valori, show si hide.
<style type="text/css"> table.gol{ width:350px; border-collapse:separate; empty-cells:hide; } td.gol{ padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> <table class="gol"> <tr> <th></th> <th>Titlu 1</th> <th>Titlu 2</th> </tr> <tr> <th>Titlu rand</th> <td class="gol">valoare</td> <td class="gol">valoare</td> </tr> <tr> <th>Titlu rand</th> <td class="gol">valoarea</td> <td class="gol"></td> </tr> </table>
4.Despre Width si Height
Aceste proprietati sunt destul de simple, seteaza latimea si inaltimea.
Iata si un exemplu in care am setat ca tabelul sa aiba 30% din latimea browserului iar table header-ul sa aiba 50px inaltime:
<style type="text/css"> table { width: 30%; } th { height: 50px; } </style> <table border='1'> <tr> <th></th> <th>Titlu 1</th> <th>Titlu 2</th> </tr> <tr> <td>Titlu rand</td> <td>prima valoare</td> <td>a doua valoare</td> </tr> </table>
4.Despre Color si Background
Si aceaste proprietati sunt la fel de simple, folosim color pentru culoarea textului si background-color pentru culoarea de fundal.
<style type="text/css"> th { color: red; } td { background-color: lightgray; } </style> <table border='1'> <tr> <th></th> <th>Titlu 1</th> <th>Titlu 2</th> </tr> <tr> <td>Titlu rand</td> <td>prima valoare</td> <td>a doua valoare</td> </tr> </table>