Tabele

postat acum 4 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!

Comentariu postate de michael kors purses la data de 15.05.2019
I must show thanks to you just for rescuing me from this particular predicament. Just after looking through the world wide web and meeting proposals which were not pleasant, I thought my life was gone. Living minus the answers to the issues you've sorted out through this guide is a crucial case, as well as the ones which could have adversely damaged my entire career if I hadn't noticed your blog. Your main understanding and kindness in playing with all areas was precious. I'm not sure what I would have done if I had not come across such a step like this. I'm able to at this time look ahead to my future. Thanks a lot so much for the reliable and result oriented guide. I won't hesitate to refer your site to anybody who requires recommendations about this problem.