Curs Html

In HTML5 stilul, aspectul si pozitionarea tabelelor httml se face cu CSS.
- Modul de creare a tabelelor in html e prezentat in tutorialul: Creare tabele HTML.

Tag-ul <style> din exemplele prezentate aici se adauga in zona <head> din pagina.


Adaugare bordura la tabel

Bordura tabelului se adauga cu proprietatea css: border.
- Exemplu, bordura neagra la elementele <table>, <th> si <td>:
<style>
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
</table>
Veti observa ca in exemplu de sus tabelul are borduri duble deoarece elementele <table>, <th>, si <td> au borduri separate. Pentru a le uni intr-o singura bordura se aplica proprietatea: border-collapse: collapse; la tabel.
- Acelasi exemplu cu "border-collapse":
<style>
table {
 border-collapse: collapse;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
</table>
Pentru bordura doar in jurul tabelului se aplica "border" doar la <table>.

Lungimea si Latimea tabelului

Lungimea si Latimea tabelului se defineste cu proprietatile css: width respectiv height.
- Exemplu: Tabel cu lungimea 95% si inaltimea <th> de 40px:
<style>
table {
 border-collapse: collapse;
 width: 95%;
}
th {
 height: 40px;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
</table>

Alinierea in tabel

Alinierea pe orizontala a elementelor din tabel se face cu proprietatea text-align (poate lua valorile: left, right, center).
- In mod implicit, continutul din <th> este centrat.
Alinierea pe verticala in celulele din tabel se face cu proprietatea vertical-align (poate lua valorile: top, bottom, middle).

Pozitionarea tabelului pe mijloc se face aplicand valoarea "auto" la marginile stanga si dreapta la tabel: margin:5px auto;


- Exemplu: Tabel centrat, cu textul din <th> orizontal stanga (left) si continutul din <td> aliniat vertical jos (bottom):
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 width: 70%;
}
table, th, td {
 border: 1px solid #000;
}
th {
 text-align: left;
}
td {
 height: 45px;
 vertical-align: bottom;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
</table>

Spatiu la celulele tabelului

Spatiu dintre celulele tabelului poate fi definit cu proprietatea border-spacing aplicata la tabel.
Spatiu dintre bordura si continutul din <td> poate fi modificat cu proprietatea padding aplicata la <th> si <td>.

- Exemplu: Spatiu dintre celule de 10px si padding 8px;
<style>
table {
 border-spacing:10px;
 margin:5px auto;
 width: 80%;
}
table, th, td {
 border: 1px solid #000;
}
th, td {
 padding: 8px;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
</table>

Culoarea tabelului

Culoarea /fundalul la elementele din tabel se face cu proprietatea background. Aceasta poate fi aplicata la <table>, <tr>, <th> si <td>.
- Exemplu: background aplicat la <table>, <th> si <td>.
<style>
table {
 background: #a8a9e0;
 margin:5px auto;
 width: 290px;
}
table, th, td {
 border: 1px solid #000;
}
th {
 background: #4bac40;
 color: #fff;
}
td {
 background: #fff;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
</table>

Culoare la randurile de tabel

Ca sa alternati culoarea randurilor, se aplica "background" la selectorul css nth-child() la <tr>.
Daca vreti ca randul pe care este mouse-ul sa fie evidentiat, se aplica selectorul hover.

- Exemplu:
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 width: 290px;
}
table, th, td {
 border: 1px solid #000;
}
tr:nth-child(even){
 background: #efefef;
}
tr:hover {
 background: #b8d8b8;
}
th {
 background: #bbbbf0;
}
</style>

<table>
<tr>
 <th>titlu 1</th>
 <th>titlu 2</th>
</tr>
<tr>
 <td>linia 2- coloana 1</td>
 <td>linia 2- coloana 2</td>
</tr>
<tr>
 <td>linia 3- coloana 1</td>
 <td>linia 3- coloana 2</td>
</tr>
<tr>
 <td>linia 4- coloana 1</td>
 <td>linia 4- coloana 2</td>
</tr>
</table>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul care creaza celula in tabel.
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicati proprietatea CSS care adauga o imagine pentru fundal
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
Ce instructiune se foloseste la parcugerea elementelor unui Array?
for() [) object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.
for() foreach() if()
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?
meek good beautiful
He is so kind and meek.
- El este atat de amabil si bland.
Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?
hermoso fuerte manso
Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.
Stilizare tabele HTML cu CSS

Last accessed pages

  1. Accentul si Pronuntia (28452)
  2. Poezii pentru copii, in engleza (40912)
  3. Coduri pt culori (71845)
  4. Viitorul - Verbul la viitor (6475)
  5. Programe pentru invatare limba Spaniola (8799)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1223)
  2. Coduri pt culori (892)
  3. Cursuri limba engleza gratuite si lectii online (590)
  4. Gramatica limbii engleze - Prezentare Generala (521)
  5. Exercitii engleza - English Tests and exercises - Grammar (476)