Alinierea datelor din celule
Pentru estetica continutului tabelului exista cîteva optiuni care permit alinierea datelor în interiorul celulelor atît pe orizontala cît si pe verticala. Optiunile sînt exprimabile prin intermediul unor atribute ale tag-urilor TR, TH, TD, COL, COLGROUP.
Atributele care afecteaza alinierea datelor în celule unui tabel sînt:
align = left|center|right|justify|char
Atributul ALIGN este utilizat pentru aliniere orizontala si poate lua urmatoarele valori:
Valoare |
Descriere |
|
LEFT |
Datele din celula sînt aliniate la marginea din stînga celulei |
|
RIGHT |
Datele din celula sînt aliniate la marginea din dreapta celulei |
|
CENTER |
Datele din celula sînt centrate orizontal la mijlocul celulei |
|
JUSTIFY |
Datele din celula sînt aliniate atît la marginea din stînga a celulei cît si la marginea din dreapta |
|
CHAR |
Datele din celula sînt aliniate dupa un anumit caracter |
valign = top|middle|bottom|baseline
Atributul VALIGN este utilizat pentru aliniere verticala si poate lua urmatoarele valori:
Valoare |
Descriere |
|
TOP |
Datele din celula sînt aliniate la marginea de sus a celulei |
|
BOTTOM |
Datele din celula sînt aliniate la baza celulei |
|
MIDDLE |
Datele din celula sînt centrate vertical la mijlocul celulei |
|
BASELINE |
Aliniere similara cu TOP dar alinierea se face cu baza primului rînd text din fiecare celula. |
char = character
Acest atribut specifica un caracter (unic într-un fragment de text) care joaca rolul de axa dupa care se aliniaza restul. Valoarea implicita este punctul zecimal.
charoff = length
Cînd este prezent acest atribut specifica affsetul primei aparatii a caracterului dupa care se face alinierea pe fiecare linie. Daca o linie nu contine caracterul de aliniere ea poate fi deplasata la sfîrsitul pozitieie de aliniere.
Exemplu:
Tabele cu aliniere orizontala si verticala:
1.
<TABLE BORDER>
<CAPTION>Aliniere orizontala</CAPTION>
<TR>
<TD ALIGN=LEFT> <BR> Left <BR> </TD>
<TD ALIGN=Center> <BR> Center <BR> </TD>
<TD ALIGN=RIGHT> <BR> Right <BR> </TD>
</TR>
</TABLE>
2.
<TABLE BORDER>
<CAPTION>Aliniere verticala</CAPTION>
<TR ALIGN=CENTER>
<TD VALIGN=TOP>Top<BR> <BR> </TD>
<TD VALIGN=MIDDLE>Center</TD>
<TD VALIGN=BOTTOM> <BR><BR> Bottom </TD>
</TR>
</TABLE>
Exemplu:
Tabel cu combinatie de alinieri:
<TABLE BORDER>
<TR>
<TH></TH>
<TH>Left (Stînga)</TH>
<TH>Center (Centru)</TH>
<TH>Right (Dreapta)</TH>
<TH>Top<BR>(Sus)<BR></TH>
<TD ALIGN=LEFT VALIGN=TOP><IMG SRC="A.gif"></TD>
<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="A.gif"></TD>
<TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="A.gif"></TD>
<TH>Center<BR>(Centru)<BR></TH>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="A.gif"></TD>
<TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC="A.gif"></TD>
<TD ALIGN=RIGHT VALIGN=MIDDLE><IMG SRC="A.gif"></TD>
</TR>
<TR>
<TH>Bottom<BR>(Jos)<BR></TH>
<TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="A.gif"></TD>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="A.gif"></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="A.gif"></TD>
</TR>
</TABLE>
Exemplu:
Tabelul urmator aliniaza un rînd de valori ce reprezinta preturi dupa punctul zecimal, caracter de aliniere setat explicit:
<TABLE border="1">
<COLGROUP>
<
<
<THEAD>
<TR>
<TH>Vegetable
<TH>Cost per kilo
<TBODY>
<TR>
<TD>Lettuce
<TD>$1
<TR>
<TD>Silver carrots
<TD>$10.50
<TR>
<TD>Golden turnips
<TD>$100.30
</TABLE>
Tabelul ar putea arata astfel:
----- ----- --------- ----- ------
| Vegetable |Cost per kilo|
|----- ----- ----|-------------|
|Lettuce | $1 |
|----- ----- ----|-------------|
|Silver carrots| $10.50|
|----- ----- ----|-------------|
|Golden turnips| $100.30|
----- ----- --------- ----- ------
Atributele de aliniere inserate în tag-urile de început de rînd (<TR>) au efect asupra tuturor celulelor din rînd. Atributele de aliniere inserate în tag-urile care definesc celule au precedenta fata de atributele de aliniere inserate în tag-urile început de rînd.
Mostenirea specificatiilor de aliniere
Alinierea continutului celulelor poate fi specificata individual fiecarei celule sau poate fi mostenita de la elementele ce includ celula respectiva (rînd, coloana, tabel).
Ordinea de precedenta (de la cea mai mare la cea mai mica) pentru atributele align, char si charoff este:
Atributul de aliniere setat pentru un element din celula (ex. P).
Atributul de aliniere setat pentru o celula (TH sau TD).
Atributul de aliniere setat pentru o coloana sau
grup de coloane (
Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR, THEAD, TFOOT si TBODY). Cînd o celula face parte dintr-o celula extinsa pe mai multe rînduri, proprietatile de aliniere sînt mostenite de la celula de unde începe extensia.
Atributul de aliniere setat pentru tabel (TABLE).
Valoarea implicita de aliniere.
Ordinea de precedenta (de la cea mai mare la cea mai mica) pentru atributul valign este:
Atributul de aliniere setat pentru un element din celula (ex. P).
Atributul de aliniere setat pentru o celula (TH sau TD).
Atributul de aliniere setat pentru un rînd sau grup de rînduri (TR, THEAD, TFOOT si TBODY). Cînd o celula face parte dintr-o celula extinsa pe mai multe rînduri, proprietatile de aliniere sînt mostenite de la celula de unde începe extensia.
Atributul de aliniere setat pentru o coloana sau
grup de coloane (
Atributul de aliniere setat pentru tabel (TABLE).
Valoarea implicita de aliniere.
La afisarea celulelor, alinierea orizontala este determinata de coloane înaintea rîndurilor, în timp ce pentru alinierea verticala ordinea de preferinta este rînduri si apoi coloane.
Alinierea implicita depinde de browser dar, în cele mai multe cazuri este: informatiile din celulele cap de tabel sînt centrate atît orizontal cît si vertical iar informatiile din celulele de date sînt centrate vertical dar aliniate orizontal la stînga.
Exemplu:
Un exemplu complet de tabel cu diverse atribute este prezentat în continuare:
<TABLE border="2" frame="hsides" rules="groups"
summary="Code page support in different versions of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>
Acesta poate arata ca în figura urmatoare:
 |
|
