Fie de lucru laborator, clasa a XII-a, profil real, specializarea matematic-informatic, intensiv

informatic

Fia 04 web tabele HTML

1. Tabelele HTML se folosesc pentru prezentarea structurat a datelor, ordonate pe linii i pe
coloane. Dei se pot folosi i pentru poziionarea elementelor paginii acest lucru nu este
recomandat (se recomand folosirea CSS pentru descrierea aspectului i poziiei elementelor).
Elementele HTML folosite sunt:
Elemente:
2. <table> ... </table> = definete nceputul i sfritul tabelului;
3. <caption> ... </caption> = titlul tabelului - element opional, dac apare trebuie s fie
primul element al tabelului;
4. <colgroup> ... </colgroup> i <col> = se folosesc pentru definirea unor grupuri de coloane
(pentru a schimba aspectul unor anumite coloane de exemplu) - element opional, apare dup
<caption> dac exist. Pentru fiecare grup de coloane va exista cte un element <colgroup>.
Numrul de coloane din fiecare grup se poate preciza folosind atributul span sau elementul
<col> (vezi exemplele);
5. <thead> ... </thead> = grupeaz una sau mai multe linii reprezentnd antetul tabelului
(titlurile coloanelor).
6. <tfoot> ... </tfoot> = subsolul tabelului - grupeaz una sau mai multe linii afiate ultimele
n tabel (pentru totaluri de exemplu). Este opional. Apare dup <thead>, dar poate aprea i
la sfritul tabelului ca ultim element al acestuia;
7. <tbody> ... </tbody> = se folosete pentru a defini un grup de linii. pot exista mai multe
astfel de grupuri, deci mai multe elemente <tbody> unul dup altul.
8. <tr> ... </tr> = delimiteaz o linie a tabelului;
9. <td> ... </td> = delimiteaz o celul din tabel. Elementele <td> care nu au coninut nu
sunt afiate corect de majoritatea browser-elor. Dac vrei s definii un tabel care are celule
goale va trebui s folosii notaia <td> &nbsp; </td>. n acest caz &nbsp; are semnificaia
"spaiu liber". Elementul <td> poate avea ca atribute:
a. colspan are ca valoare un numr ntreg preciznd pe cte coloane ale tabelului se ntinde
celula;
b. rowspan are ca valoare un numr ntreg preciznd pe cte linii se ntinde celula.
10. <th> ... </th> = delimiteaz o celul din tabel care face parte din antet.
Exemple: (ncercai-le pe calculatoarele voastre pentru a vedea ce se afieaz)
11. Tabel simplu cu dou linii i dou coloane:
<table border="1">
<tr> <td> 1 </td> <td> 2 </td> </tr>
<tr> <td> 3 </td> <td> 4 </td> </tr>
</table>
12. Tabel cu celul care se ntinde pe mai multe coloane (colspan):
<table border="1">
<tr>
<td colspan="2"> A </td>
</tr>
<tr>
<td> B </td>
<td> C </td>
</tr>
</table>
13. Tabel cu celul care se ntinde pe mai multe linii (rowspan):
<table border="1">
<tr>
<td rowspan="2"> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
</tr>
Pagina 1 din 4

Fie de lucru laborator, clasa a XII-a, profil real, specializarea matematic-informatic, intensiv
informatic
</table>
14. Tabel cu mai multe celule mari:
<table border="1">
<tr> <!-- linia 1 -->
<td rowspan="5"> rowspan 5 </td>
<td rowspan="2" colspan="2"> rowspan 2 colspan 2</td>
<td> &nbsp; </td>
<td rowspan="2" colspan="3"> rowspan 2 colspan 3</td>
</tr>
<tr> <!-- linia 2 -->
<td> &nbsp; </td>
</tr>
<tr> <!-- linia 3 -->
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td colspan="2"> colspan 2 </td>
</tr>
<tr> <!-- linia 4 -->
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp;&nbsp;&nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr> <!-- linia 5 -->
<td colspan="3"> colspan 3 </td>
<td colspan="2"> colspan 2 </td>
<td> &nbsp; </td>
</tr>
<tr> <!-- linia 6 -->
<td colspan="7"> colspan 7 </td>
</tr>
</table>
15. Exemplu cu toate elementele:
<table border="1">
<caption>Centralizator al vnzrilor pe semestrele 1 i 2</caption>
<colgroup span="2"></colgroup> <colgroup span="3"></colgroup> <colgroup
span="3"></colgroup>
<thead> <!-- antetul tabelului -->
<tr>
<th colspan="2">Trimestre</th>
<th colspan="3">Trimestrul 1</th> <th colspan="3">Trimestrul 2</th>
</tr>
<tr> <th colspan="2">Luni</th>
<th> Ian </th> <th> Feb </th> <th> Mar </th> <th> Apr </th> <th> Mai
</th> <th> Iun </th>
</tr>
</thead>
<tfoot> <!-- subsolul tabelului -->
<tr> <th colspan="2"> Total </th>
<th> 220 </th> <th> 36 </th> <th> 1041 </th> <th> 31 </th> <th> 54
</th> <th> 455 </th>
</tr>
</tfoot>
<tbody> <!-- primul grup de linii -->
<tr> <th rowspan="3">Cat. 1</th> <td>Produs 1</td>
Pagina 2 din 4

Fie de lucru laborator, clasa a XII-a, profil real, specializarea matematic-informatic, intensiv
informatic
<td> 10 </td> <td> 20 </td> <td> 30 </td> <td> 10 </td> <td> 20 </td>
<td> 30 </td>
</tr>
<tr> <td>Produs 2</td>
<td> 5 </td> <td> 7 </td> <td> 2 </td> <td> 4 </td> <td> 9 </td> <td> 8
</td>
</tr>
<tr> <td>Produs 3</td>
<td> 200 </td> <td> 2 </td> <td> 1000 </td> <td> 4 </td> <td> 10 </td>
<td> 400 </td>
</tr>
</tbody>
<tbody> <!-- al doilea grup de linii -->
<tr> <th rowspan="2">Cat. 2</th> <td>Produs 4</td>
<td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 5 </td> <td> 6 </td> <td> 7
</td>
</tr>
<tr> <td>Produs 5</td>
<td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 8 </td> <td> 9 </td> <td>
10 </td>
</tr>
</tbody>
</table>
Exerciii:
16. Studiai elementele HTML destinate tabelelor de la adresa:
http://www.w3schools.com/html/html_tables.asp si rezolvati exercitiile de la sfarsitul lectiei.
17. Creai o pagin HTML cu titlul Test tabele HTML n care s apar tabele asemntoare cu
cele de mai jos:
A
D

B
E

A
B

Tabel 1.
CNP
123
234
345
456

Nume
Ion
Petre
Gheo
Vsilie

Clas
XII C
XII C
XII C
XII C

Medie
3
4
5
10

Tabel 2.

A
B
A

C
C

Avansat:

Pagina 3 din 4

E
D
D

Fie de lucru laborator, clasa a XII-a, profil real, specializarea matematic-informatic, intensiv
informatic
Studiai tabelele prezentate ca exemplu n fiierul exemplu_tabele_01.html i n dosarul
exemplu_tabele_02 din arhiva Exemple tabele pentru a vedea variante de modificare a
aspectului
tabelelor
HTML
folosind
CSS.
Articolul
http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ descrie exemplele
din dosar. Studiai exemplele i metodele folosite i ncercai s modificai tabelele date ca
exemplu i cele realizate de voi pentru a arta la fel.

Pagina 4 din 4