Ano ang Gamit ng Table-Header Group at Table-Footer Group sa CSS

Ano Ang Gamit Ng Table Header Group At Table Footer Group Sa Css



Ang Header at Footer ng isang talahanayan ay parehong mga bloke ng teksto na inilagay sa simula at dulo ng talahanayan, ayon sa pagkakabanggit. Ginagamit ang mga ito upang magbigay ng higit pang impormasyon tungkol sa talahanayan at maaaring makatulong na tukuyin ang mga halagang nakapaloob sa loob ng isang partikular na talahanayan. Ang elemento ng Table Header ay kinakatawan ng ' ” tag samantalang ang Table Footer ay kinakatawan ng “ ” tag.

Ano ang Table-Header Group?

Sa CSS, ang ' Pangkat ng Table-Header ' ay ginagamit upang ipakita ang header ng talahanayan sa pamamagitan ng ' ” tag. Ang header ay tumutugma sa unang entry sa isang patayong column. Tinutukoy nito ang impormasyon tungkol sa mga entry sa talahanayan. Ang header ay maaari ding sumaklaw ng maraming column kung kinakailangan. Magagawa ito sa pamamagitan ng paglikha ng Table-Column Group sa CSS.

Halimbawa
Ang header ng isang talahanayan ay may iba't ibang pag-format mula sa iba pang mga entry sa talahanayan upang maihiwalay ito nang biswal. Karaniwang kinakatawan ang mga ito ng bold na laki ng font o upper-scale na text. Kapag naglilista ng mga pangalan ng 'Mga Lalaki' at 'Kababaihan', maaari naming italaga ang mga ito bilang Mga Header sa magkahiwalay na hilera gaya ng ipinapakita sa halimbawa sa ibaba:







< mesa >
< thead >
< tr >
< ika > Lalaki < / ika >
< ika > Babae < / ika >
< / tr >
< / thead >
< tbody >
< tr >
< td > James < / td >
< td > Jessica < / td >
< / tr >
< tr >
< td > David < / td >
< td > Laura < / td >
< / tr >
< tr >
< td > Jacob < / td >
< td > Rebecca < / td >
< / tr >
< / tbody >
< / mesa >

Ipinapaliwanag ng mga sumusunod na hakbang kung paano gumawa ng Table-Header:



  • Idagdag ang ' ” tag para gumawa ng table.
  • Sa susunod na hakbang, tukuyin ang ' ” tag na tumutukoy sa header ng talahanayan.
  • Idagdag ang mga value ng header bilang isang row sa pamamagitan ng tag na “” at isara ang header sa pamamagitan ng tag na “”.
  • Ngayon, isama ang ' ” tag para simulan ang table body.
  • Ipasok ang data para sa bawat isa sa mga row gamit ang tag na “”.
  • Tapusin ang table body at ang table sa pamamagitan ng “ 'at' ” tag, ayon sa pagkakabanggit.

Output



Ano ang Table-Footer Group?

Ang ' Pangkat ng Table-Footer ' ay ginagamit upang ipakita ang footer ng isang talahanayan sa CSS sa tulong ng ' ” tag. Nagbibigay din ang footer ng impormasyon tungkol sa nilalaman ng talahanayan na makakatulong sa mambabasa sa pag-unawa sa data nang mas malinaw. Gamit ang parehong halimbawa mula sa nakaraang bahagi, idagdag ang footer na nagbibigay ng kabuuang bilang ng mga entry sa bawat column para sa 'Mga Lalaki' at 'Kababaihan' sa talahanayan.





Halimbawa
Pangkalahatang-ideya ng sumusunod na halimbawa na nagpapaliwanag ng tinalakay na konsepto:

< mesa >
< thead >
< tr >
< ika >Lalaki< / ika >
< ika >Babae< / ika >
< / tr >
< / thead >
< tbody >
< tr >
< td >James< / td >
< td >Jessica< / td >
< / tr >
< tr >
< td >David< / td >
< td >Laura< / td >
< / tr >
< tr >
< td >Jacob< / td >
< td >Rebecca< / td >
< / tr >
< / tbody >
< tfoot >
< tr >
< td klase = 'bg-gray-200' >Kabuuan 03< / td >
< td klase = 'bg-gray-200' >Kabuuan 03< / td >
< / tr >
< / tfoot >
< / mesa >

Ipinapaliwanag ng mga sumusunod na hakbang ang mga hakbang sa paggawa ng Table-Footer:



  • Katulad ng nakaraang halimbawa, idagdag ang ' ” tag para gumawa/magsama ng table.
  • Isama ang ' ” tag upang tukuyin ang header ng talahanayan.
  • Ngayon, sa katulad na paraan, idagdag ang mga pamagat ng header bilang isang hilera at isara ang header sa pamamagitan ng ' ” tag.
  • Alalahanin ang mga tinalakay na diskarte para sa pagtukoy sa katawan ng talahanayan at pagsasama ng data dito.
  • Ngayon, idagdag ang ' ” tag para simulan ang Table Footer.
  • Idagdag ang data para sa Table Footer bilang isang row at isara ang footer gamit ang “ ” tag.
  • Panghuli, tapusin ang talahanayan gamit ang ' ” tag.

Output
Ang nakasulat sa itaas na code ay bumubuo ng sumusunod na resulta:

Konklusyon

Ang Header at Footer sa isang Table sa CSS ay tumutulong upang magdagdag ng higit pang impormasyon sa itaas at ibaba ng isang talahanayan, ayon sa pagkakabanggit. Nakakatulong ang impormasyong ito upang matukoy kung tungkol saan ang talahanayan at nagbibigay ng higit pang detalyeng nilalaman sa loob ng mga halagang ipinasok sa talahanayan. Magkasama, perpektong naka-frame ang dalawang ito sa data na naka-encapsulated sa loob ng talahanayan.