Alamin kung paano lumikha ng hangganan ng CSS table sa loob lamang ng limang minuto
Maaaring narinig mo na ang mga talahanayan ng CSS at HTML ay hindi nahahalo. Ito ay hindi totoo. Oo, ang paggamit ng mga talahanayan ng HTML para sa layout ay hindi na isang praktikal na kasanayan sa disenyo ng web, na pinalitan ng mga estilo ng layout ng CSS, ngunit ang mga talahanayan pa rin ang tamang markup na gagamitin upang magdagdag ng mga hangganan ng data sa isang webpage.
Sa kasamaang palad, dahil napakaraming mga propesyonal sa web ang nakaharang sa mga talahanay na nag-iisip na sila ay lason, marami sa mga propesyunal ay may maliit na karanasan na nagtatrabaho sa karaniwang elemento ng HTML at ang pakikibaka kapag mayroon silang hawakan ang mga ito sa isang webpage. Halimbawa, kung mayroon kang isang talahanayan sa isang pahina at gusto mong magdagdag ng mga panloob na linya sa mga cell ng talahanayan.
Mga Border ng Table ng CSS
Kapag gumamit ka ng CSS upang magdagdag ng mga hangganan sa mga talahanayan, idinagdag lamang nito ang hangganan sa paligid ng labas ng talahanayan. Kung nais mong magdagdag ng mga panloob na linya sa indibidwal na mga cell ng mesa na iyon, kailangan mong magdagdag ng mga hangganan sa mga panloob na elemento ng CSS. Maaari mo ring gamitin ang HR tag upang magdagdag ng mga linya sa loob ng mga indibidwal na cell.
Upang mailapat ang mga estilo na sakop sa artikulong ito, dapat kang malinaw na magkaroon ng talahanayan sa iyong web page. Dapat kang lumikha ng isang style sheet bilang isang panloob na style sheet sa ulo ng iyong dokumento (malamang na gawin lamang ito kung ang iyong "site" ay isang solong pahina) o naka-attach sa dokumento bilang isang panlabas na style sheet (ito ang iyong ay gagawin kung ang iyong site ay maraming mga pahina - na nagbibigay-daan sa iyo upang estilahin ang lahat ng mga pahina mula sa isang panlabas na sheet). Ilalagay mo ang mga estilo upang magdagdag ng mga panloob na linya papunta sa style sheet na iyon.
Bago ka magsimula
Una kailangan mong magpasya kung saan mo nais ang mga linya na lumitaw sa iyong talahanayan. Mayroon kang ilang mga pagpipilian, kabilang ang:
- Palibutan ang lahat ng mga cell upang bumuo ng isang grid;
- Puwesto ang mga linya sa pagitan lamang ng mga haligi;
- Lamang sa pagitan ng mga hilera; o
- Sa pagitan ng mga partikular na hanay o hanay.
Maaari mo ring ilagay ang mga linya sa paligid ng indibidwal na mga cell o sa loob ng indibidwal na mga cell.
Paano Magdaragdag ng mga Linya sa Palibot ng Lahat ng Mga Cell sa isang Table
Upang magdagdag ng mga linya sa paligid ng lahat ng mga cell sa iyong talahanayan, ang paglikha ng parilya na tulad ng effect, idagdag ang mga sumusunod sa iyong style sheet:
td, th {
hangganan: solid 1px itim;
}
Paano Magdaragdag ng mga Linya sa Pagitan ng Mga Haligi lamang sa isang Table
Upang magdagdag ng mga linya sa pagitan ng mga haligi (lumilikha ito ng mga vertical na linya na tumatakbo mula sa itaas hanggang sa ibaba sa mga haligi ng talahanayan), idagdag ang mga sumusunod sa iyong style sheet:
td, th {
hangganan-kaliwa: solid 1px itim;
}
Pagkatapos, kung hindi mo nais na lumitaw ang mga ito sa unang haligi, kakailanganin mong magdagdag ng isang klase sa mga ika - apat na sel at td . Sa halimbawang ito, ipinapalagay namin na mayroon kaming isang klase ng no-border sa mga cell na iyon at inaalis namin ang hangganan na may mas partikular na patakaran ng CSS. Kaya dito ay ang klase ng HTML na gagamitin namin:
class = "no-border">
At pagkatapos ay maaari naming idagdag ang sumusunod na estilo sa aming style sheet:
.walang hanggan {
border-left: none;
}
Paano Magdaragdag ng mga Linya sa Pagitan ng Mga Lahi sa isang Table
Tulad ng pagdaragdag ng mga linya sa pagitan ng mga haligi, maaari mo itong gawin sa isang simpleng estilo na idinagdag sa iyong style sheet. Ang ibaba ng CSS ay magdaragdag ng mga vertical na linya sa pagitan ng bawat hilera ng aming talahanayan:
tr {
border-bottom: solid 1px black;
}
At upang alisin ang hangganan mula sa ibaba ng talahanayan, muli mong idagdag ang isang klase sa tag na iyon:
class = "no-border">
Idagdag ang sumusunod na estilo sa iyong style sheet:
.walang hanggan {
border-bottom: none;
}
Paano Magdaragdag ng mga Linya sa Pagitan ng Mga Tukoy na Mga Haligi o Mga Hilera sa isang Table
Kung gusto mo lamang ng mga linya sa pagitan ng mga partikular na hanay o haligi, kailangan mong gumamit ng isang klase sa mga selula o mga hanay. Ang pagdaragdag ng isang linya sa pagitan ng mga haligi ay bahagyang mas mahirap kaysa sa pagitan ng mga hanay dahil kailangan mong idagdag ang klase sa bawat cell sa hanay na iyon. Kung ang iyong talahanayan ay awtomatikong nalikha mula sa isang uri ng CMS , maaaring hindi ito posible, ngunit kung ikaw ay naka-coding sa pahina, maaari kang magdagdag ng mga naaangkop na klase kung kinakailangan upang makamit ang epekto na ito.
class = "side-border">
Ang pagdagdag ng mga linya sa pagitan ng mga hilera ay mas madali, dahil maaari mo lamang idagdag ang klase sa hilera na gusto mo ang linya sa.
class = "border-bottom">
Pagkatapos ay idagdag ang CSS sa iyong style sheet:
.border-side {
hangganan-kaliwa: solid 1px itim;
}
.border-bottom {
border-bottom: solid 1px black;
}
Paano Magdaragdag ng mga Linya Paikot Indibidwal na Mga Cell sa isang Table
Upang magdagdag ng mga linya sa paligid ng mga indibidwal na cell, magdagdag ka ng isang klase sa mga cell na gusto mo ng isang border sa paligid:
class = "border">
At pagkatapos ay idagdag ang sumusunod na CSS sa iyong style sheet:
.border {
hangganan: solid 1px itim;
}
Paano Magdaragdag ng Mga Linya sa Indibidwal na Mga Cell sa isang Table
Kung nais mong magdagdag ng mga linya sa loob ng mga nilalaman ng isang cell, ang pinakamadaling paraan upang gawin ito ay ang pahalang na tag ng rule (
).
Mga Kapaki-pakinabang na Tip
Kung napansin mo ang mga puwang sa iyong mga hangganan, dapat mong tiyakin na ang estilo ng border-collapse ay nakatakda sa iyong talahanayan. Idagdag ang mga sumusunod sa iyong style sheet:
table {
hangganan-pagbagsak: pagbagsak;
}
Maaari mong maiwasan ang lahat ng nasa itaas ng CSS at gamitin ang hangganan na katangian sa iyong talahanayan tag. Gayunpaman, gayunpaman, na ang kanyang katangian, bagaman hindi na-deprecated, ay hindi gaanong nababaluktot kaysa sa CSS, dahil maaari mo lamang tukuyin ang lapad ng hangganan at maaari lamang itong magkaroon sa paligid ng lahat ng mga cell ng talahanayan o wala.