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>