HTML - TABELE

Rad sa tabelama

Tabela je i u HTML-u dvodimenziona matrica čiji se elementi nazivaju ćelije (engl. cell).
Ćelija može da sadrži raznovrsne informacije: brojeve, tekst, boje, liste, hiper-veze, slike, itd.
Tabela se predstavlja tako što se opisuju redom njene vrste (redovi, engl. row) i sadržaj svake ćelije u redu.
Za kreiranje tabela koristi se etiketa <TABLE> ... </TABLE>

Tabele su, po meni, najvažnije oznake u HTML jeziku. Svako ko je pokušao da ručno poravna dve slike će se složiti samnom. Morate znati da koristite tabele i da razumete po kom principu rade ukoliko želite da budete efikasan web dizajner.

Atributi etikete TABLE

• zadavanje veličine ivice tabele - BORDER (broj)
• zadavanje boje ivice tabele - BORDERCOLOR (broj)
• položaj tabele unutar prozora (poravnanje) - ALIGN (left, right, center)
• zadavanje širine tabele - WIDTH (broj piksela ili procenata u odnosu na prozor)
• podešavanje boje pozadine tabele - BGCOLOR (boja)
• podešavanje prostora između zida ćelije i sadržaja - CELLPADDING (broj)
• rastojanje između ćelija - CELLSPACING (broj)

 

Nadnaslov tabele zadaje se etiketom <CAPTION> ... </CAPTION>
Ako se zadaje ova etiketa, mora da se navede neposredno posle etikete TABLE.
Podrazumevano se naslov prikazuje iznad tabele centrirano. Poravnanje naslova podešava se atributom ALIGN:
- za vertikalno poravnanje: TOP, BOTTOM
- za horizontalno poravnanje: LEFT, RIGHT

 
Ćelija u tabeli se opisuje etiketom <TD> ... </TD>

Atributi

• broj kolona preko kojih se prostire ćelija - COLSPAN (broj)
• broj redova preko kojih se prostire ćelija - ROWSPAN (broj)
• horizontalno poravnanje teksta u ćeliji - ALIGN (left, right, center, justify, char)
• vertikalno poravnanje teksta u ćeliji - VALIGN (top, middle, buttom, baseline)
  prema vrhu ćelije, sredini ćelije, dnu, težišnoj liniji zajedničkoj za sve ćelije u redu
• prikaz sadržaja ćelije bez prelamanja - NOWRAP (broj piksela ili procenata u odnosu na prozor)

<TH>...</TH> - ćelija u tabeli, samo centrirano i bold. 
 
Red u tabeli opisuje se etiketom <TR> ... </TR>
Atributi BORDERCOLOR, BGCOLOR imaju isto značenje kao kod elementa TABLE, samo se njihove vrednosti
sada odnose na red tabele.
Atributi ALIGN, VALIGN imaju značenje kao kod elementa TD, samo se njihove vrednosti odnose na red.

 














Dobro proučite primere, posebno dva poslednja, i trebalo bi da ovladate tehnikom pravljenja tabela. Tabele su svuda oko vas u internet svetu. Retke su prezentacije koje nemaju bar jednu tabelu bilo da je vi vidite ili ne. Pogledajte kodove prezentacija koje vas zanimaju, tako se najbrže uči. Eksperimentišite sa tabelama i videćete zašto su tabele najvažnije u HTML jeziku. 

 

Table tag

Sve atribute TABLE taga daću tabelarno:

Atribut	Kod	Prikaz	Objašnjenje
border=n	<table border=14>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Definiše debljinu linija koje oivičavaju spoljni deo tabele u pikselima. Po defoltu vrednost atribute je nula. Uočite da  je defoltna boja linija siva i to svetlija siva gornja linija i leva, a desna i donja je tamnija.
bordercolor=#rrggbb	<table border=10 bordercolor=#3333FF>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Atribut koji uvek ide sa border. Definiše boju svih linija koje uokviruju spoljni deo tabele. Ne podržavaju svi brauzeri.
bordercolordark=#rrggbb	<table border=10 bordercolordark=#3333FF>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Atribut daje boju desnoj i donjoj ivici tabele. Atribut koji uvek ide sa border, ali vrlo često i sa bordercolor. Ne podržavaju svi brauzeri.
bgcolor=#rrggbb	<table bgcolor=#B0D8FF>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Daje boju čitavoj pozadini tabele.
bacground=<img>	<table background="pozadina.gif">   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Definiše sliku pozadine čitave tabele
cellpadding=n	<table border=2 cellpadding=10>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Definiše udaljenost izmedju podatka i ivice ćelija u svim pravcima simetrično u pikselima. Ne mora da ide zajedno sa border ali ovde zbog demonstracije
cellspacing=n	<table border=2 cellspacing=10>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Definiše udaljenost izmedju ćelija, i izmedju ćelija i linija koje oivičavaju spoljni deo tabele. Ne mora da ide zajedno sa border ali ovde zbog demonstracije.
width=n ili n%	<table border=1 width=130>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Definiše horizontalnu veličinu tabele. Kad nije dat width širina je tolika da se smeste svi podaci. Može se dati u procentima ili pikselima. Ne mora da ide uz border.
height=n ili n%	<table border=1 height=200>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Definiše vertikalnu veličinu tabele. Kad nije dat height širina je tolika da se smeste svi podaci. Može se dati u procentima ili pikselima. Ne mora da ide uz border.
align=right ili center ili left	<table align=right>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Smešta tabelu uz desnu ivicu prostora u kojem se nalazi tabela ako je vrednost right, levo ako je left i u sredinu horizontale ako je center. Ako nema align po defoltu je left.
frame = above ili below ili lhs ili rhs ili hsides ili vsides ili box ili void	<table frame=above>   <tr>     <td>ACA</td>     <td>IKA</td>   </tr>   <tr>     <td>ICA</td>     <td>ERA</td>   </tr> </table>	ACA IKA ICA ERA	Kad je vrednost above iscrtava sve gornje vodoravne linije koje poseduje tabela. Kad je below crta sve donje vodoravne, lhs crta sve leve uspravne, rhs crta sve desne uspravne, hsides crta i sve gornje i donje vodoravne linije, vsides sve leve i desne uspravne, box crta sve moguće, void ne iscrtava ni jednu liniju. Box vam je isto kao da ste stavili border=1, a void vam je isto kao kad i ne koristite frame a ni border. Frame i border nikad ne idu zajedno.