Tablice u HTML5 - 2. dio

Već smo vidjeli kako u prvom dijelu ovog vodiča stvoriti osnovnu tablicu samo sa tekstom bez stilova, iako je na razini koda to u redu, na vizualnoj razini ne pokazuje nam organizacijsku moć koju tablica može pružiti našim data, Na našim web stranicama mnogo puta moramo klasificirati podatke, elemente, podatke općenito, za to možemo koristiti dobro izgrađenu i reprezentativnu tablicu.
Th element
Element th omogućuje nam stvaranje zaglavlja naše tablice kako bismo vizualno identificirali naše stupce td je sin tr. Njegovi atributi su: colspan, raspon redova, opseg, zaglavlja, zastarjeli atributi u ovoj HTML5 specifikaciji su sljedeći: abbr, axis, align, width, char, charoff, valign, bgcolor, height i nowrap, scope, ako detaljno pogledamo ovaj element radi vrlo slično td, njegova CSS konvencija je sljedeća:

 th {display: table-cell; okomito poravnati: naslijediti; font-weight: bold; poravnavanje teksta: središte; } 

Pogledajmo sada kako ga upotrijebiti za izradu tablice s nešto više oblikovanja nego što smo to prethodno učinili:

 Primjer 
 
 
Rang
Jam
 
Boja
Veličina
 

 
 
Omiljeno:
 
Jabuke
Zeleno
Srednji
 

 
 
2. favorit:
 
Naranče
naranča
Veliki
 

 
 
3. favorit:
 
Nar
Neka vrsta zeleno-crvene boje
 
Varira od srednje do velike
 

 

 

Kao što smo mogli vidjeti u ovom primjeru, možemo postaviti element th unutar tr, njegova funkcija je slična td, samo što se ovo koristi za generiranje zaglavlja, prikazani kôd daje nam sljedeću tablicu kao rezultat:

Naša tablica počinje izgledati puno bolje, međutim i dalje je vrlo osnovna, a podaci nisu jasni kako bi trebali biti, na primjer zaglavlja i sadržaj ne odgovaraju na dobar način, a vizualno je teško razlikovati koje pripada čemu, jer Mi ćemo koristiti CSS i vidjet ćemo kako ćemo u velikoj mjeri riješiti ovu situaciju.
Za to ćemo koristiti sljedeće:

Imamo dva uvjeta za th, oboje počinju govoreći nam da su njihova djeca trMeđutim, prvi koji stavljamo tako da će njegovo poravnanje biti lijevo, imat će bijela slova, a pozadina će biti siva, u drugom označavamo da ćemo ga, kad postoji samo jedan th za svaki tr, poravnati udesno , postavit ćemo svjetliju sivu pozadinu, a slova će biti tamnije siva.
Pogledajmo rezultirajući kod:

 Primjer [b] [/ b] 
 
 
Rang
Jam
Boja
Veličina
 

 
 
Omiljeno:
Jabuke
Zeleno
Srednji
 

 
 
2. favorit:
Naranče
naranča
Veliki
 

 
 
3. favorit:
Nar
Neka vrsta zeleno-crvene boje
 
Varira od srednje do velike
 

 

 

Pogledajmo sada rezultat ovog koda i primijetit ćemo kako je na ovaj način naša tablica mnogo organiziranija i možemo razlikovati u koji stupac svaki podatak pripada.

Kao što vidimo, ovaj primjer daje nam viziju o tome što bi stol trebao biti, međutim još uvijek je daleko od savršenog. Što bi se dogodilo na primjer, ako dodamo još nešto th, u retku s podacima? Izgubili bismo format, zbog čega bismo radili svaki put kad tablica promijeni svoju strukturu.
Da biste to izbjegli, postoje 3 elementa koji logički dijele tablicu, da tako kažemo, to su: thead, tbody, tfoot. S onim što smo vidjeli, možemo razumjeti bez mnogo teorijskog objašnjenja, pa prijeđimo na praktičan primjer ovoga.

 Primjer 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Rang
Jam
Boja
Veličina
 

 
 
Rang
Jam
Boja
Veličina
 
 
Omiljeno:
Jabuke
Zeleno
Srednji
 

 
 
2. favorit:
Naranče
naranča
Veliki
 

 
 
3. favorit:
Nar
 
Neka vrsta zeleno-crvene boje
Varira od srednje do velike
 

 

 

 

Pogledajmo sada rezultat ovoga:

Kao što vidimo, to je u osnovi prva stvar koju smo učinili, sada pri dnu tablice vidimo da imamo zaglavlje jednako, međutim u kodu smo vidjeli kako su to dvije različite strukture, kao i sadržaj.
Time završavamo naš vodič za HTML5 tablice, moramo odraditi samo nekoliko vježbi i uvježbati naučeno.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod