HTML Osnove

TABELE

Tabele su web elementi sastavljeni od redova i kolona. U njihovim presecima nalaze se ćelije koje su ujedno i jedini prostor unutar tabele u koji se može smestiti tekst, slike, video zapisi ali i nove tabele.

Tabele se u HTML-u kreiraju korišćenjem taga <table>. Unutar njega moguće je koristiti razne tagove, medju kojima su najosnovniji <tr> i <td>. Na slici ispod prikazano je na šta se pomenuti elementi odnose, uključujući <table> tag koji okružuje kompletnu tabelu.

22-osnovni-elementi-html-tabele

Kao što vidite na slici, <table> tag je tu da definiše granice neke tabele. <tr> je tag koji definiše red tabele. Tag <td> namenjen je definisanju pojedinačne ćelije.

Sada ćemo kreirati jednostavan primer tabele i objasniti kako stvari funkcionišu.

<!DOCTYPE html>

<html>

<head>

<title>Naslov dokumenta</title>

<meta charset=”UTF-8″>

</head>

<body>

<table border=”1″>

<tr>

<td>Mesec</td>

<td>Usteda</td>

</tr>

<tr>

<td>Januar</td>

<td>100 din</td>

</tr>

<tr>

<td>Februar</td>

<td>80 din</td>

</tr>

</table>

</body>

</html>

Prvi zanimljiv tag je table i on označava početak tabele. Ispod njega definišemo prvi red. U njemu smo definisali border=”1” atribut kako bi lakše videli granice pojedinih elemenata. Znači imamo prvi otvarajući <tr> tag koji govori pretraživaču da ono što sledi unutar njega predstavlja prvi red tabele. Odmah nakon otvaranja <tr> taga imamo otvarajući <td> tag koji definiše prvu ćeliju u liniji naslova (sa tekstom Mesec). Nakon toga, zatvaramo prvu ćeliju i otvaramo sledeću (gledano sleva na desno). Druga ćelija ima sadržaj Usteda. Nakon što je tatvorimo, imamo zatvarajući tag </tr> čime je definisanje prvog reda završeno.

Dalje otvaramo drugi red, ponovo pišući <tr> tag iza koga otvaramo prvu ćeliju drugog reda sa tekstom Januar i tako dalje dok na kraju ne završimo sa zatvaranjem poslednjeg reda tagom </tr> i konačno samu tabelu tagom </table>

Izgled u prozoru pretraživača je ispod.

23-osnovna-html-tabela

Ukoliko želite da okvire predstavite kao jednostruke linije u crnoj boji, u okviru taga table dodajte dva atributa cellpadding i cellspacing. Ispod je table tag sa unetim izmenama.

<table cellpadding=”0” cellspacing=”0” border=”1”>

Sada ćemo uraditi malo složeniji primer tabele. Izgled tabele na slici ispod.

24-slozenija-html-tabela

Prvo što je btino primetiti da imamo 3 ćelije koje se protežu na više od jednog reda, tj. kolone. To su ćelije obeležene brojevima 1,2 i 3.

Ćelija broj 1 i 2 protežu se na dva reda dok se ćelija 3 proteže kroz 2 kolone. Da bi mogli da kreiramo ovakvu tabelu, moramo koristiti attribute colspan (za ćelije koje se protežu u više kolona) i rowspan (za ćelije koje se protežu u više redova).

Prvo što treba da uradimo je da kreiramo otvarajući i zatvarajući <table> tag. Unutar tabele imamo dva reda. Tu nema ništa novo u odnosu na prethodni primer.

Kako definišemo ukupan broj kolona tabele? Tako što gledamo red u kome ima najveći broj ćelija. U našem primeru unutar prvog reda imamo 5 ćelija, a drugog 4. Ovde je presudno primetiti da iako se ćelije 1 i 2 ne završavaju u ovom redu, one u njemu počinju. Ćelije se definišu u redu u kome počinju.

Prva ćelija u prvom rede normalno se kreira otvarajućim i zatvarajućim <td> tagom. Iza toga sledi kod koji definiše ćeliju broj 1. Unutar otvarajućeg taga definišemo njenu različitost na taj način što navodimo atribut rowspan i broj redova kroz koji se proteže, u ovom slučaju 2. To na kraju izgleda ovako:

<td rowspan=”2”></td>

Sledeće dve ćelije u prvom redu nemaju nikakvih posebnosti, znači definiše se samo otvarajući i zatvarajući td tag. Poslednja ćelija takodje pripada prvom redu jer u njemu počinje. I u ovom slučaju kodu ćelije dodaćemo atribut rowspan=2.

U drugom redu treba da definišemo samo dve ćelije. Zašto?

Iako u njemu vidimo da postoje 4 ćelije, dve od njih ne počinju u tom redu i već su definisane sa rowspan parametrom pa njih ne navodimo. Pretraživač će ih, imajući rowspan atribut u vidu, samo produžiti u sledeći red. Poenta priče je da pretraživač ovaj kod razume.

Znači, prvo definišemo prvu ćeliju u drugom redu uobičajenim postupkom. Drugu ćeliju koja se proteže na dve kolone, definišemo tako što u otvarajućem td tagu ovog puta definišemo atribut colspan pošto se ćelija proteže na dve kolone, to na kraju izgleda: colspan=”2” a ceo kod ćelije

<td colspan=”2”></td>

Kompletan kod ( sa ubačenim tekstom u ćelijama) dat je ispod:

<table border=”1″ cellpadding=”0″ cellspacing=”0″>

<tr>

<td>123</td>

<td rowspan=”2″>123</td>

<td>abc</td>

<td>123</td>

<td rowspan=”2″>abc</td>

</tr>

<tr>

<td>321</td>

<td colspan=”2″>abc</td>

</tr>

</table>

Izgled u prozoru pretraživača

25-izgled-slozene-tabele-u-pretrazivacu

Jedino što još nismo objasnili je izgled otvarajućeg taga table. U njemu postoje tri atributa koje smo dodali. Border označava dodavanje okvira na sve ćelije, cellpading i cellspacing imaju vrednost 0 kako tabela ne bi imala duple linije ivica. Probajte da ih izostavite i pogledajte razliku u prozoru pretraživača.

Ovim je objašnjenje primera završeno.

Sadržaj ćelije tabele može biti tekst, slika, video zapis ili nova ugnjezdjena tabela. Ovo je sve što za sada treba da znate o tabelama. Njih je naravno, kao i ostale elemente, moguće stilizovati CSS-om.

Treba napomenuti da su se nekad tabele koristile za definisanje izgleda web strana. Danas ćete retko naići na sajtove čija je struktura i raspored elemenata na stranama definisan tabelama jer su njihovu ulogu preuzeli <div> tagovi (o njima kasnije). Ono gde se još uvek zadržalo stilizovanje putem tabela su HTML emailovi, tj. kod mailova koji sadrže formatiran tekst i slike. Ovde, zbog različitog ponašanja email klijenata, jedini sigurni način da se obezbedi ispravno formatiranje lepo ukrašenog maila je u slučaju korišćenja tabela u tom cilju.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn