Paggamit ng CSS upang Magdagdag ng mga Internal na Hangganan sa isang Table ng HTML

Maaaring narinig mo na ang mga talahanayan ng CSS at HTML ay hindi nahahalo. Hindi ito ang kaso. Oo, ang paggamit ng mga talahanayan ng HTML para sa layout ay hindi na isang pinakamahusay na kasanayan sa disenyo ng web dahil pinalitan sila ng mga estilo ng layout ng CSS, ngunit ang mga talahanayan ay pa rin ang tamang markup na gagamitin upang magdagdag ng mga hangganan ng data sa isang webpage.

Dahil maraming mga propesyonal sa web ay nahihiya sa mga talahanayan na iniisip na wala silang problema, marami sa mga propesyunal ay may maliit na karanasan na nagtatrabaho sa karaniwang elemento ng HTML na ito, at nagpupumilit sila kapag kailangan nilang magdagdag ng mga panloob na linya sa mga cell ng talahanayan sa isang webpage.

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 mong gamitin ang HR tag upang magdagdag ng mga linya sa loob ng indibidwal na mga cell.

Upang ilapat ang mga estilo na sakop sa tutorial na ito, kailangan mo ng isang talahanayan sa isang webpage. Pagkatapos, lumikha ka ng isang style sheet bilang isang panloob na style sheet sa ulo ng iyong dokumento (kung nakikitungo ka sa isang solong pahina lamang) o naka-attach sa dokumento bilang isang panlabas na estilo ng sheet (kung ang site ay may maramihang mga pahina). Inilagay mo ang mga estilo upang magdagdag ng mga panloob na linya sa style sheet.

Bago ka magsimula

Magpasya kung saan mo gustong lumitaw ang mga linya sa 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
• Sa pagitan lamang ng mga hanay
• 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 isang grid effect, idagdag ang mga sumusunod sa iyong stylesheet:

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 hanay upang lumikha ng mga vertical na linya na tumatakbo mula sa itaas hanggang sa ibaba sa mga haligi ng talahanayan, idagdag ang mga sumusunod sa iyong stylesheet:

td, th {hangganan-kaliwa: solid 1px itim;}

Kung ayaw mong lumitaw ang mga vertical na linya sa unang haligi, idagdag mo ang isang klase ika at td mga cell. Sa halimbawang ito, ipagpalagay ang isang klase ng walang hanggan sa mga cell na iyon at alisin ang hangganan sa isang panuntunan sa CSS. Ang klase ng HTML na iyong ginagamit ay:

class = "no-border">

Pagkatapos, idagdag ang sumusunod na estilo sa 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 kang magdagdag ng mga pahalang na linya sa pagitan ng mga hanay na may isang simpleng estilo na idinagdag sa style sheet, tulad ng sumusunod:

tr {border-bottom: solid 1px black;}

Upang alisin ang hangganan mula sa ibaba ng talahanayan, muli mong idagdag ang isang klase sa iyon

tag:

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 mong idagdag ang klase sa hilera na gusto mo ang linya sa.

class = "border-bottom">

Pagkatapos, idagdag ang CSS sa iyong stylesheet:

.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">

Pagkatapos ay idagdag ang sumusunod na CSS sa iyong stylesheet:

.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 tag na panuntunan ().

Mga Kapaki-pakinabang na Tip

Kung napansin mo ang mga puwang sa iyong mga hangganan, tiyakin na ang estilo ng border-collapse ay nakatakda sa talahanayan. Idagdag ang sumusunod sa iyong stylesheet:

table {hangganan-pagbagsak: pagbagsak;}

Maaari mong maiwasan ang lahat at gamitin ang hangganan na katangian sa iyong talahanayan tag. Gayunpaman, gayunpaman, na ang katangiang ito, samantalang hindi pinahihintulutan, 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.