Tabele

Stefanescu Mihai 2 years ago 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>

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.