Tabele

postat acum 2 ani de Stefanescu Mihai in categorie CSS

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>

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!