Lentelės HTML5 - 2 dalis

Šios pamokos 1 dalyje jau matėme, kaip sukurti pagrindinę tik tekstinę lentelę be stilių, nors kodo lygmeniu tai yra gerai, tačiau vizualiai ji nerodo mums organizacinės galios, kurią lentelė gali suteikti mūsų duomenys, Savo svetainėse daug kartų turime klasifikuoti duomenis, elementus, informaciją apskritai, tam galime naudoti gerai parengtą ir reprezentatyvią lentelę.
Th elementas
Elementas tūkst leidžia mums sukurti antraštes prie mūsų lentelės, kad galėtume vizualiai identifikuoti savo stulpelius td yra sūnus tr. Jos atributai yra: colspan, eilučių diapazonas, apimtis, antraštės, šios HTML5 specifikacijos nebenaudojami atributai yra šie: abbr, ašis, lygiuoti, plotis, char, charoff, valign, bgcolor, aukštis ir nowrap, apimtis, jei pažvelgsime išsamiai, šis elementas veikia labai panašiai td, jos CSS konvencija yra tokia:

 th {display: table-cell; vertical-align: paveldėti; šrifto svoris: paryškintas; text-align: centre; } 

Dabar pažiūrėkime, kaip jį panaudoti kuriant lentelę su šiek tiek daugiau formatavimo, nei buvome anksčiau:

 Pavyzdys 
 
 
Reitingas
Yam
 
Spalva
Dydis
 

 
 
Mėgstamiausia:
 
Obuoliai
Žalias
Vidutinis
 

 
 
2 mėgstamiausias:
 
Apelsinai
Oranžinė
Didelis
 

 
 
3 mėgstamiausias:
 
Granatas
Savotiškai žalsvai raudona
 
Skiriasi nuo vidutinio iki didelio
 

 

 

Kaip matėme šiame pavyzdyje, galime įdėti elementą tūkst viduje tr, jo funkcija panaši į td, tik tai, kad jis naudojamas antraštėms generuoti, parodytas kodas suteikia mums šią lentelę:

Mūsų lentelė pradeda atrodyti daug geriau, tačiau ji vis dar yra labai paprasta, o informacija nėra tokia aiški, kaip turėtų būti, pavyzdžiui, antraštės ir turinys netinkamai atitinka, ir vizualiai sunku atskirti, kuri priklauso tai, nes mes ketiname naudoti CSS ir pamatysime, kaip iš esmės išspręsime šią situaciją.
Tam naudosime šiuos dalykus:

Mes turime dvi sąlygas tūkstabu pradeda pasakodami, kad yra vaikai trTačiau pirmą kartą nustatome, kad jo išlygiavimas bus kairėje, jis turės baltas raides ir fonas bus pilkas, antrame nurodome, kad kai kiekvienam tr yra tik vienas, mes jį sulygiuosime į dešinę , mes įdėsime šviesesnį pilką foną, o raidės bus tamsesnės pilkos.
Pažiūrėkime gautą kodą:

 [B] [/ b] pavyzdys 
 
 
Reitingas
Yam
Spalva
Dydis
 

 
 
Mėgstamiausia:
Obuoliai
Žalias
Vidutinis
 

 
 
2 mėgstamiausias:
Apelsinai
Oranžinė
Didelis
 

 
 
3 mėgstamiausias:
Granatas
Savotiškai žalsvai raudona
 
Skiriasi nuo vidutinio iki didelio
 

 

 

Dabar pažiūrėkime šio kodo rezultatą ir pastebėsime, kaip tokiu būdu mūsų lentelė yra daug labiau sutvarkyta ir galime atskirti, kuriam stulpeliui priklauso visi duomenys.

Kaip matome, šis pavyzdys suteikia mums viziją, koks turėtų būti stalas, tačiau jis vis dar toli gražu nėra tobulas. Kas nutiktų, pavyzdžiui, jei pridėtume kitą tūkst, informacijos eilutėje? Mes prarastume formatą, dėl kurio dirbtume kiekvieną kartą, kai lentelė keičia savo struktūrą.
Norėdami to išvengti, yra 3 elementai, kurie logiškai padalija lentelę, taip sakant: tėtis, kūnas, pėda. Turėdami tai, ką matėme, mes galime suprasti be daug teorinių paaiškinimų, todėl pereikime prie praktinio to pavyzdžio.

 Pavyzdys 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Reitingas
Yam
Spalva
Dydis
 

 
 
Reitingas
Yam
Spalva
Dydis
 
 
Mėgstamiausia:
Obuoliai
Žalias
Vidutinis
 

 
 
2 mėgstamiausias:
Apelsinai
Oranžinė
Didelis
 

 
 
3 mėgstamiausias:
Granatas
 
Savotiškai žalsvai raudona
Skiriasi nuo vidutinio iki didelio
 

 

 

 

Dabar pažiūrėkime šio rezultato:

Kaip matome, tai iš esmės yra pirmas dalykas, kurį padarėme, dabar lentelės apačioje matome, kad antraštę turime vienodai, tačiau kode matėme, kaip jie yra dvi skirtingos struktūros, taip pat turinys.
Tai baigę, mes baigiame savo HTML5 lentelių vadovėlį, turime atlikti tik keletą pratimų ir praktikuoti tai, ką išmokome.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką