Tabele în HTML

Tatiana Pașa
USM, Departamentul Informatică
 Tabele în HTML
Tagul <table> este folosit pentru a deschide un tabel. Înăuntrul <table border="2">
acestui tag sunt utilizate alte două taguri <tr> (liniile tabelului) și <tr>
<td> (coloanele tabelului). <td>randul 1 coloana 1 </td>
<td>randul 1 coloana 1 </td>
În mod prestabilit, un tabel nu are chenar vizibil. Pentru a adăuga un
</tr>
chenar unui tabel, se utilizează atributul border al etichetei <table> care
poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea <tr>
în pixeli a chenarului tabelului. <td>randul 2 coloana 1 </td>
Dacă atributul border nu este urmat de o valoare atunci chenarul <td>randul 2 coloana 2 </td>
tabelului va avea o grosime prestabilită egală cu 1 pixel, iar o valoare </tr>
egală cu 0 a atributului border semnifică absenţa chenarului. Când <tr>
atributul border are o valoare nenulă chenarul tabelului are un aspect <td>randul 3 coloana 1 </td>
tridimensional. <td>randul 3 coloana 2 </td>
</tr>
<tr>
<td>randul 4 coloana 1 </td>
<td>randul 4 coloana 2 </td>
</tr>
Fără atributul border </table>
cu atributul border
 Tabele (titlul) în HTML
Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption>. Această etichetă trebuie
plasată în interiorul etichetelor <table> ... </table>, dar nu în interiorul etichetelor <TR> sau <TD> și
poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:

• bottom - sub tabel

• top - deasupra tabelului
• left - deasupra, la stânga tabelului
• right - deasupra, la dreapta tabelului

<table border><caption align="top">Masini

<tr>
<td>Mercedes </td>
<td>citroen </td>
<td>jaguar </td> </tr>
<tr>
<td>bmw </td>
<td>volvo </td>
<td>renault </td> </tr>
</table>
 Tabele (capul tabelei) în HTML
Un tabel poate avea celule cu semnificaţia de cap de tabel introduse de eticheta <th> (tabel
header=cap de tabel) în loc de <td>.
Toate atributele care pot fi ataşate etichetei <td> pot fi de asemenea ataşate şi etichetei <th>.
Conţinutul celulelor definite cu <th> este scris cu caractere aldine (bold) şi centrat.
<H1 align="center">Capul de tabel</H1><HR><P>
<TABLE border><CAPTION align="bottom">Preturi masini
<TR> <TH>Pret </TH>
<TH>Citroen </TH>
<TH>Jaguar </TH>
<TH>BMW </TH>
<TH>Volvo </TH> </TR>
<TR> <TH>Dolari </TH>
<TD>5000 </TD>
<TD>100000 </TD>
<TD>50000 </TD>
<TD>80000 </TD> </TR>
<TR> <TH>Viteza </TH>
<TD>250 </TD>
<TD>100 </TD>
<TD>150 </TD>
<TD>180 </TD> </TR>
</TABLE>
 Tabele cu imagini în HTML
Tagul <img>... </img> permite a adăuga o imagine care are două atribute necesare:
src - specifică adresa URL a unei imagini
alt - specifică un text alternativ pentru o imagine <table border="4">
hspace - spaţiul liber din partea dreaptă şi stângă a imaginii <tr>
vspace - spaţiul liber din partea de jos şi de sus a imaginii <td><img src="img.jpg" alt="La mare"></td>
<td><img src="img2.jpg"></td>
Tabel cu două linii şi două coloane, celulele tabelului </tr>
având drept conţinut imagini. <tr>
<td><img src="img.jpg"></td>
<table border="4">
<td><img src="img4.jpg"></td>
<tr>
<td><img src="img1.jpg"></td> </tr>
<td><img src="img2.jpg"></td> </table>
</tr>
<tr>
<td><img src="img3.jpg"></td>
<td><img src="img4.jpg"></td>
</tr>
</table>
Dacă un tabel are celule fără conţinut (celule vide), atunci ele vor apărea în
tabel fără un chenar de delimitare. Pentru a afişa un chenar pentru celulele vide:
• după eticheta <td> se adaugă &nbsp;
• după eticheta <td> se adaugă <br>
 Tabele (aliniere) în HTML
Pentru a alinia un tabel se utilizează atributul align al etichetei <table> cu valorile posibile:
• left (valoarea prestabilită) - textul care urmează după punctul de înserare al tabelului va fi
dispus în partea dreaptă a tabelului.
• center - textul care urmează după punctul de înserare al tabelului va fi afişat pe toată
lăţimea paginii, imediat sub tabel.
• right - textul care urmează după punctul de înserare al tabelului va fi dispus în partea stângă
a tabelului.
<table border="3" align="left">
<table border="3" align="center">

<table border="3" align="right">

 Tabele (aliniere) în HTML
Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul atributelor
width şi height ale etichetei <table> valorile cărora pot fi:
• numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;
• numere întregi între 1 şi 100, urmate de semnul %, reprezentând procente din lăţimea şi
înălţimea totală a paginii.
Tabel cu lungimea de 70% din pagină și înălțimea de 20%
<TABLE border width="70%" height="20%">
Tabel cu lungimea de 500 din pagină și înălțimea de 120 de pixeli
<TABLE border width="500" height="120">
 Tabele (spațierea celulelor) în HTML
Distanţa dintre două celule vecine se defineşte
cu atributul cellspacing al etichetei <table>.
Valorile atributului pot fi numere întregi
pozitive, inclusiv 0, şi reprezintă distanţa în pixeli
dintre două celule vecine. Valoarea prestabilită
a atributului cellspacing este de 2 pixeli.
Tabel cu bordură de 3 pixeli și distanța dintre celule de 10 pixeli
<TABLE border="3" cellspacing="10">
Distanţa dintre marginea unei celule şi
conţinutul ei poate fi definită cu ajutorul
atributului cellpadding al etichetei <table>.
Valorile atributului pot fi numere întregi
pozitive, şi reprezintă distanţa în pixeli dintre
marginile celulei şi conţinutul ei. Valoarea
prestabilită a atributului cellpadding este 1 pixel.
Tabel cu bordură de 1 pixel și distanța dintre marginile celulei și
conținut de 10 pixeli
<TABLE border cellpadding="20">
 Tabele (dimensionarea celulelor) în HTML
Dimensiunile unei celule de tip <td> sau de tip <th> pot fi stabilite cu ajutorul a două atribute width
pentru lăţime şi height pentru înălţime cu valorile posibile:
• numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în pixeli a lăţimii, respectiv a
înălţimii unei celule;
• procente din lăţimea, respectiv înălţimea tabelului.
<table border>
<tr>
<td width="20%" height="75%">celula 11 </td>
<td>celula 12 </td> </tr>
<tr>
<td>celula 21 </td>
<td>celula 22 </td> </tr>
</table>

Celula 11 la lăţimea de 20% din lăţimea tabelului și înălţimea egală cu 75% din înălţimea lui.
Dimensionarea individuală a unei celule va afecta dimensionarea tuturor celulelor din linia și
coloana din care face parte celula respectivă.
Se observă că celula 12 are lăţimea egală cu restul de 80% din lăţime.
 Tabele (alinierea conţinutului celulei) în HTML
Alinierea pe orizontală a conţinutului Alinierea pe verticală a conţinutului unei celule se
unei celule se face cu atributul align care face cu atributului valign care poate lua valorile:
poate lua valorile: baseline - la bază
left - la stânga bottom - jos
center - centrat, valoarea prestabilită middle - la mijloc, valoarea prestabilită
right - la dreapta top - sus
<table border width="50%" height="80%">
<tr align="right">
<td>dreapta </td>
<td>dreapta </td> </tr>
<tr align="center">
<td>centru </td>
<td>centru </td> </tr>
<tr valign="bottom">
<td valign="top">sus </td>
<td>jos </td> </tr>
<tr align="left">
<td>stanga </td>
<td>stanga </td> </tr>
</table>
 Tabele (culori) în HTML
Culoarea de fond a unui tabel se stabileşte cu ajutorul atributului bgcolor, care poate fi ataşat:
• întregului tabel prin eticheta <table>
• unei linii prin eticheta <tr>
• unei celule de date prin eticheta <td>
Valorile pe care le poate primi atributul bgcolor sunt cele cunoscute pentru culori. Dacă într-un
tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este, în ordine descrescătoare:
<td>, <tr>, <table> (prioritatea cea mai mica).
<table border="5" bgcolor="lime">
<tr>
<td>celula 11 verde </td>
<td bgcolor="red">celula 12 rosu </td> </tr>
<tr bgcolor="blue">
<td>celula 21 albastru </td>
<td bgcolor="yellow">celula 22 galben </td> </tr>
<tr bgcolor="cyan">
<td>celula 31 cyan </td>
<td>celula 32 cyan </td> </tr>
<tr>
<td>celula 41 verde </td>
<td bgcolor="white">celula 42 alb </td> </tr>
</table>
 Tabele (imagine ca fundal) în HTML
Un tabel poate avea drept fundal o imagine. Efectul se obţine folosind atributul background al
etichetei <table>. Atributul primește ca valoare adresa URL a imaginii. Atributul background poate fi
ataşat şi unei linii, stabilind fundalul tuturor celulelor din linia respectivă precum şi unei celule
individuale, în acest caz stabilind fundalul acelei celule.

<title>tabel</title>
</head>
<body>
<h1 align="center">Imagine fundal</h1><hr>
<table border="5" width="200" height="120"
background="img.png">
<tr>
<td>celula 11 </td>
<td>celula 12 </td> </tr>
<tr>
<td>celula 21 </td>
<td>celula 22 </td> </tr>
</table>
 Tabele (extinderea celulelor) în HTML
Când dorim ca o celulă să se extindă peste <table border>
<tr>
celulele vecine, pe orizontală sau pe verticală <td rowspan="3">celula 11<br>celula 21<br>celula 31 </td>
obţinând o singură celulă cu suprafaţa egală <td>celula 12 </td>
cu suma suprafeţelor celulelor iniţiale. Acest <td colspan="2" rowspan="3">celula 13 , celula 14<br>
lucru se poate realiza cu ajutorul atributelor celula 23, celula24<br>
celula 33, celula 34 </td></tr>
colspan şi rowspan ale etichetelor <td> şi <th>. <tr>
colspan - realizează extinderea unei celule <td>celula 22 </td></tr>
peste celulele din dreapta ei, valoarea <tr>
<td>celula 32 </td></tr>
atributului determinând numărul de celule <tr>
care se unifică. <td>celula 41 </td>
rowspan - realizează extinderea unei celule <td colspan="3">celula 42, celula 43, celula 44 </td></tr>
peste celulele de sub ea valoarea atributului </table>
determinând numărul de celule care se
unifică.
Sunt posibile extinderi simultane ale unei
celule pe orizontală şi pe verticală, în
etichetele <td> sau <th> vor fi prezente
ambele atribute colspan şi rowspan.
 Tabele (grupuri) în HTML

Etichetele <colgroup>...</colgroup> permit definirea unui grup de coloane într-un tabel cu

atributele:
span - numărul de coloane dintr-un grup
width - o lăţime unică pentru coloanele din grup
align - un tip unic de aliniere pentru coloanele din grup
Exemplu: <colgroup span="3" width="100"></colgroup> - grup de trei coloane, fiecare cu
lăţimea de 100 de pixeli.

Într-un bloc <colgroup>, coloanele pot avea configurări diferite dacă se utilizează eticheta
<col>, care admite atributele:
span - identifică acea coloană din grup pentru care se face configurarea. Dacă lipseşte, atunci
coloanele sunt configurate în ordine.
width - determină lăţimea coloanei identificate prin span.
align - determină alinierea conţinutului coloanei identificate prin span.
 Tabele (grupuri) în HTML

<TABLE border width="420" height="200">

<COLGROUP>
<COL width="60" align="left">
<COL width="120" align="center">
<COL width="180" align="right">
</COLGROUP>
<TR>
<TD valign="top">celula 11
<TD>celula 12 </TD>
<TD valign="bottom">celula 13 </TD>
<TD>celula 14 </TD>
</TR>
<TR>
<TD>celula 21 </TD>
<TD>celula 22 </TD>
<TD>celula 33 </TD>
<TD>celula 34 </TD>
</TR>
</TABLE>
 Tabele (grupuri) în HTML

<html>
<body>
<table width="400" cellspacing="0" border="1">
<col width="100">
<col span="2" width="50" align="center">
<col span="3" width="75" align="center">
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td><td>1998</td><td>1998</td> </tr>
<tr>
<td>xxx</td><td>5</td><td>7</td><td>2</td><td>8</td><td>7</td> </tr>
<tr>
<td>yyy</td><td>3</td> <td>6</td><td>4</td><td>6</td><td>9</td> </tr>
<tr>
<td>zzz</td><td>5</td><td>8</td><td>3</td><td>4</td><td>6</td> </tr>
</table>
</body>
</html>
 Tabele în HTML

Se va realiza lucrarea de laborator nr.4

 Imagini în HTML
Hărțile de imagini permit declararea unor zone din imagine ca legături către alte pagini web.
• src fîșierul sau adresa fîșierului imagine
• usemap are valoarea de genul #name care este folosit în interiorul etichetei map
Eticheta <map> este utilizată pentru a defini o hartă a imaginii din partea clientului. O
imagine-hartă este o imagine cu zone cu clic.
Atributul name al elementului <map> este asociat cu atributul de utilizator <img> și creează o
relație între imagine și hartă.

Zona sau zonele conținute de hartă sunt introduse prin
eticheta <area> cu atributele obligatorii:
• shape - forma ariei declarate cu valorile:
o rect - dreptunghiulară,
o circle - circulară,
o poly - poligonală,
o default - alte forme (diferite de cele anterioare)
• coords - coordonatele zonei
• href - adresa paginii destinație a legăturii
✓ Originea coordonatelor este colțul
stânga sus al imaginii.
✓ Aria rectangulară (rect) se declară
prin coordonatele colțului stânga sus și
colțul dreapta jos.
✓ Aria circulară (circle) se declară prin
coordonatele centrului și raza.
✓ Aria poligonala (poly) se declară prin
coordonatele fiecarui colt.
 Imagini în HTML

<img src="planets.gif" width="145„ height="126" alt="Planets„

usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
</map>
 Imagini în HTML

Exemplu: o harta de imagini care contine 5 zone

<html>
<head>
<title>Exemplul </title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="pag1.html">
<area shape="rect" coords="20,90,120,140" href="pag2.html">
<area shape="circle" coords="200,80,30" href="pag3.html">
<area shape="circle" coords="200,80,60" href="pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="pag3.html">
</map>
</body>
</html>
 Imagini în HTML
Exemplu: o harta de imagini care contine 7 zone
<html>
<head>
<title>Exemplul </title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta1.gif" usemap="#harta" width="250" height="160" border="0">
<map name="harta">
<area shape="rect" coords="50,50,90,90" href="pag1.html">
<area shape="circle" coords="70,70,60" href="pag2.html">
<area shape="rect" coords="10,140,240,150" href="pag3.html">
<area shape="poly" coords="140,10,140,130,180,130" href="pag2.html">
<area shape="circle" coords="210,40,20" href="pag1.html">
<area shape="rect" coords="180,10,240,70" href="pag3.html">
<area shape="poly" coords="190,90,240,90,240,130" href="pag2.html">
</map>
</body>
</html>