Tabele în HTML5 - partea a 2-a

Am văzut deja cum să creăm un tabel de bază cu doar text fără stiluri în prima parte a acestui tutorial, deși la nivel de cod acest lucru este în regulă, la nivel vizual nu ne arată puterea organizațională pe care un tabel ne poate oferi datelor noastre, În 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.
Elementul Th
Elementul al nouă ne permite să creăm titluri la tabelul nostru, astfel încât să putem identifica vizual coloanele noastre la fel cum td este fiul lui tr. Atributele sale sunt: colspan, intervale de ordine, întindere, anteturi, atributele învechite din această specificație HTML5 sunt următoarele: abbr, axă, aliniere, lățime, char, charoff, valign, bgcolor, înălțime și nowrap, scop, dacă arătați în detaliu acest element funcționează foarte similar cu td, convenția CSS este următoarea:

 th {display: table-cell; vertical-aliniere: moștenire; font-greutate: bold; aliniere text: centru; } 

Acum să vedem cum să o utilizăm pentru a construi o tabelă cu un format puțin mai mare decât am făcut anterior:

 exemplu verdemediuportocaliumareUn fel de roșu verdeVariază de la mediu la mare
rang
nume
culoare
dimensiune
favorit:
mere
Al doilea favorit:
portocale
Al treilea favorit:
rodie

După cum am putut vedea în acest exemplu, putem plasa elementul th în interiorul tr, funcția sa este similară cu td, doar că este utilizată pentru a genera anteturi, codul afișat rezultă în următorul tabel:

Tabelul nostru începe să arate mult mai bine, cu toate acestea, este încă foarte de bază, iar informațiile nu sunt la fel de clare pe cât ar trebui să fie, de exemplu anteturile și conținutul nu corespund într-un mod bun și vizual este dificil să distingi că aparține acelui lucru, pentru Vom folosi CSS și vom vedea cum vom rezolva această situație într-o mare măsură.
Pentru aceasta vom folosi următoarele:

 tr> th {text-align: left; fundal: gri; culoare: alb} tr> th: numai de tip {text-align: right; fundal: verde deschis; culoare: gri} 

Avem două condiții pentru a doua, amândoi încep să ne spună că sunt copii de tr, totuși pe primul loc plasăm că alinierea lor va fi la stânga, va avea litere albe, iar fundalul său va fi gri, în a doua indicăm că atunci când există doar o fiecare tr o vom alinia la dreapta, vom pune un fundal gri mai deschis, iar literele vor fi gri mai închise.
Să ne uităm la codul rezultat:

 Exemplu [b] [/ b] [b] tr> th {aliniere text: stânga; fundal: gri; culoare: alb} [/ b] [b] tr> th: numai de tip {text-align: right; fundal: verde deschis; culoare: gri} [/ b] [b] [/ b] verdemediuportocaliumareUn fel de roșu verdeVariază de la mediu la mare
rang
nume
culoare
dimensiune
favorit:
mere
Al doilea favorit:
portocale
Al treilea favorit:
rodie

Acum să analizăm rezultatul acestui cod și vom observa cum în acest fel tabelul nostru este mult mai organizat și putem distinge din ce coloană aparține fiecare date.

După cum putem vedea, acest exemplu ne oferă o viziune a ceea ce ar trebui să fie un tabel, cu toate acestea este încă departe de a fi perfect. Ce s-ar întâmpla, de exemplu, dacă adăugăm o altă treaptă, în rândul de informații? Am pierde formatul, ceea ce ne-ar face să lucrăm de fiecare dată când tabelul schimbă structura.
Pentru a evita acest lucru, există 3 elemente care împărțesc logic tabelul pentru a o pune într-un fel, acestea sunt: thead, tbody, tfoot . Deja cu ceea ce am văzut, suntem capabili să înțelegem fără prea multe explicații teoretice, deci să trecem la un exemplu practic în acest sens.

 Exemplu [b] thead th, tfoot th [/ b] {text-align: left; fundal: gri; color: white} [b] tobody th [/ b] {text-align: right; fundal: verde deschis; culoare: gri}  [b] [/ b] [b] [/ b] [B]  [/ b] verdemediuportocaliumareUn fel de roșu verdeVariază de la mediu la mare
rang
nume
culoare
dimensiune
rang
nume
culoare
dimensiune
favorit:
mere
Al doilea favorit:
portocale
Al treilea favorit:
rodie

Acum să vedem rezultatul acestui lucru:

După cum vedem că este în primul rând primul lucru pe care l-am făcut, acum în partea de jos a tabelului vedem că avem antetul în egală măsură, însă în cod am văzut cum sunt două structuri diferite, precum și conținutul.
Cu aceasta, terminăm tutorialul nostru de tabele în HTML5, trebuie doar să executăm câteva exerciții și să exersăm ceea ce am învățat.

• 
• 0