WEBnSTUDY.com
HTML

Ćelije zaglavlja HTML tabele

Osim običnih ćelija, postoje i posebne ćelije zaglavlja. Klasične td ćelije bi trebale da sadrže same podatke, a ćelije zaglavlja bi trebale da sadrže naslove kolona ili redova tabele.

Ćelija zaglavlja se kreira oznakom <th>. Njeno korišćenje nije obavezno - u stvari, nećemo ni videti neku razliku u samoj tabeli, a čak i obične td ćelije možemo upotrebiti kao ćelije zaglavlja - dovoljno je da ih obojimo drugačije.

Zašto bismo onda koristili ove ćelije? Pa, iz prostog razloga - zašto koristimo sve druge oznake? Umesto naslova, pasusa i svega ostalog možemo koristiti div elemente... Ipak, suština HTML5 standarda je da se sadržaj dokumenta jasno definiše!

Ćelije zaglavlja koristimo unutar redova tabele. Uobičajeno će prvi redovi imati u sebi sve ćelije zaglavlja. Isto tako i prve ćelije u redu mogu biti ćelije zaglavlja. Naravno, ništa nas ne obavezuje da ovako zaista radimo.

<table> <tr> <th>tekst</th> <th>tekst</th> ... </tr> <tr> <th>tekst</th> <td>...</td> ... </tr> ... </table>

Domen

Ćelije zaglavlja imaju poseban parametar scope kojim se označava domen, odnosno na šta se u stvari odnosi zaglavlje (red ili kolonu).

<th scope="[vrednost]">...</th>

Moguće vrednosti su:

Povezivanje običnih ćelija i ćelija zaglavlja

Sve ćelije (i td i th), imaju poseban parametar headers preko koga se vezuju sa ćelijama zaglavlja koje se odnose na njih. Kao vrednost parametra zadaje se lista identifikatora ćelija zaglavlja (identifikatori se u listi odvajaju razmakom).

Identifikatore u ćelijama zaglavlja unosimo preko parametra id. Više o ovom parametru pročitajte u tekstu koji se bavi opštim parametrima.

<th id="[ident1]">...</th> ... <th id="[ident2]">...</th> ... <td headers="[ident1] [ident1]">...</td>

Pogledajte primer da biste videli kako ovo izgleda u praksi.

Ćelije zaglavlja

U ovom primeru imamo prvi red sa ćelijama zaglavlja, a u drugom i trećem redu je takva samo prva ćelija. Za neke od ćelija zaglavlja smo dodali i parametar scope, iako nije obavezan.


	<table>
		<tr>
			<th>Z</th>
			<th scope="col">K1</th>
			<th>K2</th>
		</tr> 
		<tr>
			<th scope="row">R1</th>
			<td>A1</td>
			<td>A2</td>
		</tr> 
		<tr>
			<th>R2</th>
			<td>B1</td>
			<td>B2</td>
		</tr> 
	</table>
	

Na stranici to izgleda ovako.

p1

Pogledajte sada kako koristimo parametar headers u ćelijama da povežemo pojedine ćelije sa adekvatnim ćelijama zaglavlja. Da bi bilo jasnije, sada smo uklonili parametar scope. Inače, redosled navođenja identifikatora u headers listi nije bitan.


	<table>
		<tr>
			<th>Z</th>
			<th id="k1">Kol 1</th>
			<th id="k2">Kol 2</th>
		</tr> 
		<tr>
			<th id="r1">Red A</th>
			<td headers="k1 r1">A1</td>
			<td headers="k2 r1">A2</td>
		</tr> 
		<tr>
			<th id="r2">Red B</th>
			<td headers="k1 r2">B1</td>
			<td headers="k2 r2">B2</td>
		</tr> 
	</table>
	

Na stranici to izgleda ovako.

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) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.