Tabele HTML

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 atributele:
</TABLE> – 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 <table > şi
</CAPTION </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 atributele:
</TR> – 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 astfel de celule
</TH> 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 avea oricare
</TD> 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>
</tr>
<tr>
</tr>
</table>
Demo
Randul 1 Coloana 1Randul 1 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>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">Randul 3 Coloana 1</td>
</tr>
</table>
Demo
Coloana 1 Coloana 2 Coloana 3

Randul 1 Coloana 1
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>
</tr>
<tr>
</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

https://www.youtube.com/watch?
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
agenda creion desen
caiet pix carte
9.
carte caiet
agenda creion desen
caiet pix carte
10.
carte
agenda creion desen
caiet pix carte
11.
agenda caiet pix
creion desen
caiet pix carte
12.
carte pix
agenda caiet pix
pix carte
13.
carte pix
agenda caiet pix
pix carte
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 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>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=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>
</tr>
<tr>
</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 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>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>
</tr>
<tr>
</tr>
</table>

Tabele HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tabele HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Tabele în HTML

Randul 1 Coloana 1Randul 1 Coloana 2

HTML - Tabele asimetrice

Coloana 1 Coloana 2 Coloana 3

HTML<table border="1" cellspacing="10" cellpadding="10" bgcolor="rgb(0,255,0)">

Aici puteti vizualiza o lectie virtuala la tema tabele in HTML

S-ar putea să vă placă și