<
Tabele HTML
Unul dintre cele mai puternice instrumente de formatare a unui document o reprezintă utilizarea tabelelor; acordaţi atenţia cuvenită acestui capitol şi veţi avea doar de câştigat!
În limbajul HTML, crearea şi formatarea tabelelor este un proces destul de laborios, dar rezultatele sunt pe măsură. În linii mari, procesul de creare se desfăşoară în modul următor:
- se declară deschiderea unui tabel (tag-ul <TABLE>)
- se declară deschiderea unei linii de tabel (tag-ul <TR>, Table Row)
- se declară deschiderea unei celule (tag-ul <TD>)
- se indică conţinutul celulei
- se închide celula (</TD>)
- operaţiile privitoare la celule se repetă până la epuizarea celulelor din linia respectivă
- se închide linia de tabel (</TR>
- operaţiile privitoare la linii se repetă până la epuizarea liniilor tabelului
- se închide tabelul (</TABLE>)
Pare (şi este) destul de complicat! Stăpânind însă crearea tabelelor, intraţi în zona creatorilor de pagini web avansaţi. Tag-urile specifice tabelelor, mai multe decât cele enumerate până acum, oferă o foarte mare varietate de atribute de configurare.
<TABLE>...</TABLE> Table (Tabel)
Declară deschiderea unui tabel şi poate fi folosit împreună cu atributele:
ALIGN="LEFT | RIGHT" aliniere orizontală LEFT (stânga, implicit) sau RIGHT (dreapta)
VALIGN="TOP | BOTTOM" aliniere verticală TOP (sus, implicit) sau BOTTOM (jos)
Exemplul 5.1 editaţi sursa exemplului şi observaţi modificările
BORDER="x" specifică grosimea liniilor despărţitoare (implicit 0, none)
BORDERCOLOR="numeculoare | #rrggbb" specifică culoarea bordurii
BORDERCOLORDARK="numeculoare | #rrggbb" specifică culoarea zonei închise a bordurii
BORDERCOLORLIGHT="numeculoare | #rrggbb" specifică culoarea zonei deschise bordurii
BGCOLOR="numeculoare | #rrggbb" specifică culoarea fundalului tabelului
Exemplul 5.2 editaţi sursa exemplului şi observaţi modificările
BACKGROUND="numeimagine.extensie" specifică o imagine de fundal pentru tabel
CELLPADDING="x" specifică distanţa în pixeli între conţinutul celulei şi bordură (implicit 1)
CELLSPACING="x" specifică distanţa în pixeli între celulele tabelului (implicit 2)
Exemplul 5.3 editaţi sursa exemplului şi observaţi modificările
HEIGHT="x | %" specifică înălţimea tabelului în pixeli sau procente din înălţimea ecranului
WIDTH="x | %" specifică lăţimea tabelului în pixeli sau procente din lăţimea ecranului
NEEDS="x | %" specifică lăţimea minimă a tabelului în pixeli sau procente din lăţimea ecranului
Exemplul 5.4 editaţi sursa exemplului şi observaţi modificările
RULES="NONE | ROWS | COLS | ALL" specifică care dintre bordurile tabelului vor fi afişate: NONE (nici una, implicit), ROWS (chenarul tabelului şi liniile orizontale interioare), COLS (chenarul tabelului şi liniile verticale interioare), ALL (toate); opţiunea ALL nu mai trebuie precizată dacă specificăm o valoare pentru atributul BORDER
Exemplul 5.5 editaţi sursa exemplului şi observaţi modificările
<CAPTION>...</CAPTION> Caption (Titlul tabelului)
Acest tag ne permite să adăugăm un titlu tabelului; el poate fi folosit împreună cu atributul ALIGN="LEFT | CENTER | RIGHT | TOP | BOTTOM", care setează alinierea titlului pe orizontală: (LEFT | CENTER (implicit) | RIGHT) sau pe verticală: TOP (deasupra tabelului, implicit) sau sub tabel (BOTTOM). Unele browsere suportă atributul VALIGN="TOP | BOTTOM", (aliniere pe verticală), care are acelaşi efect ca şi opţiunile corespunzătoare ale atributului ALIGN.
Exemplul 5.6 editaţi sursa exemplului şi observaţi modificările
<COL>...</COL> Column (Coloană)
Se foloseşte împreună cu atributele:
ALIGN="LEFT | CENTER | RIGHT | JUSTIFY" setează alinierea conţinutului celulelor care compun coloana: LEFT (stânga, implicit), CENTER (centrat), RIGHT (dreapta), JUSTIFY (în cazul unor texte, acestea vor fi afişate cu ambele margini verticale drepte)
SPAN="x" setează numărul de coloane peste care va avea efect atributul ALIGN
Exemplul 5.7 editaţi sursa exemplului şi observaţi modificările
<TR>...</TR> Table Row (Rând al tabelului)
Defineşte o linie a tabelului şi poate fi folosit împreună cu atributele: ALIGN, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, VALIGN. Semnificaţia şi modul de utilizare al acestor atribute este identic cu cel descris la marcajul <TABLE>
<TD>...</TD> Table Data (Celulă)
Defineşte o celulă a tabelului şi poate fi folosit împreună cu atributele: ALIGN, VALIGN, BGCOLOR, BACKGROUND, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, HEIGHT, WIDTH. Semnificaţia şi modul de utilizare al acestor atribute este identic cu cel descris la marcajul <TABLE>. În plus, mai pot fi utilizate atributele:
COLSPAN="x" setează peste câte coloane se întinde celula (implicit 1)
ROWSPAN="x" setează peste câte linii se întinde celula (implicit 1)
NOWRAP liniile dintre celule nu mai pot fi "rupte" pentru a se potrivi lăţimea celulei; atenţie la utilizarea acestui atribut, pot rezulta celule excesiv de largi!
Exemplul 5.8 editaţi sursa exemplului şi observaţi modificările
<TH>...</TH> Table Heading (Celulă "Heading")
Similar cu <TD>, defineşte o celulă individuală de date, are aceleaşi atribute, cu diferenţa că textul este boldat şi aliniat centrat
Exemplul 5.9
Tips & Tricks: 
Tabelele cu borduri invizibile pot fi folosite pentru alinierea şi poziţionarea textelor
- Acelaşi tip de tabele poate fi utilizat pentru afişarea unor imagini de dimensiuni mari, care în mod normal au timpi mari de încărcare; imaginea este "decupată" şi părţile componente sunt afişate în celulele unor tabele. Metoda prezintă două avantaje: imaginile de dimensiuni mici se încarcă mult mai repede şi porţiuni ale paginii care ar fi devenit inutilizabile prin afişarea unei imagini mari (ştiut fiind că paginile HTML nu pot afişa obiecte diferinte suprapuse), devin astfel disponibile
Exemplul 5.11 studiaţi sursa acestei pagini
Exemplul 5.12 aceeaşi pagină, "disecată"; se pot observa tabele în tabele
Atributele identice pentru <TABLE>, <TR>, <TH>, <TD> sunt suprascrise pe măsură ce se crează tabelul: astfel, dacă se setează o culoare pentru fundalul tabelului şi o alta pentru fundalul unei celule, celula va afişa culoarea setată pentru ea. În mod analog acţionează setările şi pentru celelalte atribute
Exemplul 5.13
- În cazul în care doriţi să reprezentaţi celule de tabel fără conţinut, pentru o reprezentare corectă este utilă includerea în respectivele celule fie a unui spaţiu, fie a unei imagini cu dimensiunile 1x1 pixeli, practic invizibilă
 Exerciţii
Exerciţiul 5.1: Creaţi pagina tabel1.html, în care veţi afişa 4 tabele cu 2 linii şi 2 coloane, iar textul conţinut în celule va fi aliniat cu valorile posibile pentru atributele ALIGN şi VALIGN
Exerciţiul 5.2: Creaţi pagina tabel2.html în care veţi afişa tabele cu 2 linii şi 2 coloane, în care exemplificaţi utilizarea atributelor BORDER, BORDERCOLOR, BORDERCOLORLIGHT şi BORDERCOLORDARK
Exerciţiul 5.3: Creaţi pagina tabel3.html, în care veţi afişa 4 tabele cu 3 linii şi 3 coloane, în care exemplificaţi utilizarea valorilor atributului RULES
Exerciţiul 5.4: Creaţi pagina tabel4.html, în care veţi afişa tabele cu 2 linii şi 2 coloane cu bordură vizibilă, în care exemplificaţi utilizarea atributelor CELLPADDING şi CELLSPACING
Exerciţiul 5.5: Creaţi pagina tabel5.html, în care veţi afişa tabele cu 2 linii şi 2 coloane cu bordură vizibilă, în care exemplificaţi utilizarea atributelor BGCOLOR şi BACKGROUND
Exerciţiul 5.6: Creaţi pagina tabel6.html, în care veţi afişa tabele cu 2 linii şi 2 coloane cu bordură vizibilă, în care exemplificaţi utilizarea atributelor HEIGHT, WIDTH şi NEEDS
Exerciţiul 5.7: Creaţi pagina tabel7.html, în care veţi afişa 5 tabele cu 1 linie şi 1 coloană cu bordură vizibilă; fiecare tabel va avea un titlu (CAPTION) aliniat conform valorilor posibile ale atributului ALIGN
Exerciţiul 5.8: Creaţi pagina tabel8.html, în care veţi afişa 5 tabele cu 3 linii şi 3 coloane, cu bordură vizibilă, iar textul conţinut în celule va fi aliniat cu valorile posibile pentru atributele ALIGN şi SPAN ale tag-ului <COL>
Exerciţiul 5.9: Creaţi pagina tabel9.html, în care veţi afişa 1 tabel cu 4 linii şi 4 coloane cu bordură vizibilă; fiecare dintre celulele (1,1), (2,2), (3,3) va fi unită pe orizontală cu celula următoare
Exerciţiul 5.10: Creaţi pagina tabel10.html, în care veţi afişa 1 tabel cu 4 linii şi 4 coloane cu bordură vizibilă; fiecare dintre celulele (1,1), (2,2), (3,3) va fi unită pe verticală cu celula următoare
Exerciţiul 5.11: Creaţi pagina tabel11.html, în care veţi afişa 1 tabel cu 3 linii şi 3 coloane cu bordură vizibilă; celulele liniilor 1 şi 3 vor fi definite cu <TH>
Exerciţiul 5.12: Creaţi pagina tabel12.html, în care veţi afişa 1 tabel cu 3 linii şi 3 coloane cu bordură vizibilă; setaţi culori diferite pentru tabel, linia 1 şi celula (1,1), apoi observaţi modul de suprascriere a atributelor
|
