Kas yra lentelės antraštės ir lentelės poraštės grupės naudojimas CSS

Kas Yra Lenteles Antrastes Ir Lenteles Porastes Grupes Naudojimas Css



Lentelės antraštė ir poraštė yra teksto blokai, išdėstyti atitinkamai lentelės pradžioje ir pabaigoje. Jie naudojami norint pateikti daugiau informacijos apie lentelę ir gali padėti apibrėžti konkrečioje lentelėje esančias reikšmes. Lentelės antraštės elementą žymi ' “, o lentelės poraštę žymi „ “ žymą.

Kas yra lentelės antraštės grupė?

CSS sistemoje „ Lentelės-antraštės grupė “ naudojamas lentelės antraštei rodyti per „ “ žymą. Antraštė atitinka pirmąjį įrašą vertikaliame stulpelyje. Nurodoma informacija apie lentelės įrašus. Jei reikia, antraštė taip pat gali apimti kelis stulpelius. Tai galima atlikti CSS sukūrus lentelių-stulpelių grupę.

Pavyzdys
Lentelės antraštės formatavimas skiriasi nuo kitų lentelės įrašų, kad būtų galima ją vizualiai atskirti. Paprastai jie nurodomi paryškintu šrifto dydžiu arba didesniu tekstu. Pateikdami „Vyrų“ ir „Moterų“ vardus, galime juos priskirti kaip antraštes atskiroje eilutėje, kaip parodyta toliau pateiktame pavyzdyje:







< stalo >
< thead >
< tr >
< th > Vyrai < / th >
< th > Moterys < / th >
< / tr >
< / thead >
< tkūnas >
< tr >
< td > Džeimsas < / td >
< td > Džesika < / td >
< / tr >
< tr >
< td > Deividas < / td >
< td > Laura < / td >
< / tr >
< tr >
< td > Jokūbas < / td >
< td > Rebeka < / td >
< / tr >
< / tkūnas >
< / stalo >

Šie veiksmai paaiškina, kaip sukurti lentelės antraštę:



  • Pridėkite ' “ žymą, kad sukurtumėte lentelę.
  • Kitame veiksme nurodykite „ “ žyma, nurodanti lentelės antraštę.
  • Pridėkite antraštės reikšmes kaip eilutę naudodami žymą „“ ir uždarykite antraštę naudodami žymą „“.
  • Dabar įtraukite „ “ žymą, kad pradėtumėte lentelės turinį.
  • Įdėkite kiekvienos eilutės duomenis naudodami žymą „“.
  • Užbaikite lentelės turinį ir lentelę naudodami „ “ ir „ “ žymas.

Išvestis



Kas yra lentelės poraštės grupė?

Stalo poraštės grupė “ naudojamas lentelės poraštei rodyti CSS naudojant „ “ žymą. Poraštėje taip pat pateikiama informacija apie lentelės turinį, kuri gali padėti skaitytojui aiškiau suprasti duomenis. Naudodami tą patį pavyzdį iš ankstesnės dalies, pridėkite poraštę, kurioje pateikiamas bendras įrašų skaičius kiekviename lentelės stulpelyje „Vyrai“ ir „Moterys“.





Pavyzdys
Šio pavyzdžio, paaiškinančio aptartą koncepciją, apžvalga:

< stalo >
< thead >
< tr >
< th >Vyrai< / th >
< th >Moterys< / th >
< / tr >
< / thead >
< tkūnas >
< tr >
< td >Džeimsas< / td >
< td >Džesika< / td >
< / tr >
< tr >
< td >Deividas< / td >
< td > Laura< / td >
< / tr >
< tr >
< td >Jokūbas< / td >
< td >Rebeka< / td >
< / tr >
< / tkūnas >
< tpėda >
< tr >
< td klasė = 'bg-grey-200' >Iš viso 03< / td >
< td klasė = 'bg-grey-200' >Iš viso 03< / td >
< / tr >
< / tpėda >
< / stalo >

Šie veiksmai paaiškina, kaip sukurti lentelės poraštę:



  • Panašiai kaip ir ankstesniame pavyzdyje, pridėkite „ “ žymą, kad sukurtumėte / įtrauktumėte lentelę.
  • Įtraukite ' “ žymą, kad nurodytumėte lentelės antraštę.
  • Dabar panašiai pridėkite antraštės pavadinimus kaip eilutę ir uždarykite antraštę naudodami „ “ žymą.
  • Prisiminkite aptartus metodus, kaip nurodyti lentelės turinį ir įtraukti į jį duomenis.
  • Dabar pridėkite „ “ žymą, kad pradėtumėte lentelės poraštę.
  • Pridėkite lentelės poraštės duomenis kaip eilutę ir uždarykite poraštę naudodami „ “ žymą.
  • Galiausiai užbaikite lentelę naudodami „ “ žymą.

Išvestis
Aukščiau parašytas kodas generuoja tokį rezultatą:

Išvada

Antraštė ir poraštė lentelėje CSS padeda pridėti daugiau informacijos atitinkamai lentelės viršuje ir apačioje. Ši informacija padeda nustatyti, apie ką yra lentelė, ir pateikia daugiau informacijos, esančios lentelėje įterptose reikšmėse. Kartu šie du puikiai įrėmina lentelėje pateiktus duomenis.