 |
|
 |  |
|
|
| |
 | Biologie | Chimie | Didactica | Fizica | Geografie | Informatica |
| Istorie | Literatura | Matematica | Psihologie |
TABELE
1. Marcarea unui tabel
Un tabel este marcat in document de perechea de
controale <TABLE> si </TABLE>.
Pentru a specifica
principalele proprietati ale tabelului se folosesc urmatoarele
atribute:
width si height - stabilesc dimensiunile tabelului si pot fi exprimate in mod absolut sau in mod relativ. Dimensiunile pe care tabelul le va avea in cadrul documentului vor fi calculate de catre programul de explorare Web tinand cont de optiunile specificate prin cele doua atribute, dar si de dimensiunile elementelor din interiorul tabelului in asa fel incat acestea sa fie vizibile.
align - determina pozitionarea pe orizontala a tabelului in cadrul documentului.
border - stabileste grosimea in pixeli a chenarului care inconjoara tabelul. In cazul in care s-a ales valoarea 0 tabelul nu va afisa nici chenar, nici linii de demarcare in interiorul sau.
frame - stabileste care laturi ale chenarului care incadreaza tabelul vor fi vizibile. Optiunile posibile sunt:
void - nici o latura
above - latura de sus
below - latura de jos
hsides - laturile de sus si de jos
vsides - laturile din stanga si din dreapta
lhs - latura din stanga
rhs - latura din dreapta
box - toate laturile
border - toate laturile
rules - determina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. Optiunile posibile sunt:
none - nici o linie
groups - liniile dintre grupurile definite ale tabelului
rows - liniile orizontale
cols - liniile verticale
all - toate liniile
cellspacing - stabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre marginile tabelului si celulele din apropiere.
cellpading - stabileste spatiul dintre marginile unei celule si continutul acesteia.
bgcolor - stabileste culoarea de fond a tabelului.
background - stabileste imaginea de fond a tabelului.
Elementele care constituie un tabel sunt:
a. Corpul tabelului
Corpul tabelului este partea cea mai
importanta, el continand informatia propriu-zisa afisata in
tabel. Se marcheaza cu ajutorul controalelor <TBODY>
si </TBODY>. Pentru a avea consistenta,
acesta trebuie sa contina cel putin o linie din tabel.
O linie in tabel se
marcheaza cu ajutorul controalelor <TR>
si </TR>. Ea contine una sau
mai multe celule marcate prin controalele <TD>
si </TD>. Nu este obligatoriu ca toate
liniile sa contina acelasi numar de celule. Numarul de
coloane ale unui tabel se considera a fi numarul maxim de celule a liniilor
tabelului. Pe o linie celulele sunt dispuse de la stanga la dreapta in ordinea
in care au fost introduse in codul sursa al documentului.
Intr-un tabel pot exista mai
multe corpuri de tabel, aceasta optiune putandu-se pune in practica
atunci cand se doreste gruparea liniilor unui tabel conform unor regulilor
stabilite.
Exemplu: Doua tabele simple
<html>
<head>
<title>Tabele
simple</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<h1>Tabele simple</h1>
<hr>
<p>
1.Tabel simplu pentru prezentarea datelor structurate<br>
<p> <table
align='center' width= cellspacing= cellpadding= border= >
<tr>
<td><b>Nume</b></td>
<td><b>Prenume</b></td>
<td><b>Varsta</b></td>
<td><b>Telefon</b></td>
</tr>
<tr> <td>Popescu</td>
<td>Ioana</td>
<td>27</td>
<td>176238</td>
</tr>
<tr> <td>Munteanu</td>
<td>Cornel</td>
<td>42</td>
<td>220022</td>
</tr>
</table>
<p>
<hr>
<p>
2.Tabel folosit pentru aranjarea blocurilor de text:
<p>
<table cellspacing= cellpadding= border= >
<tbody valign='top'>
<tr>
<td >Internet</td>
<td>Reprezinta
totalitatea calculatoarelor si a retelelor de calculatoare de pe tot cuprinsul
globului,
care comunica intre ele prin intermediul
protocolului TCP/IP. Se estimeaza ca, in prezent, mai mult de o suta de
milioane
de oameni au, intr-un fel sau altul, acces la
reteaua Internet si acest numar este in continua crestere. </td>
</tr>
<tr>
<td>TCP/IP</td>
<td>Protocol
utilizat pentru transmiterea informatiilor de al calculator la calculator si de
la retea la retea.
TCP foloseste descompunerea mesajelor in pachete
care sunt transmise via IP, precum si reasamblarea acestora
la destinatie pentru reconstituirea mesajului</td>
</tr>
<tr>
<td>Browser
web</td>
<td>Produs
program ce interpreteaza fisierele scrise in limbaj HTML si le afiseaza sub
forma paginilor web.
Browserul foloseste regulile de comunicare
cuprinse in protocolul HTTP. Un browser cere unui server o anumita pagina pe
baza adresei de internet a paginii. ()</td>
</tr>
</tbody>
</table>
<p>
<hr>
</body>
</html>
Corpul unui tabel poate sa contina atribute care determina formatarea elementelor pe care acesta le contine:
bgcolor - seteaza culoarea de fond a celulelor din interiorul sau.
align - determina pozitionarea pe orizontala a continutului in cadrul unei celule
valign - determina pozitionarea pe verticala a continutului unei celule. Optiunile posibile sunt:
top - alinierea se face la baza superioara a celulei.
middle - pozitionare centrata in celula.
bottom - alinierea se face la baza inferioara a celulei.
Elementul TR marcheaza prezenta unei linii de date intr-un tabel si reprezinta elementul container al celulelor care contin informatia propriu-zisa a tabelului. Lui i se pot atasa, de asemenea, atributele care se refera la culoarea de fond a celulelor pe care le contine sau la pozitionarea elementelor in interiorul acestor celule.
Celulele unui tabel pot sa contina in interiorul lor text, imagini, ancore de legaturi, sau chiar alte tabele.
In afara proprietatilor mentionate la liniile tabelului, celulele au doua atribute foarte importante care permit formatarea si structurarea informatiei in interiorul tabelului:
colspan - determina nr.-ul de coloane ocupate de celula. Valoarea implicita este '1'.
rowspan - determina nr.-ul de linii ocupate de celula.
Valoarea implicita este '1'.
Atunci cand intr-un tabel se fac extinderi ale celulelor pe linii si coloane trebuie avut in vedere ca nu cumva doua celule diferite sa pretinda spatiul unei aceleasi celule.
width si height - recomanda programului de explorare web dimensiunile celulei. Nu uitati ca dimensiunile afisate ale celulelor se fac atat in functie de optiunile exprimate prin atributele specifice, cat si tinand seama de dimensiunile elementelor care constituie continutul acestor celule.
Exemplu: Specificarea proprietatilor de dimensionare ale celulelor
<html>
<head>
<title>Folosirea
elementelor de dimensionare in tabel</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<h1>Situatia vanzarilor in magazinul de muzica</h1>
<table cellspacing= cellpadding= border= >
<tr align='center' bgcolor='#6C939F'>
<td rowspan='' width = >ZIUA</td>
<td rowspan='' width = >FORMATIA</td>
<td colspan= width =
200>ALBUME VANDUTE</td>
</tr>
<tr bgcolor='#6C939F' align='center'>
<td>Casete</td>
<td>CD-uri</td>
</tr>
<tr>
<td rowspan='' >Luni</td>
<td>The
Beatles</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>The
Doors</td>
<td>0</td>
<td>4</td>
</tr>
<tr>
<td>Bob
Dylan</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Marti</td>
<td>The
Beatles</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan='' >Miercuri</td>
<td>Bob
Dylan</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>Alice
Cooper</td>
<td>2</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Aceste atribute sunt folosite si atunci cand tabelul este folosit pentru pozitionarea elementelor in cadrul documentului.
Exemplu: Aranjarea elementelor unui document cu ajutorul tabelului
<html>
<head>
<title>Aranjarea
elementelor in pagina cu ajutorul tabelului</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<table cellspacing= cellpadding= border= width= align='center' bgcolor='#0093E1' style='color:red'>
<thead>
<tr>
<td colspan= background='../Imagini/StiriSportive.gif' width = 680 height = 100> </td>
<td bgcolor='#8080ff' align='middle' valign='center'
width=><font color='#ff0080'>11 Decembrie 2124</font></td>
</tr>
</thead>
<tbody bgcolor='#C5CEFC' valign='top'>
<tr >
<td rowspan='' bgcolor='#71A7B7' valign='top'> <font color='#ffffff'> <a href='Plus.html'>Buletinul
de stiri</a> al firmei noastre va
prezinta
in fiecare zi cele mai neimportante vesti din lumea sportului.</font>
<p><font
size=4 color='yellow'Nu uitati!><br>
Banalitati clare din:
<ul>
<li>politica (Oooooooo!)</li>
<li>sport (Oooooooo!)</li>
<li>arta (Oooooooo!)</li>
<li>afaceri (Oooooooo!)</li>
</ul>
numai la buletinele noastre de stiri.</font> <p></p></td>
<td><a href = 'Plus.html'><IMG
align= left alt=Golf: border=0 height=100 src='../Imagini/golf.jpg' width=>
Turneul campionilor la golf.</a><br>
13-23 Decembrie</td>
<td><a href = 'Plus.html'><IMG
align=left alt=Hochei border=0 height=100 src='../Imagini/hochei.jpg' width=>
Hochei pe gheata</a><br>
Campionatul mondial<br>
</td>
<td rowspan = 3
width = 100><img src='../Imagini/Reclama.gif' width= height= border= alt= ></td>
</tr>
<tr>
<td><a href = 'Plus.html'><IMG
align=left alt=Patinaj border=0 height=100 src='../Imagini/patinaj.jpg' width=>
Patinaj artistic</a><br>
Campionatul european<br>
<td><a href = 'Plus.html'><img
src='../Imagini/popice.jpg' width= height= border= align='left' alt='Popice'>
Popice</a><br>
Turneul <b>'Popica
de aur'</b> <br>
Londra<br>
Decembrie
</td>
</tr>
<tr>
<td><a href='Plus.html'><img
src='../Imagini/rugby.jpg' width= height= border= align='left' alt='Rugby'>
Turneul celor 7 natiuni.<br>
Anul viitor.
</td>
<td><a href='Plus.html'><img
src='../Imagini/tenis.jpg' width= height= border= align='left' alt='Tenis'>
Tenis de camp</a><br>
Cupa Davis in sala de mese!<br>
Toata luna!</td>
</tr>
<tr bgcolor='#EBEFB4'>
<td><a href ='Plus.html'>Abonati-va
acum!</a></td>
<td><a href ='Plus.html'>Legatura
cu ESport++</a></td>
<td><a href ='Plus.html'>Pariuri
sportive</a></td>
<td><a href ='Plus.html'>Clasamente</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Exemplu: Tabele imbricate
<html>
<head>
<title>Folosirea
etichetei de tabel</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<h1>Pozitionare prin folosirea tabelelor
imbricate</h1>
<hr>
<p>
<table border= cellspacing= cellpadding= bgcolor= rules='all' style='color:yellow'>
<tr>
<td style='font-size:16'>
Echipa de realizatori ai proiectului:
</td>
<td ><table
border= cellspacing= cellpadding= bgcolor='#586C6D'>
<tr>
<td><img src='../Imagini/baiat1.jpg' width= height= border= alt='Gigi'></td>
<td><img src='../Imagini/baiat2.jpg' width= height= border= alt='Bruno'></td>
</tr>
<tr>
<td><img src='../Imagini/fata1.jpg' width= height= border= alt='Mia'></td>
<td><img src='../Imagini/fata2.jpg' width= height= border= alt='Clara'></td>
</tr>
</table></td>
</tr>
<tr>
<td>Director
de proiect:</td>
<td style='font-size:16'
align = 'center'>?</td>
</tr>
</table>
</body>
</html>
b. Eticheta de tabel
Eticheta de tabel este folosita
pentru a afisa deasupra tabelului un text scurt care - de obicei -
informeaza despre datele continute in tabel. Ea se marcheaza cu
ajutorul controalelor <CAPTION> si </CAPTION>. Acest element trebuie sa apara
imediat dupa controlul de inceput care marcheaza tabelul. Un tabel nu
poate avea decat o singura eticheta.
Cel mai important atribut al
etichetei de tabel este align. Acesta determina
pozitionarea etichetei fata de tabel si are urmatoarele
valori posibile:
top - determina pozitionarea etichetei in centru, deasupra tabelului (valoare implicita)
bottom - determina pozitionarea etichetei sub tabel
left - determina pozitionarea etichetei deasupra tabelului, aliniata la stanga
right - determina pozitionarea etichetei deasupra tabelului, aliniata la dreapta
Exemplu: Tabel cu eticheta
<html>
<head>
<title>Tabel
cu etichete,antet si subsol</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<h1>Tabel cu eticheta,antet si subsol</h1>
<p>
<hr>
<p>
<table align='center' border= width = >
<caption title='Eticheta
de tabel'><b>Lista
cheltuielilor pe primele trei luni ale anului</b></caption>
<thead align='center' bgcolor= title='Antetul
tabelului'>
<tr>
<th rowspan='' >LUNA</th>
<th colspan= >CHELTUIELI</th>
</tr>
<tr>
<th>Taxe</th>
<th>Alimente</th>
<th>Diverse</th>
</tr>
</thead>
<tfoot align='center' bgcolor= title='Subsolul
tabelului'>
<tr>
<td>TOTAL</td>
<td>4.900.000</td>
<td>1.680.000</td>
<td>5.600.000</td>
</tr>
</tfoot>
<tr>
<td>Ianuarie</td>
<td>1.500.000</td>
<td>320.000</td>
<td>1.700.000</td>
</tr>
<tr>
<td>Februarie</td>
<td>1.300.000</td>
<td>780.000</td>
<td>1.300.000</td>
</tr>
<tr>
<td>Martie</td>
<td>2.100.000</td>
<td>580.000</td>
<td>2.600.000</td>
</tr>
</table></p>
</body>
</html>
c. Antetul si subsolul tabelului
Antetul si subsolul tabelului sunt componente ale tabelului care contin in general informatii despre datele prezentate, spre deosebire de corpul tabelului care contine respectivele date. Antetul si subsolul sunt formate din una sau mai multe linii, linii care, la randul lor, contin una sau mai multe celule.
Antetul este marcat de controalele <THEAD> si </THEAD>, iar subsolul tabelului este marcat de controalele <TFOOT> si </TFOOT>. Aceste controale trebuie sa apara inaintea controlului de inceput care marcheaza corpul tabelului. In mod normal, THEAD, TBODY si TFOOT contin acelasi numar de coloane.
Antetul si subsolul unui tabel trebuie sa contina cel putin o linie de tabel marcata cu ajutorul elementului TR. Celulele care intra in componenta antetului sau a subsolului tabelului se marcheaza de obicei cu controalele <TH> si </TH>, dar este posibila si folosirea marcajelor pentru celulele folosite in corpul tabelului, deoarece, in mare masura, cele doua elemente sunt echivalente.
Atributele cele mai importante ale antetului si subsolului tabelului sunt cele legate de pozitionare, dimensionare sau fond si au fost prezentate in sectiunea dedicata corpului tabelului.
Exemplu: Tabel cu eticheta,antet si subsol
<html>
<head>
<title>Tabel
cu etichete,antet si subsol</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<h1>Tabel cu eticheta,antet si subsol</h1>
<p>
<hr>
<p>
<table align='center' border= width = >
<caption title='Eticheta
de tabel'><b>Lista
cheltuielilor pe primele trei luni ale anului</b></caption>
<thead align='center' bgcolor= title='Antetul
tabelului'>
<tr>
<th rowspan='' >LUNA</th>
<th colspan= >CHELTUIELI</th>
</tr>
<tr>
<th>Taxe</th>
<th>Alimente</th>
<th>Diverse</th>
</tr>
</thead>
<tfoot align='center' bgcolor= title='Subsolul
tabelului'>
<tr>
<td>TOTAL</td>
<td>4.900.000</td>
<td>1.680.000</td>
<td>5.600.000</td>
</tr>
</tfoot>
<tr>
<td>Ianuarie</td>
<td>1.500.000</td>
<td>320.000</td>
<td>1.700.000</td>
</tr>
<tr>
<td>Februarie</td>
<td>1.300.000</td>
<td>780.000</td>
<td>1.300.000</td>
</tr>
<tr>
<td>Martie</td>
<td>2.100.000</td>
<td>580.000</td>
<td>2.600.000</td>
</tr>
</table></p>
</body>
</html>
d. Grupuri de coloane
Antetul corpul si subsolul tabelului reprezinta modalitati de a grupa pe orizontala informatia prezentata intr-un tabel. Un grup de coloane se marcheaza prin controalele <COLGROUP> si </COLGROUP> , marcajul de inchidere putand sa lipseasca. Pentru a specifica numarul de coloane incluse in grup se pot folosi doua modalitati:
In cazul in care nici una dintre aceste doua optiuni nu este prezenta se considera ca grupul de coloane contine o singura coloana.
Grupurile de coloane se
introduc in document inaintea antetului sau a corpului tabelului si ele
pot contine atribute referitoare la pozitionarea continutului in
interiorul celulelor sau la dimensiunea coloanelor pe care acestea le contin.
Astfel, atributul width recomanda
latimea pe care ar trebui sa o aiba toate coloanele
grupului. Valoarea '0' determina alocarea fiecarei
coloane a grupului a unui spatiu minim pe orizontala astfel incat continutul
celulelor sa fie vizibil.
De asemenea, in cazul in care
grupul de coloane se construieste prin specificarea separata a elementului
COL pentru fiecare coloana acest element poate
sa contina atributele referitoare la dimensionarea fiecarei
coloane in parte sau la pozitionarea continutului in interiorul
celulelor. Trebuie stiut ca, in mod implicit, programul de explorare
calculeaza dimensiunile coloanelor la valori minime necesare pentru ca
elementele din interiorul celulelor sa fie vizibile.
Exemplu: Utilizarea grupurilor de coloane
<html>
<head>
<title>Tabel
cu grupuri de coloane</title>
<META http-equiv='Content-Type'
content='text/html;
charset=iso-8859-1'>
</head>
<body>
<h1>Utilizarea grupurilor de coloane</h1>
<p>
<hr>
<p>
<table align='center' cellspacing= cellpadding= border= width = >
<caption align='bottom' ><b>Tabel cu 3 grupuri de coloane</b></caption>
<colgroup width= bgcolor = 'red' align = 'left' title = 'primul grup
de coloane'>
<col width= >
<col width = >
<col width = >
</colgroup>
<colgroup width= align='center'>
<colgroup span= bgcolor = 'aqua' align='right'>
<thead bgcolor='#8EAFFD' >
<tr>
<th align = 'center'>Nume</th>
<th align = 'center'>Prenume</th>
<th align = 'center'>Domiciliul</th>
<th align = 'center'>Foto</th>
<th align = 'center'>Varsta</th>
<th align = 'center'>Telefon</th>
</tr>
</thead>
<tr>
<td>Popescu</td>
<td>Anabelisima</td>
<td>Bucuresti</td>
<td><img src='../Imagini/fata1.jpg' width= height= border= alt= ></td>
<td>15</td>
<td>
1261123</td>
</tr>
<tr>
<td>Silver</td>
<td>John</td>
<td>
<td><img src='../Imagini/baiat1.jpg' width= height= border= alt= ></td>
<td>21</td>
<td>202020</td>
</tr>
<tr>
<td>Morouge</td>
<td>Michelle</td>
<td>
<td><img src='../Imagini/baiat2.jpg' width= height= border= alt= ></td>
<td>19</td>
<td>232323</td>
</tr>
<tr>
<td>Valiova</td>
<td>Ludmila</td>
<td>Moscova</td>
<td><img src='../Imagini/fata2.jpg' width= height= border= alt= ></td>
<td>21</td>
<td>090909</td>
</tr>
</table>
</body>
</html>
Copyright © 2024 - Toate drepturile rezervate
