HTML tabele

Tabele su veoma interesantna tema u HTML-u. Svojevremeno su se koristile za postavljanje celokupnog rasporeda elemenata (engl. layout) stranice. Danas se upotrebljavaju za prikaz tabelarnih podataka.

Element tabele se na stranici kreira oznakom <table>.

<table> [elementi tabele] </table>

Direktno unutar tabele možemo ubaciti samo mali broj elemenata - odeljke, redove i sl. Evo osnovne hijerarhije šta se navodi unutar čega:

Sadržaj (tekst) se može ubaciti isključivo u nazivu i ćelijama tabele.

Tabela se prikazuje kao blok element, a ćelije unutar tabele imaju zanimljivu osobinu da se uvek prilagođavaju širini tabele.

Redovi i ćelije

U krajnjoj liniji, tabelu možemo napraviti samo pomoću redova i ćelija.

Redove definišemo pomoću oznake <tr>, a ćeliju oznakom <td>. Dakle tabela bi, u svom najprostijem obliku, imala sledeću strukturu:

<table> <tr> <td>tekst</td> [ostale ćelije] </tr> [ostali redovi] </table>

Ćelije imaju i poseban parametar headers koji se koristi da navedemo identifikacije svih ćelija zaglavlja koje se odnose na tu konkretnu ćeliju. O ovom parametru ćemo više govoriti u tekstu koji se bavi ćelijama zaglavlja.

Naslov tabele

Na ovom mestu ćemo objasniti i kako se postavlja naslov za tabelu. Naslov takođe pripada tabeli i navodi se pomoću oznake <caption>.

Naslov nije obavezno navesti, ali ako ga navodimo, uvek ga navodimo kao prvi element unutar tabele. Kada se bude prikazivao, biće prikazan iznad tabele, a pomoću CSS pravila, možemo da mu promenimo položaj i izgled.

<table> <caption>tekst naslova</caption> <tr> <td>...</td> ... </tr> ... </table>

Osnovna tabela

Najosnovnija tabela, koja sadrži samo dva reda sa po tri ćelije. 


	<table>
		<tr>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
		</tr> 
		<tr>
			<td>B1</td>
			<td>B2</td>
			<td>B3</td>
		</tr> 
	</table>

Pažnja - u tabeli se okvirne linije ne vide, osim ako to ne zadamo pomoću CSS-a. U ovom slučaju smo to i uradili kako biste bolje videli tabelu.

p1

Šta se dešava ako u nekom redu navedemo manje ćelija? Pogledajte sledeći primer. Takođe smo dodali i naslov tabele. 


	<table>
		<caption>Primer tabele</caption>
		<tr>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
		</tr> 
		<tr>
			<td>B1</td>
			
			<td>B3</td>
		</tr> 
	</table>

Namerno smo napravili da izgleda kao da smo izbacili srednju ćeliju. Tabela će biti prikazana, ali pogledajte na koji način:

p2
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.