Tabulas HTML5 - 2. daļa

Šīs apmācības 1. daļā mēs jau esam redzējuši, kā izveidot tikai teksta pamata tabulu bez stiliem, lai gan koda līmenī tas ir labi, bet vizuālā līmenī tas mums neparāda organizatorisko spēku, ko tabula var sniegt mūsu dati, Mūsu vietnēs daudzas reizes mums ir jāklasificē dati, elementi, informācija kopumā, tāpēc mēs varam izmantot labi izveidotu un reprezentatīvu tabulu.
Th elements
Elements tūkst ļauj mums izveidot mūsu tabulas galvenes, lai vizuāli identificētu mūsu slejas td ir dēls tr. Tās atribūti ir: colspan, rowspan, skala, galvenes, novecojušie atribūti šajā HTML5 specifikācijā ir šādi: abbr. ass, līdzinājums, platums, char, charoff, valign, bgcolor, augstums un nowrap, tvērums, ja paskatāmies detalizēti, šis elements darbojas ļoti līdzīgi td, tās CSS konvencija ir šāda:

 th {displejs: tabulas šūna; vertical-align: mantot; fonta svars: treknraksts; text-align: center; } 

Tagad redzēsim, kā to izmantot, lai izveidotu tabulu ar nedaudz lielāku formatējumu, nekā mēs to darījām iepriekš:

 Piemērs 
 
 
Rangs
Yam
 
Krāsa
Izmērs
 

 
 
Izlase:
 
Āboli
Zaļš
Vidējs
 

 
 
2. izlase:
 
Apelsīni
apelsīns
Liels
 

 
 
3. izlase:
 
Granātābols
Sava veida zaļgani sarkans
 
Atšķiras no vidēja līdz lielam
 

 

 

Kā mēs redzējām šajā piemērā, mēs varam ievietot elementu tūkst ietvaros tr, tā funkcija ir līdzīga td, tikai to izmanto, lai ģenerētu galvenes, parādītais kods dod mums šādu tabulu:

Mūsu tabula sāk izskatīties daudz labāk, tomēr tā joprojām ir ļoti vienkārša, un informācija nav tik skaidra kā vajadzētu, piemēram, galvenes un saturs neatbilst labā nozīmē, un vizuāli ir grūti atšķirt, pieder pie kuras, jo Mēs izmantosim CSS un redzēsim, kā mēs lielā mērā atrisināsim šo situāciju.
Šim nolūkam mēs izmantosim sekojošo:

Mums ir divi nosacījumi tūkstabi sāk ar to, ka stāsta mums, ka ir bērni trTomēr pirmajā vietā mēs novietojam to, ka tā izlīdzināšana būs pa kreisi, tai būs balti burti un fons būs pelēks, otrajā mēs norādām, ka tad, kad katram tr ir tikai viens, mēs to izlīdzināsim pa labi , mēs izvietojam gaišāku pelēku fonu, un burti būs tumšāk pelēki.
Apskatīsim iegūto kodu:

 Piemērs [b] [/ b] 
 
 
Rangs
Yam
Krāsa
Izmērs
 

 
 
Izlase:
Āboli
Zaļš
Vidējs
 

 
 
2. izlase:
Apelsīni
apelsīns
Liels
 

 
 
3. izlase:
Granātābols
Sava veida zaļgani sarkans
 
Atšķiras no vidēja līdz lielam
 

 

 

Tagad redzēsim šī koda rezultātu, un mēs pamanīsim, kā šādā veidā mūsu tabula ir daudz sakārtotāka un mēs varam atšķirt, kurai kolonnai pieder visi dati.

Kā redzam, šis piemērs sniedz mums priekšstatu par to, kādam vajadzētu būt galdam, tomēr tas joprojām ir tālu no ideāla. Kas notiktu, piemēram, ja pievienotu citu tūkst, informācijas rindā? Mēs zaudētu formātu, kas liktu mums strādāt katru reizi, kad tabula maina savu struktūru.
Lai no tā izvairītos, ir trīs elementi, kas loģiski sadala tabulu, tā sakot, tie ir: tētis, ķermenis, kājas. Ar redzēto mēs spējam saprasties bez liela teorētiska skaidrojuma, tāpēc pāriesim pie praktiska piemēra.

 Piemērs 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Rangs
Yam
Krāsa
Izmērs
 

 
 
Rangs
Yam
Krāsa
Izmērs
 
 
Izlase:
Āboli
Zaļš
Vidējs
 

 
 
2. izlase:
Apelsīni
apelsīns
Liels
 

 
 
3. izlase:
Granātābols
 
Sava veida zaļgani sarkans
Atšķiras no vidēja līdz lielam
 

 

 

 

Tagad redzēsim tā rezultātu:

Kā redzam, tā būtībā ir pirmā lieta, ko bijām izdarījuši, tagad tabulas apakšā redzam, ka galvene mums ir vienādi, tomēr kodā mēs redzējām, kā tās ir divas dažādas struktūras, kā arī saturu.
Ar to mēs pabeidzam mūsu HTML5 tabulu apmācību, mums atliek tikai veikt dažus vingrinājumus un praktizēt to, ko esam iemācījušies.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu