Paraan 1: Paggamit ng HTML 'width' Attribute
Ang ' lapad ” ay isang pangunahing katangian na ibinigay ng HTML. Itinatakda nito ang lapad o pahalang na haba ng elemento ng HTML. Upang ayusin ang data ng talahanayan, ginagamit ang attribute ng lapad sa mga hakbang sa ibaba.
Hakbang 1: Gumawa ng Table Hakbang 2: Magdagdag ng CSS Properties sa Elemento ng 'talahanayan'. Hakbang 3: Pagtatalaga ng Mga Katangian sa Elemento ng 'td'. Hakbang 4: Pagtatalaga ng Mga Katangian sa 'ika' na Element Ang output ay ipinapakita bilang: Ipinapakita ng snapshot sa itaas na ang lahat ng lapad ng column ay naayos sa 30% bawat isa. Ang nth-child() property ng CSS ay ginagamit para gumawa ng fixed-width na talahanayan. Nakukuha ng property na ito ang numero ng column at pinipili ang “ Ang output ng bloke ng code sa itaas ay: Ipinapakita ng output na ito na ang mga numero ng column 1 at 3 ay naayos sa lapad na 10%. Sa loob ng ' mesa ” seksyon sa bahagi ng CSS idagdag ang “ table-layout: naayos ” property upang itakda ang “lapad” ng mga elemento ng talahanayan ng data: Sa HTML file, idagdag ang “ Pagkatapos isagawa ang snippet ng code sa itaas, ang output ay: Iyon ay kung paano maaaring ayusin ng user ang lapad ng data ng talahanayan Upang ayusin ang lapad ng data ng talahanayan, gamitin ang ' lapad 'attribute,' nth-child( ) 'separator, at'
Sa HTML file, gumamit ng “ 'at' ” tag at isulat ang data dito:
< gitna >
< mesa >
< tr >
< ika > Pangalan < / ika >
< ika > Katayuan < / ika >
< ika > Bilang ng silid < / ika >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Mag-aaral < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Mag-aaral < / td >
< td > 06 < / td >
< / tr >
< / mesa >
< / gitna >
Gamitin ang tagapili ng elemento ng talahanayan sa CSS at idagdag ang “ hangganan 'ng 1px solid red,' text-align ' inaayos ang teksto sa gitna, at ' lapad ” na nagtatakda ng kabuuang lapad ng talahanayan sa 80%:
mesa {
hangganan : 1px solid na pula;
text- ihanay : gitna;
lapad : 80 %; }
Gamitin ang ' td ” tagapili ng elemento at itinatakda ang “ hangganan-ibaba 'ng 5px solid red,' padding ” ng 20px upang gawing mas kitang-kita ang item, at “ lapad ” itinakda bilang 30%:
td {
border-bottom: 5px solid na pula;
padding:20px;
lapad : 30 %;
}
Gamitin ang ' ika ' tagapili ng elemento upang baguhin ang kulay ng ' hangganan-ibaba ” mula pula hanggang sea green para lumikha ng mas magandang visualization:
ika {
border-bottom: 5px solid seagreen;
padding:20px;
lapad : 30 %;
}
Paraan 2: Gamit ang 'nth-child( )' Selector
'at' ” mga tag. Halimbawa, ang lapad ay ' nakapirming ' para lamang sa mga numero ng hanay ' 1 'at' 3 ”. Ang bawat isa sa mga column na ito ay nakakakuha ng lapad na 10%. Matagumpay na naipakita ng artikulong ito kung paano ayusin ang lapad ng talahanayan ng data. td:ika-anak ( 3 ) {
lapad : 10 %;
}
ika:ika-anak ( 1 ) {
lapad : 10 %;
}
Paraan 3: Paggamit ng
table-layout: naayos;
lapad : 80 %;
hangganan : 1px solid na pula;
text- ihanay : gitna;
}
< col istilo = 'lapad: 15%;' / >
< col istilo = 'lapad: 30%;' / >
na mga elemento.
Konklusyon
.