Tabele în HTML
În cele mai dese cazuri tabelele se utilizează pentru organizarea structurată a datelor.
De asemenea, aşa cum fiecare celulă a tabelului poate avea propriile culori, stiluri, efecte pentru
text şi fundal, tabelele se folosesc şi pentru soluţii de design.
Un tabel, de regulă, are:
a) titlu pentru specificarea numelui tabelului;
b) rânduri şi coloane;
c) cap de tabel („table header”) pentru descrierea conţinutului coloanelor sau al rândurilor;
d) celule de date, care formează rândurile şi coloanele tabelului.
Etichete pentru definirea unui tabel într-un document .html
Etichete Etichete Descrierea etichetelor
<TABLE> Definesc un tabel. Eticheta <TABLE> poate avea
</TABLE> atributele:
– BORDER, care adaugă un chenar tabelului şi a cărui
valoare оntreagă pozitivă
este grosimea оn pixeli a chenarului (valoarea 1 este
prestabilită, iar valoarea
0 semnifică absenţa chenarului);
– ALIGN, care stabileşte modul de aliniere a tabelului оn
document şi poate
avea una din valorile left, right, center;
– BGCOLOR, care specifică culoarea de fond pentru tot
tabelul;
– CELLSPACING, care stabileşte distanţa оn pixeli dintre
două celule vecine
ale tabelului (valoarea prestabilită este 2);
– CELLPADDING, care stabileşte distanţa оn pixeli dintre
marginea celulei
şi conţinutul ei (valoarea prestabilită este 1);
– WIDTH şi HEIGHT, care specifică lăţimea şi înălţimea
tabelului (valori
ale atributului pot fi numere оntregi pozitive (număr de
pixeli) sau numere
оntregi pozitive mai mici decоt 101 şi urmate de simbolul
% (specificоnd astfel
fracţiuni din lăţimea şi оnălţimea paginii)).
<CAPTION> Definesc titlul tabelului şi pot fi plasate оntre etichetele
</CAPTION <table > şi </table >,
dar nu оn interiorul etichetelor care definesc celulele sau
rоndurile tabelului.
Eticheta <CAPTION> poate avea atributul ALIGN, care
stabileşte poziţia
titlului faţă de tabel şi care va avea una din valorile
bottom, top, left, right.
<TR> Specifică un rоnd оn tabel. Eticheta <TR> poate avea
</TR> atributele:
– ALIGN pentru alinierea orizontală (cu una din valorile
left, center, right);
– VALIGN pentru alinierea verticală (cu una din valorile
top, middle, bottom).
<TH> Definesc o celulă-antet. Оn mod prestabilit, textul unei
</TH> astfel de celule este centrat şi îngroşat. Eticheta <TH>
poate avea atributele:
– WIDTH şi HEIGHT pentru stabilirea lăţimii şi înălţimii
celulei;
– ALIGN şi VALIGN;
– ROWSPAN, care unifică celula cu cоteva celule de
desubtul ei (valoarea
atributului este numărul total de celule care se unifică);
– COLSPAN, care unifică celula cu cоteva celule din
dreapta ei (valoarea
atributului este numărul total de celule care se unifică);
– NOWRAP, care interzice \ntreruperea liniei de text din
celulă (deci coloana
care conţine celula poate deveni oricоt de mare) şi care
se scrie fără valori;
– BGCOLOR, care specifică culoarea de fond pentru celulă
(culoarea textului
celulei poate fi stabilită cu ajutorul atributului Color al
etichetei
<Font>).
<TD> Definesc o celulă de date obişnuită. Eticheta <TD> poate
</TD> avea oricare dintre
atributele etichetei <TH>.
Dacă o celulă a tabelului este vidă, atunci оn mod normal ea este afişată fără
chenar. Pentru a evita acest efect, оn locul conţinutului celulei se va scrie textul
sau <br>.
Exemplul (fig. 12.16):
<HTML>
<Head> <Title>Exemplul 1. Tabele</Title> </Head>
<Body>
<Table border=2 width=”90%” height=”80%” align=”center”
bgcolor=”lightcyan”>
<Caption align=”left”><Font color=”Red” Size=6> Orarul lectiilor </font>
</Caption>
<Tr><Th Colspan=2>Luni<Th>Marti<Th>Miercuri<Th>Joi<Th>Vineri </Tr>
<Tr align=”center”><Td>1<Td>Romana<Td>Chimia<Td>Fizica
<Td>Istoria<Td>Algebra </Tr>
<Tr align=”center”><Td>2<Td>Engleza<Td>Fizica<Td>Informatica
<Td>Rusa<Td>Biologia </Tr>
<Tr align=”center”><Td>3<Td>Franceza<Td>Algebra<Td>Geometria
<Td>Muzica<Td> Romana </Tr>
</Table>
</Body>
</HTML>
Tabelele pot aparea dificile la inceput, dar cu putina rabdare si practica vei vedea ca nu sunt asa
cum par. Tagul <table> este folosit pentru a deschide un tabel. Inauntrul acestui tag vom gasi alte
doua taguri tipice <tr> (liniile tabelului) si <td> (coloanele tabelului). Dar cea mai buna explicatie ar fi
in momentul de fata un exemplu:
HTML<table border="1">
<tr>
<td>Randul 1 Coloana 1</td>
<td>Randul 1 Coloana 2</td>
</tr>
<tr>
<td>Randul 2 Coloana 1</td>
<td>Randul 2 Coloana 2</td>
</tr>
</table>
Demo
Randul 1 Coloana 1Randul 1 Coloana 2
Randul 2 Coloana 1Randul 2 Coloana 2
Continutul va fi plasat in interiorul casutelor tabelului. O casuta este ceea ce se afla intre <td> si
</td>. Atributul borderstabileste latimea marginii tabelului.
HTML - Tabele asimetrice
Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii si "colspan"
pentru a traversa mai multe coloane. Deasemenea daca vrem ca prima linie sa serveasca de titluri
pentru toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere ingrosate dupa cum vom
vedea in exemplu urmator:
HTML<table border="1">
<tr>
<th>Coloana 1</th>
<th>Coloana 2</th>
<th>Coloana 3</th>
</tr>
<tr>
<td rowspan="2">Randul 1 Coloana 1</td>
<td>Randul 1 Coloana 2</td>
<td>Randul 1 Coloana 3</td>
</tr>
<tr>
<td>Randul 2 Coloana 2</td>
<td>Randul 2 Coloana 3</td>
</tr>
<tr>
<td colspan="3">Randul 3 Coloana 1</td>
</tr>
</table>
Demo
Coloana 1 Coloana 2 Coloana 3
Randul 1 Coloana 2Randul 1 Coloana 3
Randul 1 Coloana 1
Randul 2 Coloana 2Randul 2 Coloana 3
Randul 3 Coloana 1
HTML - Spatierea celulelor
Cu ajutorul atributelor "cellpadding" si "cellspacing" vom defini distanta dintre celule. "cellspacing"
stabileste marimea marginii, iar "cellpandding" stabileste distanta dintre margine si continut. In
exemplu urmator a fost adaugata deasemenea putina culoare.
HTML<table border="1" cellspacing="10" cellpadding="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Coloana 1</th>
<th>Coloana 2</th>
</tr>
<tr>
<td>Randul 1 Coloana 1</td>
<td>Randul 1 Coloana 2</td>
</tr>
<tr>
<td>Randul 2 Coloana 1</td>
<td>Randul 2 Coloana 2</td>
</tr>
</table>
Distanta intre celule si dimensiunea margini va fi inerpretata de browser in pixeli. Conform acestei
"legi" o valoare de 10 sunt de fapt 10 pixeli. Acest atribut nu este singurul care foloseste ca unitate
de masura, pixeli
Aici puteti vizualiza o lectie virtuala la tema tabele in HTML
[Link]
v=KXw5JSrtdz8&feature=share&fbclid=IwAR2gfqMNcHqN3RrqmSvEPUyNFZreFKzE8C0fXcmOfpB1z7-a-
f2IZizGmDA
Întrebări și exercitii
1. Numiți atributele etichetei <TA BLE> şi valorile posibile ale acestor
atribute.
2. Care sînt atributele etichetei <CAPTION> şi valorile posibile ale
acestor atribute?
3. Care etichete definesc o celulă de date? Care sînt atributele acestor
etichete?
Rezolvati din exercițiile 4 și 5 doar itemii corspunzator
numarului de ordine din catalog, specificați în lista următoare:
(Se poate de rezolvat si mai mult!()
1. 6,11 14. 3,13
2. 7,12 15. 5,12
3. 8,13 16. 2,11
4. 9,4 17. 4, 9
5. 5,10 18. 2,10
6. 1,11 19. 6,11
7. 2,12 20. 5,12
8. 3,13 21. 1,13
9. 4,10 22. 3,11
10. 5,11 23. 6,12
11. 6,9 24. 1,10
12. 1,12 25. 2,13
13. 2,8 26. 5,9
4. Creaţi o pagină Web care va afişa următoarele tabele:
1.
A B C
D E F
2.
A B C
D F
3.
A B
C D E
4.
A B
D E F
5.
A B
D E F
G H I
6.
A B C
D F
7.
A B
D
G H I
8.
carte caiet pix
agend creio dese
a n n
caiet pix carte
9.
carte caiet
agend creio dese
a n n
caiet pix carte
10.
carte
agend creio dese
a n n
caiet pix carte
11.
agend caiet pix
a creio dese
n n
caiet pix carte
12.
carte pix
agend caie pix
a t
pix cart
e
13.
carte pix
agend caie pix
a t
pix cart
e
Ex.5.
Desenati tabelul care corespunde codului HTML
1.
<table border="1">
<tr>
<td colspan="2" align="center">A</td>
<td>D</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>E</td>
</tr>
</table>
2.
<table border="1">
<tr>
<td rowspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
3.
<table border="1">
<tr>
<td colspan="2" align="center">A</td>
<td>D</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>E</td>
</tr>
</table>
4.
<table border=1>
<tr bgcolor=grey>
<td>A</td>
<td>C</td>
<td>E</td>
</tr>
<tr>
<td rowspan=2>B</td>
<td>D</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
</table>
5.
<table border="1">
<tr>
<td>A</td>
<td>C</td>
<td rowspan="2">E</td>
</tr>
<tr>
<td colspan="2" align="center">B</td>
</tr>
</table>
6.
<table border=1>
<tr>
<td rowspan="2" bgcolor="grey">A</td>
<td colspan="3" align="center">B</td>
<td rowspan="2">C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td bgcolor="grey">G</td>
<td colspan="3" align="center">H</td>
<td>I</td>
</tr>
</table>
7.
<table border=1>
<tr bgcolor=grey>
<td>A</td>
<td>C</td>
<td>E</td>
</tr>
<tr>
<td rowspan=2>B</td>
<td>D</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
</table>
8.
<table border=1>
<tr>
<td rowspan=3>A</td>
<td rowspan=2>B</td>
<td rowspan=3>D</td>
<td bgcolor=grey>E</td>
<td bgcolor=grey>F</td>
<td bgcolor=grey>G</td>
</tr>
<tr>
<td colspan=3 rowspan=2 align=center>H</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
9.
<table border="1">
<tr>
<td>A</td>
<td>C</td>
<td rowspan="2">E</td>
</tr>
<tr>
<td colspan="2" align="center">B</td>
</tr>
</table>
10.
<table border="1">
<tr>
<td>A</td>
<td>C</td>
<td>E</td>
</tr>
<tr>
<td>B</td>
<td>D</td>
<td>F</td>
</tr>
</table>
11.
<table border=1>
<tr>
<td rowspan="2" bgcolor="red">A</td>
<td colspan="3" align="center">B</td>
<td rowspan="2">C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td bgcolor="grey">G</td>
<td colspan="3" align="center">H</td>
<td>I</td>
</tr>
</table>
12.
<table border=1>
<tr bgcolor=grey>
<td>A</td>
<td>C</td>
<td>E</td>
</tr>
<tr>
<td rowspan=2>B</td>
<td>D</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
13.
<table border="1">
<tr>
<td>A</td>
<td>C</td>
<td rowspan="2">E</td>
</tr>
<tr>
<td colspan="2" align="center">B</td>
</tr>
</table>