Curs de HTML
LECTIA a 8-a - 6 iunie 2000

Tables & Cells Attributes

Am aratat în lectia a 3-a ca putem reda un text aranjat în coloane folosind tag-ul preformatted text <pre>. Exista totusi o metoda mult mai simpla pentru aranjarea în pagina sub forma de rânduri si coloane, exact ca la paginatia unui ziar, sub forma tabelara, folosind tag-ul <table> .
Tabelele se definesc prin atribuirea de:  titlu, cap de coloane, un numar de rânduri si coloane si datele înscrise în acestea.

Tabele în HTML folosind tag-ul:   <TABLE> </TABLE>

Un tabel scris în limbaj HTML este cuprins între open tag <table> si close tag </table>.

În interiorul acestui tag se scrie tag-ul <tr> (table row) care defineste un rând dintr-un tabel.

Urmatorul pas este definirea spatiilor (cells), în cadrul tag-ului <tr> . Acest lucru se face prin adaugarea tag-ului <th> (table header), care defineste pozitia coloanelor dintr-un tabel.

Datele înscrise într-un tabel se definesc prin tag-ul <td> (table data).

Deasemenea, pentru definirea titlului unui tabel, se poate folosi (optional) perechea de tag-uri <caption> </caption> .

Iata un exemplu de scriere a unui tabel în HTML:

<table>
<caption>Codul STPD al oraselor europene</caption>
<tr>
<th>Cod<th>Oras:
<tr><td>3333<td>Bucuresti
<tr><td>3625<td>Amsterdam
<tr><td>3223<td>Porto
<tr><td>2999<td>Madrid
<tr><td>3611<td>Lisabona
<tr><td>3233<td>Duisburg
<tr><td>2985<td>Paris
<tr><td>3999<td>Londra
<tr><td>3002<td>Roterdam
<tr><td>3563<td>Milano
<tr><td>2988<td>Roma
</table>

Tabelul, afisat de catre browser, va arata astfel:

Scrierea unui tabel poate fi îmbunatatita prin folosirea atributelor în definirea tag-ului <table>.

TABLE ATTRIBUTES

Atributele pentru tabel sunt:

ALIGN=

Acest atribut specifica aliniamentul orizontal al unui tabel. El poate fi:

• center (default value) - centreaza tabelul
• right - aliniaza tabelul în partea dreapta
• left - aliniaza tabelul în partea stânga

NOTA : Deoarece nu toate programele browser interpreteaza la fel atributul ALIGN=CENTER, se recomanda folosirea în locul acestuia, tag-ul  <CENTER>  sau  <DIV ALIGN=CENTER> cu ajutorul caruia se poate alinia central o portiune (division) de text sau un întreg tabel (vezi exemplul de mai jos).

BORDER=n

Atribuie grosimea marginii (bordurii) în jurul tabelului sau între rânduri si coloane (cells), unde n este grosimea exprimata în pixels.

CELLSPACING=n

Defineste spatiul dintre rânduri si coloane (between cells), unde n este valoarea exprimata în pixels.

CELLPADDING=n

Defineste spatiul (marginea lasata liber) în interiorul unei celule (within cells), unde n este valoarea exprimata în pixels.

WIDTH=n or n%

Acest atribut permite specificarea latimii unui tabel. Valoarea n poate fi exprimata în pixels sau procentual din latimea paginii.

Atributul WIDTH este deasemenea folosit si pentru tag-urile <TH> si <TD> . În acest caz valoarea n poate fi exprimata în pixels sau  procentual din latimea tabelului.

***

Iata cum se scrie în HTML tabelul de mai sus, folosind atributele descrise în acest paragraf:

<div align=center>
<table border=1 cellspacing=5 cellpadding=15 width=400>
<caption>Codul STPD al oraselor europene</caption>
<tr>
<th width=30%>Cod STPD<th width=70%>Oras:
<tr><td>3333<td>Bucuresti 
<tr><td>3625<td>Amsterdam
<tr><td>3223<td>Porto
<tr><td>2999<td>Madrid
<tr><td>3611<td>Lisabona
<tr><td>3233<td>Duisburg
<tr><td>2985<td>Paris
<tr><td>3999<td>Londra
<tr><td>3002<td>Roterdam
<tr><td>3563<td>Milano
<tr><td>2988<td>Roma
</table>
</div>

Acelasi tabel, dar cu specificarea atributelor respective, va arata astfel:

CELL ATTRIBUTES

Atributele pentru spatiile de scris (cells) pot fi specificate în cazul tag-urilor  <TD>  (pentru datele înscrise în tabel) si  <TR> pentru definirea rândurilor.

Aceste atribute sunt:

ALIGN=

Acest atribut permite specificarea aliniamentului orizontal al unui paragraf în cadrul unui rând. În absenta acestui atribut se foloseste automat atributul ALIGN specificat pentru tag-ul <TR>.

Valoarea acestui atribut poate fi:

• left (default value) - aliniaza la stânga, datele înscrise în spatiul respectiv din tabel
• center - centreaza continutul unei celule (cell) si este valoarea automata ( default value) atribuita tag-ului header cells <TH>
• right - aliniaza la dreapta, datele înscrise într-un spatiu de scris (celula) (cell).

VALIGN=

Acest atribut permite specificarea aliniamentului vertical al continutului din cadrul unui rând. În absenta acestui atribut se foloseste automat atributul ALIGN specificat pentru tag-ul <TR>.

Acest atribut poate lua urmatoarele valori:

• top (default value) - aliniaza continutul cu partea de sus a unei celule
• middle - centreaza vertical continutul unei celule (cell)
• bottom - plaseaza continutul in partea de jos a celulei
• baseline - asigura alinierea la primul rand de text pentru toate celulele din rândul respectiv.

COLSPAN=n

Acest atribut permite specificarea numarului de coloane pe care se poate întinde o celula. Aceasta permite definerea unei celule de-a latul mai multor coloane. Valoarea initiala (default value) este 1.

ROWSPAN=n

Permite specificarea numarului de rânduri pe care se poate întinde o celula. Aceasta permite definerea unei celule de-a lungul mai multor rânduri. Valoarea initiala (default value) este 1.

***

Iata un exemplu de aliniere si aranjare a textului în diferite celule, folosind cell attributes:

<table border=1 width=100%>
<caption>Exemplu de tabel cu 4 coloane</caption>
<tr>
<th>Coloana 1<th>Coloana 2<th>Coloana 3<th>Coloana 4
<tr align=center><td>Calculator<td>Imprimanta<td>Scanner<td>Mouse
<tr><td colspan=2>Pe masa <td align=left>din stanga<td align=right>din dreapta
<tr><td rowspan=2>Sub masa<td>Prize<td>Cabluri<td>Stechere
<tr align=right><td>Alimentatoare<td>Cuple<td>Surse
</table>

Tabelul va arata astfel:

COLOR CELL ATTRIBUTES

Acestea sunt atribute care functioneaza în general numai cu browser-ele Netscape si Microsoft Internet Explorer , desi unele din ele sunt valabile si în alte browsere.

BACKGROUND=

Acest atribut permite afisarea unei imagini (files GIF, JPG, etc.) pe fondul unui tabel.

BGCOLOR=

Acest atribut permite afisarea unei culori pe fondul unui tabel. Valoarea poate fi de forma #RRGGBB (triplet color) sau una din cele 16 culori descrise în lectia a 7-a.

BORDERCOLOR=

Acest atribut este folosit împreuna cu atributul BORDER descris mai sus si defineste culoarea marginii (bordurii).

BORDERCOLORLIGHT=

Acest atribut este folosit împreuna cu atributul BORDER pentru redarea marginii (bordurii) în culori tridimensionale. Se recomanda folosirea lui împreuna cu atributul BORDERCOLORDARK.

BORDERCOLORDARK=

Acest atribut este folosit împreuna cu atributul BORDER pentru redarea marginii (bordurii) în culori tridimensionale. Se recomanda folosirea lui împreuna cu atributul BORDERCOLORLIGHT.

***

Un exemplu simplu ar fi tabla de sah colorata:

<center><div align=center>
<table border=1 align=center width=400
bgcolor=white bordercolorlight=lime bordercolordark=green bordercolor=red>
<caption>TABLA DE SAH</caption>
<tr>
<th>&nbsp;<th>a<th>b<th>c<th>d<th>e<th>f<th>g<th>h
<tr align=center><td>1<td>T<td>C<td>N<td>D<td>R<td>N<td>C<td>T
<tr align=center><td>2<td>p<td>p<td>p<td>p<td>p<td>p<td>p<td>p
<tr align=center><td>3<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;
<tr align=center><td>4<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;
<tr align=center><td>5<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;
<tr align=center><td>6<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;
<tr align=center><td>7<td>p<td>p<td>p<td>p<td>p<td>p<td>p<td>p
<tr align=center><td>8<td>T<td>C<td>N<td>D<td>R<td>N<td>C<td>T
<tr><td colspan=9>&nbsp;
<tr><td>Piese albe luate<td>N<td>p<td>p<td>p<td>C<td>&nbsp;<td>&nbsp;<td>&nbsp;
<tr><td>Piese negre luate<td>T<td>p<td>p<td>p<td>C<td>&nbsp;<td>&nbsp;<td>&nbsp;
</table>
</div></center>

Tabla de sah va arata astfel:

TEMA pentru ACASA:

Colorati patratelele tablei de sah în culorile conventionale si centrati în casutele respective literele care desemneaza denumirea pieselor de sah.

Top