CAP. 8. TABELE
8.1. Ce sunt tabelele?
Un tabel reprezintă un ansamblu de
date (cifre, simboluri, informaţii) afişate în celule sistematizate
într-o structură formată din rânduri şi coloane.
În afară de rolul de afişa
date, în HTML au şi un rol important în realizarea aspectului general al
documentului web.
Celula unui tabel poate conţine
oricare din elementele HTML acceptate în secţiunea BODY, aceasta incluzând
texte, imagini, formulare, antete şi chiar alte tabele.
Pentru a marca prezenţa unui tabel se
foloseşte tag-ul de deschidere <TABLE>. Acesta necesită
tag-ul de închidere </TABLE>.
Elementul <TABLE> are următoarele
sub-elemente:
-
Rândul tabelului (Table
Row) marcat de tag-urile <TR> </TR> (prezenţa sa este
obligatorie)
-
Datele tabelului (Table
Data) marcate de tag-urile <TD> </TD> (prezenţa sa este
obligatorie)
-
Antetul rândurilor
şi coloanelor (Table Header) marcat de tag-urile <TH> </TH>
-
Coloana (Column)
marcată de tag-ul <COL> ce nu necesită tag de închidere
-
Descrierea tabelului
marcată de tag-urile <CAPTION> </CAPTION>
-
Secţiunea antetului
tabelului (Table Header Section) marcată de tag-urile <THEAD>
</THEAD>
-
Secţiunea corpului
tabelului (Table Body Section) marcată de tag-urile <TBODY>
</TBODY>
-
Secţiunea
subsolului tabelului (Table Footer Section) marcată de tag-urile
<TFOOT> </TFOOT>
Formatarea tabelului se face începând de sus în jos
şi de la stânga la dreapta, fiind definite, secvenţial, antetul
şi datele fiecărei celule din fiecare coloană, progresând în
jos, rând cu rând.
Un exemplu conţinând cod HTML referitor la
tabele, este următorul:
<TABLE
BORDER="1">
<TR>
<TH>Antetul Coloanei 1 </TH>
<TH>Antetul Coloanei 2 </TH>
</TR>
<TR>
<TD>Rândul 1 - Coloana 1</TD>
<TD>Rândul 1 - Coloana 2</TD>
</TR>
<TR>
<TD>Rândul 2 - Coloana 1</TD>
<TD>Rândul 2 - Coloana 2</TD>
</TR>
<TR>
<TD>Rândul 3 - Coloana 1</TD>
<TD>Rândul 3 - Coloana 2</TD>
</TR>
</TABLE>
Rezultatul va fi următorul:
8.2. Formatarea tabelelor
Aşa cum am amintit şi anterior, tabelele
sunt de mare ajutor în realizarea aspectului general al unui document web. Ele
vă permit punerea în evidenţă a anumitor obiecte din document
şi sunt foarte utile la crearea formularelor, aspect pe care îl vom aborda
în capitolul următor.
Principalele atribute care vă permit formatarea
elementului <TABLE> sunt următoarele:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right |
Precizează modul de aliniere al tabelului
în document. |
|
background |
nume fişier |
O imagine folosită ca fundal pentru tabel. |
|
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea fundalului tabelului. |
|
border |
pixels |
Defineşte grosimea bordurii din tabel
(dacă nu se doreşte bordură, aceasta ia valoarea 0 sau nu se
specifică) |
|
cellpadding |
pixels % |
Specifică spaţiul dintre marginile
fiecărei celule şi conţinutul său. |
|
cellspacing |
pixels % |
Specifică spaţiul dintre celule. |
|
frame |
void above below vsides hsides lhs rhs box border |
Are efect numai când atributul “border”> 0
şi specifică care părţi ale bordurii sunt vizibile: -
nici o parte -
numai partea de sus -
numai partea de jos -
numai părţile de sus şi de jos -
numai părţile laterale -
numai partea din stânga -
numai partea din dreapta -
toate cele patru părţi -
toate cele patru părţi |
|
rules |
none groups rows cols all |
Specifică asupra căror grupe de celule
se aplică regulile referitoare la bordură: -
nici o regulă (este implicit) -
regulile se aplică grupelor de rânduri sau
de coloane -
regulile se aplică numai rândurilor -
regulile se aplică numai coloanelor -
regulile se aplică tuturor celulelor |
|
summary |
text |
Specifică o descriere mai detaliată a
tabelului |
|
width |
% pixels |
Specifică lăţimea ocupată de
tabel în cadrul paginii web (în cazul în care nu se specifică,
lăţimea va depinde de conţinutul tabelului) |
Să presupunem că
dorim să afişăm în documentul nostru orarul
desfăşurării anumitor cursuri. Tabelul va conţine zilele de
desfăşurare (ca antete de coloană), orele de
desfăşurare (ca antete de rânduri) şi denumirea cursurilor.
Pentru aceasta vom crea test8.html care va conţine următoarele linii de cod:
<HTML>
<HEAD>
<TITLE>Formatarea tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE><CAPTION>Orar
(fara bordura aliniat la stanga) </CAPTION>
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
<TD>Curs
JavaScript</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs
JavaScript</TD>
<TD>Curs PHP</TD>
<TD>Curs HTML</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD>Curs
JavaScript</TD>
<TD>Curs PHP</TD>
<TD>Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Rezultatul va fi următorul:
Notă:
HTML nu acceptă celule goale, aşa că a trebuit să
creăm o celulă care conţine caracterul
Vom adăuga tabelului nostru o bordură
şi îl vom alinia pe centrul paginii. Pentru aceasta vom adăuga
elementului <TABLE> următoarele atribute:
<TABLE border="1"
align="center"><CAPTION>Orar (cu bordura aliniat la centru)
</CAPTION>
şi
rezultatul va fi următorul:
În
continuare vom îngroşa puţin bordura, vom adăuga un fundal
galben tabelului şi îi vom mări lăţimea, astfel încât
să acopere întreaga fereastră. Aceasta se realizează astfel:
<TABLE border="5" align="center" bgcolor="yellow"
width="100%"> <CAPTION>Orar (cu bordura de 5 pixeli, cu
fundal galben, aliniat la centru) </CAPTION>
iar
rezultatul va fi următorul:
În
loc de o singură culoare putem folosi o imagine ca fundal. Pentru aceasta
vom înlocui atributul bgcolor cu background şi vom specifica
denumirea fişierului de tip imagine:
<TABLE border="5" align="center" background="fundal.gif"
width="100%"> <CAPTION>Orar (cu bordura de 5 pixeli, cu
imagine pe fundal, aliniat la centru) </CAPTION>
iar
vom obţine următorul rezultat:
Să
ne ocupăm şi de spaţierea dintre celule dând atributului cellspacing valoarea 10 (implicit
acesta are valoarea 0).
<TABLE border="1" align="center" cellspacing="10" width="100%">
<CAPTION>Orar (cu spatiu intre celule de 10 pixeli) </CAPTION>
Rezultatul va fi următorul:
Mărirea
sau micşorarea spaţiului dintre pereţii unei celule şi
conţinutul său se realizează prin alocarea unor valori
corespunzătoare atributului cellpadding,
astfel:
<TABLE border="1" align="center" cellpadding="10" width="100%">
<CAPTION>Orar (cu spatiu in interiorul celulelor de 10 pixeli)
</CAPTION>
iar
rezultatul va fi următorul:
Iată
şi o combinaţie a atributelor folosite până acum:
<TABLE border="5" align="center" bgcolor ="yellow"
cellpadding="10" cellspacing="10" width="100%"> <CAPTION>Orar (cu bordura de 5
pixeli, fundal galben si spatiu atat in interiorul celulelor cat si intre
celule de 10 pixeli) </CAPTION>
ce
va avea următorul rezultat:
În
continuare vom vedea ce efecte se obţin prin folosirea atributelor frame şi rules. Aceste două atribute sunt strâns legate de folosirea
atributului border, prin urmare vor
fi utilizate toate 3 concomitent. De exemplu:
<TABLE
border="1" rules="none" frame="box">
<CAPTION>Orar</CAPTION>
va
avea ca efect obţinerea unui tabel fără bordură în
interior:
Pentru
a obţine un tabel fără bordură exterioară, ci numai cu
cele interioare, vom da următoarele valori:
<TABLE border="1" rules="all"
frame="void">
şi
vom rezultatul va fi:
În
funcţie de necesităţi, puteţi combina aceste atribute
pentru a obţine rezultatele dorite.
8.3. Sub-elementele tabelelor
În
continuare vom analiza fiecare sub-element al tabelelor şi atributele
sale.
Aşa
cum aţi putut vedea mai sus, fiecare tag <TR> desemnează un rând într-un tabel. Fiecare rând
poate conţine unul sau mai multe elemente <TD> sau <TH>.
Din
punct de vedere tehnic, tag-ul </TR> este opţional, dar folosirea
lui vă ajută la eliminarea confuziilor.
Principalele atribute care vă permit formatarea
acestui element sunt următoarele:
|
Atribut |
Valoare |
Descriere |
|
Align |
left center right justify char |
Precizează modul de aliniere pe
orizontală a conţinutului. |
|
Valign |
top middle bottom baseline |
Precizează modul de aliniere pe
verticală a conţinutului. |
|
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea fundalului unui rând
întreg. |
Pentru
exemplificare, vom folosi fişierul creat anterior, şi anume test8.html, în care vom include:
<HTML>
<HEAD>
<TITLE>Formatarea tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR BGCOLOR="cyan">
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR ALIGN="left" VALIGN="middle">
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD><FONT SIZE="6">Curs
PHP</FONT></TD>
<TD>Curs JavaScript</TD>
</TR>
<TR ALIGN="center" VALIGN="bottom">
<TH>12-14</TH>
<TD>Curs JavaScript</TD>
<TD><FONT SIZE="6">Curs
MySQL</FONT></TD>
<TD>Curs HTML</TD>
</TR>
<TR ALIGN="right" VALIGN="baseline">
<TH>14-16</TH>
<TD>Curs JavaScript</TD>
<TD><FONT SIZE="6">Curs
MySQL</FONT></TD>
<TD>Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Rezultatul va fi următorul:
Dacă celelalte atribute produc efecte vizibile,
consider că trebuie oferite câteva explicaţii suplimentare privind
deosebirea între alinierea verticală BOTTOM şi BASELINE.
Alinierea BOTTOM se face după cea mai de jos
cotă a caracterelor, în vreme ce alinierea BASELINE are ca punct de reper
baza textului, după cum se poate vedea în imaginea de mai jos:
Mai
departe ne vom ocupa de tag-ul <TD>
care desemnează o celulă ce conţine date într-un tabel.
Principalele atribute care vă permit formatarea
acestui elementului sunt următoarele:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right justify char |
Precizează modul de aliniere pe
orizontală a conţinutului. |
|
valign |
top middle bottom baseline |
Precizează modul de aliniere pe
verticală a conţinutului. |
|
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea fundalului celulei. |
|
background |
nume fişier |
O imagine folosită ca fundal pentru
celulă. |
|
height |
% pixels |
Specifică înălţimea ocupată
de celulă în cadrul tabelului (în cazul în care nu se specifică,
înălţimea va depinde de conţinutul celulei) |
|
width |
% pixels |
Specifică lăţimea ocupată de
celulă în cadrul tabelului (în cazul în care nu se specifică,
lăţimea va depinde de conţinutul celulei) |
|
colspan |
număr |
Indică numărul de celule din tabel
care vor fi unite pe o coloană. |
|
rowspan |
număr |
Indică numărul de celule din tabel
care vor fi unite pe un rând. |
|
nowrap |
nowrap |
Se foloseşte pentru a dezactiva ajustarea
textului la lăţimea unei celule (funcţionează numai
dacă n-a fost definită valoarea atributului "width"). |
Pentru
exemplificare, vom folosi fişierul creat anterior, şi anume test8.html, în care vom include:
<HTML>
<HEAD>
<TITLE>Formatarea tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH
WIDTH="40">10-12</TH>
<TD
BGCOLOR="cyan">Curs HTML</TD>
<TD>Curs
JavaScript</TD>
<TD
ROWSPAN="3" BACKGROUND="fundal.gif" NOWRAP="nowrap"><B>Oricât
de mare ar fi continutul acestei celule, <BR>textul nu va trece pe rândul
următor fără folosirea<BR>
tag-ului BR care execută ruperea rândului. </TD>
</TR>
<TR>
<TH>12-14</TH>
<TD
COLSPAN="2" ALIGN="center" HEIGHT="60">Curs
JavaScript</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD
ALIGN="right">Curs JavaScript</TD>
<TD
BGCOLOR="orange">Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Rezultatul va fi următorul:
Notă: Există
numeroase probleme legate de modul în care browsere diferite interpretează
atributul width, rezultatul afişat putând diferi foarte mult de la caz la caz.
Dacă totuşi consideraţi utilă folosirea acestui atribut,
recomandarea noastră e să-l definiţi pentru fiecare celulă
în parte concomitent cu definirea acestuia pentru întregul tabel, astfel încât
suma valorilor alocate celulelor să corespundă cu valoarea
alocată tabelului.
Referitor la tag-ul <TH> vă vom
spune doar că funcţionează aproape identic cu tag-ul <TD>,
având aceleaşi atribute, cu excepţia faptului că <TH>
specifică unei celule că este antet pentru un rând sau pentru o
coloană, conţinutul de tip text fiind automat îngroşat.
Sub-elementul Coloană marcat de tag-ul <COL>
defineşte valorile atributelor pentru una sau mai maulte coloane ale unui
tabel. Se poate folosi numai în interiorul tag-ului <TABLE>, dar înainte
de oricare dintre tag-urile <TR>, <THEAD> sau <TBODY>.
Fiecare tag <COL> utilizat defineşte
proprietăţile unei singure coloane, exceptând cazul în care nu este
utilizat atributul span pentru a indica mai multe coloane. Deci, primul
tag <COL> defineşte proprietăţile primei coloane, al
doilea tag <COL> defineşte proprietăţile celei de-a doua
coloane etc.
Atributele care permit formatarea sub-elementului
<COL> sunt următoarele:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right justify |
Precizează modul de aliniere al datelor în
coloană. |
|
valign |
top middle bottom baseline |
Precizează modul de aliniere pe
verticală a conţinutului în coloană. |
|
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea fundalului coloanei. |
|
width |
% pixels |
Specifică lăţimea ocupată de
coloană în cadrul tabelului. |
|
span |
număr |
Precizează numărul de coloane
cărora le sunt definite proprietăţile. |
Pentru
exemplificare, vom folosi fişierul test8.html,
care va conţine următoarele:
<HTML>
<HEAD>
<TITLE>Formatarea tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<COL>
<COL valign="top" bgcolor="yellow"
span="2">
<COL align="right" width="120">
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
<TD>Curs JavaScript</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs JavaScript</TD>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD>Curs JavaScript</TD>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Rezultatul va fi următorul:
Notă: Observaţi
folosirea tag-ului <COL> fără nici un atribut pnetru prima
coloană. În cazul în care dorim să folosim acest tag numai pentru o
anumită coloană, atunci trebuie folosit pentru toate coloanele precedente,
chiar dacă nu produce nici o modificare a formatării
conţinutului.
Ne vom referi puţin şi la tag-ul
<CAPTION> pe care l-am folosit chiar de la primul exemplu. Vom preciza
faptul că are un singur atribut, şi anume align care poate lua
valorile left, right, top şi
bottom care indică locul
în care va fi poziţionată descrierea tabelului.
De asemenea, nu vom insista nici asupra elementelor <THEAD>,
<TBODY> şi <TFOOT> datorită folosirii lor
extrem de rar, în principal din cauza incompatibilităţii cu diverse
browsere, dar şi a faptului că folosirea lor nu aduce foarte multe
avantaje utilizatorului.
Atributele lor sunt următoarele:
|
Atribut |
Valoare |
Descriere |
|
align |
left center right justify char |
Precizează modul de aliniere pe
orizontală a conţinutului. |
|
valign |
top middle bottom baseline |
Precizează modul de aliniere pe
verticală a conţinutului. |
|
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea fundalului unei
secţiuni întregi. |
Pentru
exemplificare am ales următoarele linii de cod:
<HTML>
<HEAD>
<TITLE>Formatarea tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE
border="1">
<THEAD
valign="top" bgcolor="yellow">
<TR>
<TH> </TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
</THEAD>
<TBODY
align="center" bgcolor="cyan">
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
<TD>Curs JavaScript</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs JavaScript</TD>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
<TR>
<TH>14-16</TH>
<TD>Curs JavaScript</TD>
<TD>Curs MySQL</TD>
<TD>Curs HTML</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TH colspan="4">Prof. Ion Popescu</TH>
</TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
Rezultatul va fi următorul:
8.4. Aplicaţie practică
În continuare vom
pune în practică cele prezentate în acest capitol, combinând (atât cât se
poate) elementele prezentate:
<HTML>
<HEAD>
<TITLE>Formatarea
tabelelor</TITLE>
</HEAD>
<BODY>
<TABLE border="5"
cellpadding="5"
cellspacing="15" bgcolor="#F5F5DC"> <CAPTION
align="bottom"> Orarul cursurilor pentru programatori
Web</CAPTION>
<COL
align="center" bgcolor="cornsilk">
<COL
align="center" width="120" span="3"
bgcolor="bisque">
<THEAD><TR
bgcolor="#FFFFEE"><TH colspan="4">Curs
programatori Web </TH></TR></THEAD>
<TBODY><TR
bgcolor="cornsilk">
<TH>Ora</TH>
<TH>Luni</TH>
<TH>Miercuri</TH>
<TH>Vineri</TH>
</TR>
<TR>
<TH>10-12</TH>
<TD>Curs HTML</TD>
<TD>Curs PHP</TD>
<TD>Curs JavaScript</TD>
</TR>
<TR>
<TH>12-14</TH>
<TD>Curs JavaScript</TD>
<TD rowspan="2">Curs
MySQL</TD>
<TD>Curs PHP</TD>
</TR>
<TR>
<TH
height="50">14-16</TH>
<TD>Curs PHP</TD>
<TD>Curs HTML</TD>
</TR></TBODY>
<TFOOT><TR
bgcolor="#FFFFEE"><TD colspan="4" align="right"><FONT
color="#8B0000"><B>Conferentiar prof. Ion Popescu </B>
</FONT></TD></TR></TFOOT>
</TABLE>
</BODY>
</HTML>
Rezultatul va fi următorul:
