HTML5 - išplėstiniai lentelių stiliai

Pagal naujas specifikacijas HTML5 Y CSS Yra keletas stilių, kuriuos galima pritaikyti lentelėms, siekiant toliau apibrėžti ir pritaikyti jų elgseną prie to, ką mes galvojame, kad sukurtume puslapius ar dokumentus. Elementai, kuriuos galime keisti, yra lentelių kraštai, tuščių langelių tvarkymas, įskaitant tos pačios lentelės išdėstymą.
siena-žlugimas
Nurodo, kaip kraštinės tvarkomos gretimuose langeliuose, šios savybės gali būti laikomos šiomis vertėmis: žlugti Y atskirti.
Naudodami šią ypatybę galime valdyti naršyklės brėžinių brėžinius, pažiūrėkime šį vaizdą, kaip naršyklė ją tvarko pagal numatytuosius nustatymus:

Pastebime, kad ant stalo nubrėžta kraštinė, o kiekvienoje tos pačios ląstelės brėžiama kita siena, tai sukuria dvigubos kraštinės efektą, dabar pažiūrėkime, kaip siena-žlugimas mes galime išspręsti šią problemą.

 Pavyzdys 
 2011 m. Vaisių tyrimo rezultatai 

 
 
Reitingas
Yam
Spalva
 
Dydis ir balsai
 

 

 

 
 
Mėgstamiausia:
Obuoliai
Žalias
 
Vidutinis
500
 

 
 
2 mėgstamiausias:
Apelsinai
Oranžinė
 
Didelis
450
 

 

 
 
 Vaisių duomenų įmonės
 

 

 

Prieš tęsdami paaiškinimą, pažiūrėkime, ką šis kodas sukuria naršyklėje:

Sutraukimo vertė, kurią mes įtraukiame į ribos sutraukimo ypatybę, mums sako, kad nenorime, kad ant kiekvieno gretimo elemento būtų nubrėžta kraštinė, o tai sukuria efektą, kurį matėme ankstesniame paveikslėlyje.
Atskirų kraštų nustatymas
Jei vietoj naudojimo žlugti mes naudojame atskirą numatytąją ypatybę „border-collapse“, galime naudoti papildomas ypatybes, pvz tarpas tarp sienų Norėdami apibrėžti tarpą tarp gretimų elementų sienų, pažiūrėkime pavyzdį:

 Pavyzdys 
 2011 m. Vaisių tyrimo rezultatai 

 
 
Reitingas
Yam
Spalva
 
Dydis ir balsai
 

 

 

 
 
Mėgstamiausia:
Obuoliai
Žalias
 
Vidutinis
500
 

 
 
2 mėgstamiausias:
Apelsinai
Oranžinė
 
 

 

 
 
Vaisių duomenų įmonės
 

 

 

Šiame pavyzdyje mes tiesiog nurodome, kad kraštinė turi 10 pikselių tarpą gretimiems elementams, pažiūrėkime pavyzdį, kaip tai išverčiama į naršyklę:

Tuščių langelių tvarkymas
Kaip matėme ankstesniame paveikslėlyje, naršyklė tuščioms ląstelėms taip pat priskiria tarpą su kraštu, kartais to galime nenorėti savo lentelėje, todėl galime atlikti šiuos ankstesnio kodo pakeitimus, kad galėtume susidoroti su tuščiais langeliais ląstelės.

Pažiūrėkime, kaip tai atrodo naršyklėje:

Iš tiesų, mes galėjome atsikratyti tuščių langelių neprarasdami savo lentelės formato.
Tuo baigiame vadovėlį, nes matome, kad galime daug ką pakeisti savo lentelėse, kad pritaikytume jas prie to, ką galime suvokti ir pritaikyti savo poreikiams.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką