✅ Tablice u HTML5

Sadržaj

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

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

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

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