RSS

L12. Tabele in HTML

02 May

Resursa: http://profs.info.uaic.ro/~val/htmlearn.html

Forma generala a unui tabel in html este

<TABLE>
          <CAPTION>...</CAPTION> - titlul tabelului
          <TR><TH></TH> ... </TR> - linie antet
          <TR><TD></TD> ... </TR> - linie curentã
		...
          <TR><TD></TD> ... </TR> - linie curentã
     </TABLE>

Se observa ca:

  • <TABLE> este tagul specific tabelului
  • <CAPTION> este tagul prin care stabilim titlul tabelului
  • tabelul este format din mai multe linii (<TR> table row), fiecare din ele fiind impartit in mai multe celule (<TD>). Daca vorbim de prima linie, atunci ne referim la antetul tabelului si folosim  <TH> (table header)

Exemplu:

<TABLE >
<TR><TH>Nr. crt</TH><TH>Numele si prenumele</TH></TR>
<TR><TD>1.</TD><TD>Popescu Ionel</TD></TR>
<TR><TD>2.</TD><TD>Ionescu Emil</TD></TR>
</TABLE>
Nr. crt Numele si prenumele
1. Popescu Ionel
2. Ionescu Emil

Marcaje generale pentru tabele

<TABLE [ BORDER[=nn]] [ FRAME=void|above|below|hsides|lhs|rhs|vsides|box] [ RULES=none|groups|rows|cols|all] [ WIDTH=ooo|pn%] [ HEIGHT=mmm|pm%] [ BGCOLOR=”#rrggbb“|culoare] [ BORDERCOLOR=”#rrggbb“|culoare] [ BORDERCOLORLIGHT=”#rrggbb“|culoare] [ BORDERCOLORDARK=”#rrggbb“|culoare] [ BACKGROUND=”URL-imagine“] [ CELLSPACING=qqq] [ CELLPADDING=rrr] [ ALIGN=left|center|right] [ VALIGN=top|bottom]>
continut-tabel
</TABLE>

este tagul de definire a unui tabel.

BORDER defineste prezenta chenarului. Dacã atributul lipseste sau are valoarea 0 (BORDER=0), atunci tabelul nu va avea chenar. Prin nn pozitiv se indicã, în pixeli, mãrimea umbrei pentru o reprezentare spatialã.
FRAME specificã afisarea bordurilor exterioare. Atributul BORDER trebuie sã fie prezent.Aceasta este o extensie Microsoft.

  • 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.

RULES controleazã afisarea liniilor interioare în cazul când se utilizeazã TBODY, TFOOT si THEAD (vezi în continuare). Atributul BORDER trebuie sãa fie prezent. Aceasta este o extensie Microsoft.

  • none – nu se afiseazã linii interioare;
  • groups – afiseazã linii între grupurile tabelului (specific extensiei Microsoft de definire a grupurilor: COLGROUP etc.);
  • rows – afiseazã linii între linii;
  • cols – afiseazã linii între coloane;
  • all – afiseazã toate liniile interioare.

WIDTH comandã lãtimea tabelului: în pixeli, ooo, sau procentual, pn%, din lãtimea ecranului;

HEIGHT, similar cu WIDTH, pentru înãltimea tabelului;

BGCOLOR este culoarea pentru fundalul tabelului. Culoarea de fundal este acoperitã, evident, de culoarea declaratã ca fundal pentru linii (vezi TR), care este acoperitã de culoarea declaratã ca fundal pentru celule (vezi TH si TD). Aceasta este o extensie Netscape si Microsoft;

BORDERCOLOR este culoarea bordurii tabelului. Aceasta este o extensie Microsoft;

BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordurã umbritã. Aceasta este o extensie Microsoft;

BORDERCOLORDARK este culoarea umbrei dintr-o bordurã umbritã.Aceasta este o extensie Microsoft;

BACKGROUND specificã adresa URL a fisierului imagine utilizat drept fundal pentru fiecare celulã a tabelului. Aceasta este o extensie Microsoft;
CELLSPACING aratã spatierea, în pixeli, dintre celule;
CELLPADDING aratã spatierea, în pixeli, dintre marginile celulei si continutul ei:
ALIGN comandã alinierea tabelului între marginile laterale ale ferestrei;
VALIGN aratã alinierea verticalã a tabelului.Aceasta este o extensie Microsoft.

continut-tabel defineste celulele tabelului, antetul, captarea si continutul celulelor tabelului.

 
1 Comment

Posted by on 02/05/2012 in C1_3 Modul Internet

 

One response to “L12. Tabele in HTML

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: