Ć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:
- row - zaglavlje se odnosi na sve ćelije reda u kome se nalazi sama ćelija zaglavlja
- col - zaglavlje se odnosi na sve ćelije kolone u kojoj se nalazi sama ćelija zaglavlja
- rowgroup - zaglavlje se odnosi na sve preostale ćelije reda u kome se nalazi sama ćelija zaglavlja (npr. sve ćelije desno od ćelije zaglavlja)
- colgroup - zaglavlje se odnosi na sve preostale ćelije kolone u kojoj se nalazi sama ćelija zaglavlja (sve ćelije ispod ćelije zaglavlja)
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.
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.