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:
|
