Codul HTML In Romana Pentru Incepatori pasul 4

Admin Posts : 103 Join date : 2008-09-05

Lecţia 4: Tabele

Prezentarea datelor sub forma de tabele prezinta avantaje din punct
de vedere al claritatii si sistematizarii. Marcajele HTML dedicate
formatarii tabelelor permit operatiuni asemanatoare celor din
procesoarele de texte (ex. MS Word).

Definirea unui tabel in HTML se face folosind perechea de marcaje <table>...</table>.
Prin intermediul acestei perechi de marcaje se definesc atribute
valabile pentru intregul tabel. Majoritatea acestor atribute pot fi
insa redefinite pentru anumite celule ale tabelului.

De Retinut:

Semnificatiile atributelor marcajului <table> sunt:
• border - specifica grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu va avea chenar.
• frame - defineste modul de afisare a chenarului exterior. Functioneaza in prezenta atributului "border". Atributul frame poate avea urmatoarele valori:
o above - afiseaza latura superioara a chenarului;
o below - afiseaza latura inferioara a chenarului;
o border - afiseaza chenarul complet;
o box - afiseaza chenarul complet (la fel ca si border);
o hsides - afiseaza partile inferioara, respectiv superioara ale chenarului;
o vsides - afiseaza partile laterale (stanga, dreapta) ale chenarului;
o lhs - afiseaza latura stanga a chenarului;
o rhs - afiseaza latura dreapta a chenarului;
o void - fara bordura exterioara.
• rules - defineste modul de afisare a chenarului interior dintre celulele tabelului. Functioneaza in prezenta atributului "border". Atributul rules poate avea urmatoarele valori:
o none - nu se afiseaza chenar interior;
o groups - afiseaza chenar intre grupurile de celule definite de thead, tbody, colgroup, col, tfoot;
o rows - afiseaza chenar între linii;
o cols - afiseaza chenar între coloane;
o all - afiseaza chenar intre toate celule interioare.
• width, height
- specifica latimea, respectiv inaltimea tabelului. In cazul in care
valorile specificate nu sunt suficiente pentru afisarea continutului
celulelor, valorile vor fi modificate automat de catre browser astfel
incat tot continutul sa fie afisat. Valorile se pot exprima absolut, in
pixeli, sau relativ la latimea ecranului (width), respectiv la inaltimea ecranului (height). Trebuie mentionat ca atributul "height" nu face parte din specificatiile HTML.
Este recomandat sa lasi browserul sa calculeze valoarea pentru "height" in functie de continutul tabelului.
• bgcolor - specifica culoarea pentru fundalul tabelului.
• bordercolor - specifica culoarea chenarului.
• bordercolorlight,
bordercolordark - sunt atribute utilizate pentru a crea un efect 3D
asupra chenarului. Este recomandata folosirea de culori complementare
pentru a obtine efectul scontat. Sunt extensii Microsoft.
• background
- URL-ul imaginii care va fi utilizata ca fundal al tabelului. In cazul
in care dimensiunile imaginii sunt mai mici decat cele ale tabelului,
ea va fi repetata astfel incat sa acopere intregul fundal al tabelului.
Este extensie Microsoft.
• cellspacing - specifica distanta dintre celule.
• cellpadding - specifica marginea interioara a celulelor.
• align - specifica alinierea pe orizontala a tabelului (stanga|centru|dreapta).
• valign - specifica alinierea pe verticala a tabelului (sus|mijloc|jos).
• summary - o descriere a tabelului, de obicei pentru browsere non-vizuale.

De Retinut:

Code:

Cea mai simpla forma a unui tabel se prezinta astfel:
<table>
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</table>
O forma mai complexa a unui tabel este:
<table>
<thead>
<tr>
<th>Nr. Crt</th>
<th>Nume Autor</th>
<th>Denumire Lucrare</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

De Retinut:

Code:

• <thead>...</thead> este un marcaj care contine unul sau mai multe randuri de celule care reprezinta antetul tabelului. Poate aparea o singura data in cadrul unui tabel.
• <tbody>...</tbody> este un marcaj care contine unul sau mai multe randuri de celule. Pot fi definite mai multe astfel de sectiuni in cadrul aceluiasi tabel (ex. in cazul in care exista stiluri de formatare diferite pentru sectiuni diferite ale tabelului).
• <tfoot>...</tfoot> este un marcaj care contine unul sau mai multe randuri de celule care reprezinta subsolul tabelului. Poate aparea o singura data in cadrul unui tabel. Este obligatoriu sa apara inaintea marcajului <tbody>.

Exemplu:

Code:

Continutul fiecarei celule poate fi formatat individual:
<table>
<tr>
<th><font color=black>Col 1</font></th>
<th><font color=red>Col 2</font></th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
In cazul in care vrei ca tabelul din exemplul anterior sa fie afisat cu chenar:

<table border=1>
<tr>
<th>Col 1</th>
<th><font color=red>Col 2</th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>

Un alt marcaj care poate aparea in cadrul unui tabel este <caption>. Are urmatoarea sintaxa:

De Retinut:

Marcajul caption adauga o scurta descriere (titlu) a tabelului. Poate fi utilizat numai in cadrul unui marcaj <table>, imediat dupa acesta.
Are urmatoarele atribute:
• align - in mod normal browser-ul va afisa titlul aliniat central si deasupra/dedesubtul tabelului. In HTML 4.0 atributul align a fost abandonat in favoarea formatarii prin CSS (text-align si vertical-align).
• valign - precizeaza pozitia titlului in raport cu tabelul (sus/jos).

Exemplu:

Code:

<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu utilizare caption </caption>
<tr>
<th>
<font color=black>Col 1</font>
</th>
<th>
<font color=red>Coloana 2</font>
</th>
</tr>
<tr>
<td>
<center>Celula 1.1</center>
</td>
<td>
<i>Celula 1.2</i>
</td>
</tr>
<tr>
<td>
<s>Celula 2.1</s>
</td>
<td>
<font color=blue>Celula 2.2</font>
</td>
</tr>
</table>

Marcajul <tr> defineste o linie intr-un tabel. Are urmatoarea sintaxa:

De Retinut:

Poate avea urmatoarele atribute:
• align - specifica modul in care va fi aliniat pe orizontala continutul liniei de tabel.
• valign - specifica modul in care va fi aliniat pe verticala continutul liniei de tabel.
• bgcolor - specifica culoarea pentru fundalul liniei de tabel.
• bordercolor - specifica culoarea chenarului celulelor din linie de tabel.
• bordercolorlight, bordercolordark - sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabel.
Marcajul <th> defineste o celula din antetul tabelului. Sintaxa este:

De Retinut:

Poate avea urmatoarele atribute:
• align, valign - indica alinierea orizontala si verticala a continutului celule, in celula.
• colspan - specifica numarul de coloane peste care se intinde celula curenta spre dreapta.
• rowspan - specifica numarul de linii peste care se intinde celula curenta in jos.
• nowrap - impiedica "ruperea" textului din celula pe mai multe linii.
• bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor mentionate mai sus.

Exemplu:

Code:

<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<thead>
<tr>
<th>
<font color=black>Col 1</font>
</th>
<th>
<font color=red>Coloana 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td><center>Celula 1.1</center>;</td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</td>
</tr>
</tbody>
</table>

Marcajul <td> defineste o celula din tabel.

De Retinut:

Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, in cazul marcajului <th>.
Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului.

Exemplu:

Code:

Exemplu utilizare colspan:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td colspan="2"><s>Celula 2.1</s></td>
</tr>
</table>
Exemplu utilzare rowspan:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<tr>
<td rowspan="2"><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td ><s>Celula 2.2</s></td>
</tr>
</table>

Probabil ca multi se vor intreba de ce am prezentat atat de multe marcaje si atribute. In cele mai multe cazuri, marcajele <table>, <tr>, <td>
sunt suficiente pentru a construi un tabel. Pe masura ce paginile HTML
pe care le vei realiza vor deveni mai complexe, vei vedea singur de ce
marcaje sau atribute ai nevoie. Succes !

Exercitii:

1.
Realizeaza (folosind NotePad) un tabel cu latimea 80%, chenar 1,
aliniat la dreapta in browser si avand cel putin 4 randuri a cate 3
celule, fiecare celula cu un fundal diferit. Incearca apoi sa modifici
acest tabel combinand doua coloane.

_______________________________________
...:::Only God Can Judge Me:::...

» Codul HTML In Romana Pentru Incepatori pasul 1
» Codul HTML In Romana Pentru Incepatori pasul 2
» Codul HTML In Romana Pentru Incepatori pasul 3