U5 PDF

UNITATEA DE ÎNVĂȚARE NR.
5
Tabele. Crearea tabelelor în HTML
Cuprins:
5.1 CREAREA TABELELOR ......................................................................... 60

5.2 ATRIBUTELE TABELELOR ................................................................... 63
5.3 ATRIBUTELE CELULELOR ................................................................... 71
5.4 APLICAȚII .................................................................................................. 80
Obiective
Însuşirea noţiunilor generale despre inserarea tabelelor în pagini web.
Înțelegerea atributelor tabelelor, a celulelor acestora și a modalităților de
formatare
Utilizarea tabelelor și a importanței acestora în proiectarea paginilor web.
Timp alocat:1 oră
5.1 Crearea tabelelor
Prezentarea datelor sub formă de tabele are importante avantaje atât prin
claritate şi sistematizare cât şi prin posibilităţile de comparare oferite. Deşi tabelele
pot fi construite în HTML şi prin aranjarea directă a datelor, din tastatură şi
utilizarea unui font neproportional (sau formatul PRE), există taguri dedicate cu
ajutorul cărora tabelele pot fi formatate aproape la nivelul similar din procesoarele
de texte.
Una din cele mai puternice unelte folosite în proiectarea paginilor de web
este tabelul. Utilizarea tabelelor permite aranjarea textului şi a imaginilor pe mai
multe linii şi coloane.
La crearea unui tabel, tagul HTML corespunzător este <TABLE>. Pentru
ca celulele tabelului să aibă chenare se foloseşte parametrul BORDER, cu ajutorul
căruia se precizează grosimea în pixeli a liniilor care formează chenarele.
O nouă linie în tabel se creează cu ajutorul tag-ului <TR>. O linie conţine
una sau mai multe “celule”, care trebuie specificate prin tag-ul <TD>. Acest tag se
poate înlocui cu antetul de linie stabilit prin tag-ul <TH>. Conţinutul celulelor
definite cu <th> este scris cu caractere aldine şi centrat. O celulă este o regiune
dreptunghiulară a ecranului care poate conţine text, imagini şi aproape orice
altceva.
De exemplu un tabel se contruieste astfel:
60
<html>
<head><title>Tabel</title>
</head>
<body>
<h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1>
<hr>
<table border =”1”>
<tr>
<td>cell 11
<td>cell 11
<tr>
<td>cell 21
<td>cell 22
<tr>
<td>cell 31
<td>cell 32
<tr>
<td>cell 41
<td>cell 42
</table>
</body>
</html>
Figura 7.1 - Tabel format din 4 linii şi 2 coloane
61
Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <CAPTION> (de
la "table caption" =titlu tabel )
Această etichetă trebuie plasată în interiorul etichetelor
<TABLE>...</TABLE>, dar nu în interiorul etichetelor <TR> sau <TD>. Titlul
unui tabel poate fi aliniat cu ajutorul atributului ALIGN al etichetei <CAPTION>
care poate lua una dintre valorile prezentate în tabelul de mai jos:
Valoare Efecte
“bottom” Afişează titlul sub tabel
“Top” Afişează titlul deasupra tabelului
“left” Afişează titlul la stânga tabelului
“Right” Afişează titlul la dreapta tabelului
Exemplu:
<html>
<head>
<title>Titlul unui tabel</title>
</head>
<body>
<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10
BGCOLOR="#ADEADA" ALIGN=center>
<CAPTION ALIGN=top>Tabelul I </CAPTION>
<TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR>
<TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR>
</TABLE>
</body>
</html>
Figura 7.2 – Titlul unui tabel

62
5.2 Atributele tabelelor
Sintaxa completă a tag-ului <TABLE> este:
<TABLE [ BORDER] [ FRAME] [ RULES] [ WIDTH] [ HEIGHT]

[BGCOLOR] [ BORDERCOLOR] [ BORDERCOLORLIGHT] [
BORDERCOLORDARK] [ BACKGROUND] [ CELLSPACING] [
CELLPADDING] [ ALIGN] [ VALIGN]>
continut-tabel
</TABLE>
 Atributul BORDER. In mod prestabilit, un tabel nu are chenar.

Pentru a adăuga un chenar unui tabel, se utilizează un atribut al etichetei <TABEL>
numit BORDER.
Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi
reprezintă grosimea în pixeli a chenarului tabelului.
Dacă atributul BORDER nu este urmat de o valoare atunci tabelul va avea
o grosime prestabilită egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică
absenţa chenarului. Cand atributul border are o valoare nenulă chenarul unui tabel
are un aspect tridimensional.
 Atributul FRAME specifică afişarea bordurilor exterioare. Atributul

BORDER trebuie să fie prezent. Aceasta este o extensie Microsoft.. Acest atribut
poate lua următoarele valori:
 void - fără bordură exterioară;
 above - chenar sus;
 below - chenar jos;
 hsides - chenar sus si jos;
 vsides - chenar stânga si dreapta;
 lhs - chenar stânga;
 rhs - chenar dreapta;
 box - chenar complet.
 Atributul RULES controlează afişarea liniilor interioare în cazul când

se utilizează TBODY, TFOOT şi THEAD (vezi în continuare). Atributul BORDER
trebuie să fie prezent. Aceasta este o extensie Microsoft. Atributul RULES poate
lua valorile:
 none - nu se afişează linii interioare;
 groups - afişează linii între grupurile tabelului;
 rows - afişează linii între linii;
 cols - afişează linii între coloane;
 all - afişează toate liniile interioare.
63
Exemplu:
<html>
<head>
<title>Untitled Document</title>
</head>
<body><h1 align=center>Atributele frame si rules</h1>
<table width="400" frame=box rules=rows cellspacing=10>
<tr> <td>cell 11 <td>cell 12<td>cell 13
<tr> <td>cell 21 <td>cell 22<td>cell 23
</table>
</body>
</html>
Figura 7.1.1 – Atributele FRAME şi RULES ale tabelelor
 Atributete WIDTH şi HEIGHT comandă lăţimea respectiv înăţimea

tabelului. Valorile acestor atribute pot fi:
 numere întregi pozitive reprezentând lăţimea respectiv înălţimea în
pixeli a tabelului;
64
 numere întregi între 1 şi 100, urmate de semnul %, reprezentând
fracţiunea din lăţimea şi înălţimea totală a paginii.
Exemplu:
<html>
<head>
<title>Dimensiunile tabelului</title>
</head>
<body>
<h1 align=center>
Un tabel de de 200 pixeli X 50 %</h1><hr>
<table border width="200" height="50%">
<tr> <td>cell 11 <td>cell 12
<tr> <td>cell 21 <td>cell 22
</table>
</body>
</html>
Figura 7.1.2 – Stabilirea dimensiunilor unui tabel
 Atributul BGCOLOR este culoarea pentru fundalul tabelului.

Culoarea de fundal este acoperită, evident, de culoarea declarată ca fundal pentru
65
linii (vezi TR), care este acoperită de culoarea declarată ca fundal pentru celule
(vezi TH şi TD). Deci, dacă în tabel sunt definite mai multe atribute BGCOLOR,
atunci prioritatea este următoarea: <TD>, <TR>, <TABLE> ( cu prioritate cea mai
mică).
 Atributul BORDERCOLOR este culoarea bordurii tabelului. Aceasta

este o extensie Microsoft;
 Atributul BORDERCOLORLIGHT este culoarea liniei luminoase

dintr-o bordură umbrită. Aceasta este o extensie Microsoft;
 Atributul BORDERCOLORDARK este culoarea umbrei dintr-o

bordură umbrită. Aceasta este o extensie Microsoft;
 Atributul BACKGROUND specifică adresa URL a fişierului imagine

utilizat drept fundal pentru fiecare celulă a tabelului. Aceasta este o extensie
Microsoft;
 Atributul CELLSPACING arată spaţierea, în pixeli, dintre celule.

Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă
distanţa în pixeli dintre două celule vecine.
Valorea prestabilită a atributului cellspacing este 2.
Exemplu:
<html>
<head>
<title>Spatiu dintre celule</title>
</head>
<BODY>
<TABLE BORDER=5 CELLSPACING=6>
</TABLE>
</BODY>
</html>
66
Figura 7.1.3 - Spaţierea între celule
 Atributul CELLPADDING arată spaţierea, în pixeli, dintre marginile

celulei şi conţinutul ei. Valorile acestui atribut pot fi numere întregi pozitive, şi
reprezintă distanţa în pixeli dintre celule şi conţinutul ei.
Valorea prestabilită a atributului cellpadding este 1.
Exemplu:
<html>
<head>
<title>Spatiu intre margini si continut</title>
</head>
<BODY>
<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10>
</TABLE>
</BODY>
</html>
67
Figura 7.1.4 – Distanţa dintre continut şi marginile celulelor
 Atributul ALIGN. Se foloseşte pentru a alinia un tabel într-o pagină

Web şi are următoarele valori posibile: " left " ( valoarea prestabilită ), " center " şi
"right ".
Alinierea este importantă pentru textul ce înconjoară tabelul. Astfel :
 dacă tabelul este aliniat stânga (<table align="left">), atunci
textul care urmează după punctul de inserare al tabelului va fi dispus în partea
dreaptă a tabelului.
 dacă tabelul este aliniat dreapta (<table align="right">), atunci
textul care urmează după punctul de inserare al tabelului va fi dispus în partea
stângă a tabelului.
 dacă tabelul este aliniat pe centru (<table align="center">), atunci
textul care urmează după punctul de inserare al tabelului va fi afişat pe toată
lăţimea paginii, imediat sub tabel.
Exemplu:
<html>
<head>
<title>Alinierea tabelelor</title>
</head>
<body>
68
<h1 align=center>Un tabel aliniat la dreapta</h1>
<hr>
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
Text inainte de tabel. Text inainte de tabel.
<table border align="right">
<tr>
<td>cell 11
<td>cell 11
<tr>
<td>cell 21
<td>cell 22
</table>
Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.
Text dupa tabel.Text dupa tabel.
</body>
</html>
Figura 7.1.5 - Alinierea tabelelor pe orizontală
 Atributul VALIGN arată alinierea verticală a tabelului. Alinierea pe

verticală a conţinutului unei celule se face cu ajutorul atributului VALIGN care
poate lua valorile:
 " baseline " (la bază);
 " bottom " (jos);
 " middle " (la mijloc, valoarea prestabilită);
 " top " (sus).
69
Aceste atribute pot fi ataşate atât etichetei <tr> pentru a defini alinierea
tuturor elementelor celulelor unui rănd, cât şi etichetelor <td> şi <th> pentru a
stabili alinierea textului într-o singură celulă.
Exemplu:
<html>
<head>
<title>Alinierea pe verticala a unui tabel</title></head>
<BODY>
ALIGN=center BORDERCOLOR=green VALIGN=bottom
BORDERCOLORDARK=maroon >
</TABLE>
</BODY></html>
Figura 7.1.6 - Alinierea tabelelor pe verticală
70
5.3 Atributele celulelor
a) Linii în tabele. Sintaxa tag-ului <TR> este următoarea:
<TR [ALIGN] [VALIGN] [BGCOLOR] [BORDERCOLOR]

[BORDERCOLORLIGHT] [BORDERCOLORDARK] [
BACKGROUND "]>
["continut-linie"]
[</TR>]
Acest tag trebuie să fie scufundat în tagul <TABLE> şi anume fiecare linie
a tabelului care se vrea marcat trebuie să aibă corespondent un tag <TR>.
 Atributul ALIGN precizează modul în care conţinutul celulelor liniei

se va alinia orizontal în interiorul celulelor;
 Atributul VALIGN precizează modul în care conţinutul celulelor se

va alinia vertical în interiorul celulelor;
 Atributul BGCOLOR indică fondul colorat al liniei;
 Atributul BORDERCOLOR este culoarea bordurii celulelor;.
 Atributul BORDERCOLORLIGHT este culoarea liniei luminoase

dintr-o bordură umbrită a celulelor;
 Atributul BORDERCOLORDARK este culoarea umbrei dintr-o

bordură umbrită a celulelor;
 Atributul BACKGROUND specifică adresa URL a fişierului imagine

utilizat drept fundal pentru fiecare celulă a liniei.
În exemplul următor se vede cum setările generale de aliniere şi culoare,
pentru întregul tabel, sunt înlocuite de cele precizate pentru o linie (cea de antet).
<html>
<head>
<title>Formatarea liniilor tabelelor</title>
</head>
<body>
BGCOLOR="#CCFFFF" ALIGN=center>
<CAPTION ALIGN=bottom>Tabel</CAPTION>
<TR BGCOLOR="#3399FF" ALIGN=right>
<TH>Coloana 1</TH>
71
<TH>Coloana 2</TH>
</TR>
<TR>
<TD>Celula 1.1</TD>
<TD>Celula 1.2</TD>
</TR>
<TR bordercolor="#0033FF" align=center>
<TD>Celula 2.1</TD>
<TD>Celula 2.2</TD>
</TR>
</TABLE>
</body>
</html>
Figura 7.2.1 Formatarea liniilor unui tabel
b) Coloane şi capete de coloane. Sintaxa tag-urilor <TD> respectiv <TH>

este:
<TH sau TD [ALIGN] [VALIGN] [BACKGROUND] [COLSPAN]
[ ROWSPAN] [BGCOLOR] [BORDERCOLOR] [BORDERCOLORLIGHT]
[BORDERCOLORDARK] [ NOWRAP] [WIDTH][HEIGHT]
["continut-celula"]
[</TH sau /TD>]
72
Conţinutul celulei va fi evidenţiat, în general, prin scriere şi centrare.
 Atributele BGCOLOR, BACKGROUND, BORDERCOLOR,

BORDERCOLORLIGHT, BORDERCOLORDARK precizează fundalul şi
culorile bordurilor celulei (vezi TABLE, TR).
 Atributele ALIGN, VALIGN indică alinierea orizontală şi verticală,

în celulă, a conţinuului celulei;
Exemplu:
<html>
<head>
<title>Scrierea in celule</title></head>
<body>
BGCOLOR="#FFFFCC" ALIGN=center width="300" height="100">
<CAPTION ALIGN=top>Tabel </CAPTION>
<TR>
<TH align="center">Coloana 1</TH>
<TH align="center">Coloana 2</TH></TR>
<TR>
<TD align="right" valign="bottom">Celula 1.1</TD>
<TD align="right" valign="top">Celula 1.2</TD></TR>
<TR>
<TD align="center" valign="middle">Celula 2.1</TD>
<TD align="left" valign="top">Celula 2.2</TD></TR>
</TABLE></body></html>
Figura 7.2.2 – Alinierea textului în celulele tabelelor

73
 Atributul COLSPAN specifică numărul de coloane peste care se
întinde celula spre dreapta (operaţiunea de unificare a celulelor pe orizontală din
procesoarele de texte);
Exemplu:
<html>
<head>
<title>Coloane unite</title></head>
<body>
BGCOLOR="#FFCCFF">
<TR BGCOLOR=lightyellow>
<TH COLSPAN=2 ALIGN=right> TABEL</TH></TR>
<TR BGCOLOR="#FF9933" ALIGN=right>
<TH>Coloana 1</TH> <TH>Coloana 2</TH></TR>
<TR> <TD>Celula 1.1</TD> <TD>Celula 1.2</TD></TR>
<TR> <TD>Celula 2.1</TD> <TD>Celula 2.2</TD></TR>
</TABLE>
</body></html>
Figura 7.2.3 - Coloane unite

74
 Atributul ROWSPAN specifică numărul de linii peste care se întinde
celula în jos (operaţiunea de unificare a celulelor pe verticală din procesoarele de
texte);
În coloanele/liniile peste care s-au extins alte celule, extensiile nu se mai
declară. Pentru aceste coloane/linii se vor declara doar celulele care apar aici
pentru prima dată (este ca si cum unele celule se obţin prin moştenirea unor
linii/coloane anterioare).
Sunt posibile extinderi simultane ale unei celule pe orizontală şi pe
verticală. În acest caz , în etichetele <TD> şi <TH> vor fi prezente ambele atribute
COLSPAN şi ROWSPAN.
Exemplu:
<html>
<head><title>Unirea liniilor</title></head>
<body>
BGCOLOR="#FFFFCC">
<TR> <TH ROWSPAN=2>TABEL<BR> cu linii unite</TH>
<TH>Linia 1</TH><TD>Celula 1.1</TD></TR>
<TR> <TH>Linia 2</TH> <TD>Celula 2.1</TD></TR>
</TABLE>
</body></html>
Figura 7.2.4 – Unirea liniilor unui tabel

75
 Atributele WIDTH şi HEIGHT stabilesc lăţimea respectiv înălţimea
unei celule.
Valorile posibile ale acestor atribute sunt:
 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.
Exemplu:
<html>
<head><title>Dimensiunea celulelor</title></head>
<body>
<h1 align=center>Un tabel cu celule de diferite dimensiuni</h1><hr>
<table border>
<tr> <td width="100" height="50">cell 11
<td width="150" height="50">cell 11
<tr> <td width="100" height="100">cell 21
<td width="150" height="100">cell 22
</table>
</body></html>
Figura 7.2.5 – Stabilirea dimensiunilor celulelor unui tabel
76
 Atributul NOWRAP anulează defilarea textului din celulă pe mai
multe linii.
Exemplu:
<html>
<head>
<title>Tabel cu celule de latime mare</title>
</head>
<body>
<h1 align=center>Un tabel cu celule de latime mare</h1><hr>
<table border>
<tr>
<td>cell 11
<td>cell 12
<tr>
<td nowrap>cell 21
<td>cell 22 este foarte lata,aceasta celula este foarte lata.
</table>
</body>
</html>
Figura 7.2.6 – Anularea defilării textului dintr-o celulă pe mai multe linii
77
Dacă un tabel are celule vide, atunci aceste celule vor apărea în tabel fără
un chenar de delimitare.
În scopul de a afişa un chenar pentru celule vide se utilizează următoarele
trucuri:
 după <TD> se pune ;
 după <TD> se pune <BR>.
Caracterul (no break space) este de fapt caracterul spaţiu. Un
spaţiu introdus prin intermediul acestui caracter nu va fi ignorat de browser.
Exemplu:
<html>
<head><title>Celule vide</title></head>
<body>
<h1 align=center>Un tabel cu celule vide</h1><hr>
<table border>
<tr>
<td>cell 11 <td>cell 12 <td>cell 13
<tr>
<td> <td> <td>
</table>
</body></html>
Figura 7.2.7 – Celule vide

78
Conţinutul unui tabel poate fi împărţit în subblocuri prin elementele:
 <THEAD><TR><TD>...</THEAD> ( un singur rând );
 <TFOOT><TR><TD>...</TFOOT> ( un singur rând );
 <TBODY><TR><TD>...</TBODY> ( oricâte rânduri );
Într-un tabel există un singur subbloc de tipul <THEAD> şi un singur
subbloc de tipul <TFOOT>, dar pot exista mai multe subblocuri de tip <TBODY>.
c) Grupuri de coloane. Blocul <COLGROUP>...</COLGROUP> permite

definirea unui grup de coloane. Atributele acceptate de <COLGROUP> sunt:
 SPAN determină numarul de coloane dintr-un grup;

 WIDTH determină o lăţime unică pentru coloanele din grup;
 ALIGN determină un tip unic de aliniere pentru coloanele din grup.
Într-un bloc <COLGROUP>, coloanele pot avea configurări diferite dacă

se utilizează elementul <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ă o lăţime pentru coloana identificată prin SPAN;
 ALIGN determină o aliniere pentru coloana identificată prin SPAN.
Exemplu:
<html>
<head><title>Grupuri de coloane</title></head>
<body>
<h1 align=center>Grupuri de coloane</h1><hr>
<table width="400" cellspacing=10 border>
<colgroup>
<col width="100" align=right>
<col width="100" align=center>
<col width="200" align=right>
</colgroup>
<tr>
<td valign=top>Text in prima coloana.Text in prima coloana.Text in
prima coloana. Text in prima coloana.
<td valign=middle>Text in coloana doua.Text in coloana doua.Text in
coloana doua.Text in coloana doua.
<td valign=bottom>Text in coloana a treia.Text in coloana a treia.Text
in coloana a treia.Text in coloana a treia.
</table>
</body></html>
79
Figura 7.2.8 – Grupuri de coloane
5.4 Aplicații
1.
<html>
<head>
<title>Tabele</title>
</head>
<body>
<table border=2>
<tr>
<th>Titlu 1</th>
<th>Titlu 2</th>
<th>Titlu 3</th>
</tr>
<tr>
<td>Casuta A</td>
<td>Casuta B</td>
<td>Casuta C</td>
80
</tr>
<tr>
<td>Casuta D</td>
<td>Casuta E</td>
<td>Casuta F</td>
</tr>
</table>
</body>
</html>
2.
<html>
<head>
<title>Tabele</title></head>
<body>
<table border=2>
<tr>
<th>Titlu 1</th>
<th>Titlu 2</th>
<th>Titlu 3</th>
</tr>
<tr>
<td rowspan=2>Casuta A & D</td>
<td>Casuta B</td>
<td>Casuta C</td>
</tr>
<tr>
81
<td>Casuta E</td>
<td>Casuta F</td
</tr>
</table>
</body>
</html>
3.
<html>
<head>
<title>Exemplul 1</title></head>
<body>
<TABLE align="center" BORDER=2 bordercolor="#000000">
<CAPTION ALIGN=top>CULORI</CAPTION>
<TR>
<TD BGCOLOR=blue COLSPAN=2>albastru</TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD BGCOLOR=yellow COLSPAN=2>galben</TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD BGCOLOR=red COLSPAN=2>rosu</TD>
82
</TR>
</TABLE>
</body>
</html>
4.
<html>
<head>
<title>Exemplul 2</title></head>
<body>
<table border = 2>
<tr>
<td bgcolor="#FFFFCC"><div align = "center">
Celula aceasta contine numai text.
Celula urmatoare contine numai o imagine.
</div>
</td>
<td><img src = "img1.jpg" height = 111 width = 199></td>
<td><div align = "center">
Aceasta celula contine si text <br> si o imagine. <br>
<img src="img2.jpg" height=138 width = 100>
</div>
</td>
</tr>
</table>
</body>
</html>
83
5.
<html>
<head><title>Dimensionarea celulelor</title>
</head>
<BODY bgcolor="#FFCCCC" text="#CC0000">
<TABLE border = 1 width = 200 height = 50>
<tr><td width = 25%> Celula mica </td>
<td width = 75%> Celula mare </td></tr>
</BODY></html>
84
6.
<html>
<head>
<title>Unire linii si coloane</title>
</head>
<body>
<TABLE BORDER = 5 ALIGN = CENTER WIDTH = 300 HEIGHT =
30%>
<CAPTION ALIGN=TOP> <b> TABEL 1 </b>
<TR>
<TH> COL1 <TH> COL2 <TH> COL3 <TH> COL4
<TR HEIGHT = 40>
<TD ALIGN = RIGHT VALIGN = TOP> 1.1
<TD ALIGN = CENTER VALIGN = BOTTOM> 1.2
<TD>&nbsp <TD> 1.4
<TR>
<TD ALIGN = CENTER COLSPAN = 3 ROWSPAN = 3 bgcolor =
#C6D5E6>
am unit 3 coloane si 3 randuri
<TD ALIGN = LEFT VALIGN = BOTTOM> 2.4
</TABLE>
</body>
</html>
85
7.
<html>
<head><title>Formatare tabel</title></head>
<body>
<TABLE border = 2>
<tr>
<td rowspan = 5 align = "center" valign = "middle" width = 50>
<b>L<br>U<br>C<br>E<br>A<br>F<br>A<br>R<br>U<br>L</b>
<td clospan = 2><div align = "center">
<font size = 6><b> Luceafarul </b></font></div> </td></tr>
<tr>
<td><I> A fost odata ca-n povesti <br>
A fost ca niciodata<br>
Din rude mari imparatesti <br>
O prea frumoasa fata.</I>
</td>
<td><I> Si era una la parinti <br>
Si mandra-n toate cele<br>
Cum e fecioara intre sfinti <br>
Si luna intre stele.</I>
</td></tr>
</TABLE>
</body></html>
86
8.
<html>
<head> <title> TABELE </title><head>
<body bgcolor=lightblue>
<h1 align=center> <font color=blue>TABEL </font></h1>
<font size=2 color=red> Un tabel ce cuprinde mai multe elemente</font>
<table border=5 align=center bgcolor=yellow width=300 height=30%>
<caption align=top> TABEL 1
<tr> <th> COL.1 <th> COL.2 <th> COL.3 <th> COL.4
<tr height=40>
<td align=right valign=top> 1.1
<td align=center valign=bottom> 1.2
<td> <td> 1.4
<tr>
<td align=center colspan=3 rowspan=2 bgcolor=red> 2.1<br>3.1
<td align=left valign=bottom> 2.4
<br><br>
</table>
Un alt tabel
<hr align=center width=800 >
<br>
<table align=right frame=box rules=cols cellspacing=10 >
<caption align=bottom> TABEL 2
<colgroup span=3 width=100 align=center>
<tr>
<td> Aici
<td align=right valign=top> textul este
<td align=left valign=bottom> scris diferit
<tr>
<td rowsspan=3 ><font color=red size=5> Avem trei randuri unite
</font>
<td>
<td>
<tr bgcolor=pink>
<td align=left> 1.1
<td align=center> 1.2
<td> 1.3
<tr bgcolor=orange height=60>
<td valign=bottom> 2.1
<td align=left valign=baseline> 2.2
<td align=left> 2.3
</table>
</body>
</html>
87
88

U5 PDF

Î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

U5 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

UNITATEA DE ÎNVĂȚARE NR.

5.1 CREAREA TABELELOR ......................................................................... 60

Timp alocat:1 oră

5.1 Crearea tabelelor

Figura 7.1 - Tabel format din 4 linii şi 2 coloane

Figura 7.2 – Titlul unui tabel

Sintaxa completă a tag-ului <TABLE> este:

<TABLE [ BORDER] [ FRAME] [ RULES] [ WIDTH] [ HEIGHT]

 Atributul BORDER. In mod prestabilit, un tabel nu are chenar.

 Atributul FRAME specifică afişarea bordurilor exterioare. Atributul

 Atributul RULES controlează afişarea liniilor interioare în cazul când

Figura 7.1.1 – Atributele FRAME şi RULES ale tabelelor

 Atributete WIDTH şi HEIGHT comandă lăţimea respectiv înăţimea

Figura 7.1.2 – Stabilirea dimensiunilor unui tabel

 Atributul BGCOLOR este culoarea pentru fundalul tabelului.

 Atributul BORDERCOLOR este culoarea bordurii tabelului. Aceasta

 Atributul BORDERCOLORLIGHT este culoarea liniei luminoase

 Atributul BORDERCOLORDARK este culoarea umbrei dintr-o

 Atributul BACKGROUND specifică adresa URL a fişierului imagine

 Atributul CELLSPACING arată spaţierea, în pixeli, dintre celule.

 Atributul CELLPADDING arată spaţierea, în pixeli, dintre marginile

 Atributul ALIGN. Se foloseşte pentru a alinia un tabel într-o pagină

Figura 7.1.5 - Alinierea tabelelor pe orizontală

 Atributul VALIGN arată alinierea verticală a tabelului. Alinierea pe

Figura 7.1.6 - Alinierea tabelelor pe verticală

a) Linii în tabele. Sintaxa tag-ului <TR> este următoarea:

<TR [ALIGN] [VALIGN] [BGCOLOR] [BORDERCOLOR]

 Atributul ALIGN precizează modul în care conţinutul celulelor liniei

 Atributul VALIGN precizează modul în care conţinutul celulelor se

 Atributul BGCOLOR indică fondul colorat al liniei;

 Atributul BORDERCOLOR este culoarea bordurii celulelor;.

 Atributul BORDERCOLORLIGHT este culoarea liniei luminoase

 Atributul BORDERCOLORDARK este culoarea umbrei dintr-o

 Atributul BACKGROUND specifică adresa URL a fişierului imagine

Figura 7.2.1 Formatarea liniilor unui tabel

b) Coloane şi capete de coloane. Sintaxa tag-urilor <TD> respectiv <TH>

 Atributele BGCOLOR, BACKGROUND, BORDERCOLOR,

 Atributele ALIGN, VALIGN indică alinierea orizontală şi verticală,

Figura 7.2.2 – Alinierea textului în celulele tabelelor

Figura 7.2.3 - Coloane unite

Figura 7.2.4 – Unirea liniilor unui tabel

Figura 7.2.5 – Stabilirea dimensiunilor celulelor unui tabel

Figura 7.2.7 – Celule vide

c) Grupuri de coloane. Blocul <COLGROUP>...</COLGROUP> permite

 SPAN determină numarul de coloane dintr-un grup;

Într-un bloc <COLGROUP>, coloanele pot avea configurări diferite dacă

 SPAN identifică acea coloană din grup pentru care se face

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