Tabelele în HTML5 - partea 2

Am văzut deja cum să creăm un tabel de bază numai pentru text, fără stiluri, în partea 1 a acestui tutorial, deși la nivel de cod este bine, la nivel vizual nu ne arată puterea organizațională pe care o tabelă o poate oferi date, pe site-urile noastre de multe ori trebuie să clasificăm date, elemente, informații în general, pentru aceasta putem folosi un tabel bine construit și reprezentativ.
Th element
Elementul a ne permite să creăm anteturi în tabelul nostru pentru a identifica vizual coloanele noastre, precum și td este fiul lui tr. Atributele sale sunt: colspan, envergură, scop, antete, atributele depreciate din această specificație HTML5 sunt după cum urmează: abbr, ax, align, width, char, charoff, valign, bgcolor, height și nowrap, scope, dacă privim în detaliu acest element funcționează foarte asemănător cu td, convenția sa CSS este după cum urmează:

 th {display: table-cell; vertical-align: moșteni; font-weight: bold; text-align: centru; } 

Acum să vedem cum să-l folosim pentru a construi un tabel cu un pic mai mult formatat decât am făcut-o anterior:

 Exemplu 
 
 
Rang
Yam
 
Culoare
mărimea
 

 
 
Favorit:
 
Merele
Verde
Mediu
 

 
 
A doua preferată:
 
Portocale
portocale
Mare
 

 
 
A treia preferată:
 
Rodie
Un fel de roșu-verzui
 
Variază de la mediu la mare
 

 

 

După cum am putut vedea în acest exemplu, putem plasa elementul a în cadrul tr, funcția sa este similară cu td, doar că acest lucru este folosit pentru a genera anteturi, codul afișat ne oferă următorul tabel ca rezultat:

Tabelul nostru începe să arate mult mai bine, totuși este încă foarte simplu, iar informațiile nu sunt atât de clare pe cât ar trebui, de exemplu anteturile și conținutul nu corespund într-un mod bun și din punct de vedere vizual este dificil să distingem care aparține căruia, pentru Vom folosi CSS și vom vedea cum vom rezolva în mare măsură această situație.
Pentru aceasta vom folosi următoarele:

Avem două condiții pentru a, ambii încep prin a ne spune că sunt copii ai trCu toate acestea, primul îl plasăm ca alinierea acestuia să fie spre stânga, va avea litere albe și fundalul său va fi gri, în al doilea indicăm că atunci când există doar un al treilea pentru fiecare tr îl vom alinia la dreapta , vom plasa un fundal gri mai deschis, iar literele vor fi gri mai închis.
Să vedem codul rezultat:

 Exemplu [b] [/ b] 
 
 
Rang
Yam
Culoare
mărimea
 

 
 
Favorit:
Merele
Verde
Mediu
 

 
 
A doua preferată:
Portocale
portocale
Mare
 

 
 
A treia preferată:
Rodie
Un fel de roșu-verzui
 
Variază de la mediu la mare
 

 

 

Acum să vedem rezultatul acestui cod și vom observa cum în acest fel tabelul nostru este mult mai organizat și putem distinge cărei coloane îi aparține fiecare dată.

După cum putem vedea, acest exemplu ne oferă o viziune a ceea ce ar trebui să fie o masă, totuși este încă departe de a fi perfectă. Ce s-ar întâmpla, de exemplu, dacă adăugăm altele a, în rândul de informații? Am pierde formatul, ceea ce ne-ar face să lucrăm de fiecare dată când tabelul își schimbă structura.
Pentru a evita acest lucru, există 3 elemente care împart logic tabelul, ca să spunem așa, acestea sunt: cap, tbody, tfoot. Cu ceea ce am văzut, suntem capabili să înțelegem fără prea multe explicații teoretice, așa că să trecem la un exemplu practic al acestui lucru.

 Exemplu 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Rang
Yam
Culoare
mărimea
 

 
 
Rang
Yam
Culoare
mărimea
 
 
Favorit:
Merele
Verde
Mediu
 

 
 
A doua preferată:
Portocale
portocale
Mare
 

 
 
A treia preferată:
Rodie
 
Un fel de roșu-verzui
Variază de la mediu la mare
 

 

 

 

Acum să vedem rezultatul:

După cum putem vedea, este în esență primul lucru pe care l-am făcut, acum în partea de jos a tabelului vedem că avem antetul în mod egal, totuși în cod am văzut cum sunt două structuri diferite, precum și conținutul.
Cu aceasta, terminăm tutorialul nostru cu tabele HTML5, trebuie doar să facem câteva exerciții și să exersăm ceea ce am învățat.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv