Pagkat-on unsaon paghimo sa usa ka border sa CSS table sa lima lang ka minutos
Tingali nakadungog ka nga ang CSS ug HTML nga mga lamesa dili magsagol. Dili kini tinuod. Oo, ang paggamit sa mga lamesa sa HTML alang sa layout dili na usa ka maayong disenyo sa web, nga gipulihan sa estilo sa CSS layout, apan ang mga lamesa mao pa ang husto nga markup nga gamiton aron makadugang sa tabular data ngadto sa webpage.
Ikasubo, tungod kay daghan kaayong mga propesyonal sa web ang nahilayo gikan sa mga lamesa nga naghunahuna nga sila hilo, daghan sa mga propesyonal nga adunay gamay nga kasinatian nga nagtrabaho uban niining komon nga elemento sa HTML ug sa pakigbisog sa diha nga sila kinahanglan nga mogamit niini sa usa ka webpage. Pananglitan, kung ikaw adunay usa ka lamesa sa usa ka panid ug gusto nimo nga idugang ang internal nga mga linya sa mga selda sa lamesa.
Mga Border sa Tabel sa CSS
Sa diha nga ikaw naggamit sa CSS aron sa pagdugang sa mga utlanan sa mga lamesa, kini nagdugang lamang sa utlanan palibot sa gawas sa lamesa. Kon gusto nimong idugang ang internal nga mga linya sa tagsa-tagsa nga mga selula sa lamesa, kinahanglan nimo nga idugang ang mga utlanan sa sulod nga CSS nga mga elemento. Mahimo usab nimo gamiton ang HR tag aron idugang ang mga linya sulod sa tagsa-tagsa nga mga selula.
Aron mapadapat ang mga estilo nga gikobrehan niining artikuloha, klaro nga adunay lamesa sa imong web page. Dayon maghimo ka og style sheet isip internal style sheet sa ulo sa imong dokumento (lagmit mahimo nimo kini kung ang imong "site" usa ka pahina) o gilakip sa dokumento isip usa ka external style sheet (mao kini ang imong ang buhaton kon ang imong site adunay daghang mga pahina - nga nagtugot kanimo sa estilo sa tanang mga panid gikan sa usa ka eksternal nga panid). Imong ibutang ang mga estilo aron idugang ang mga linya sa sulod sa estilo sa estilo.
Sa Dili Ka pa Magsugod
Una kinahanglan nga magdesisyon kung asa nimo gusto ang linya nga makita sa imong lamesa. Adunay daghang mga kapilian, lakip ang:
- Gilibutan ang tanang mga selula aron maporma ang grid;
- Ibutang ang mga linya sa mga kolum lamang;
- Tali tali sa mga laray; o
- Tali sa mga piho nga mga kolum o mga laray.
Mahimo usab nimo ipahiluna ang linya sa mga tagsa ka mga selula o sa sulod sa mga indibidwal nga mga selula.
Unsaon Pagdugang sa mga Linya sa Tanan nga mga Cell sa usa ka Talaan
Aron makadugang sa mga linya sa palibot sa tanang mga selula sa imong lamesa, paghimo sa grid nga sama sa epekto, idugang ang mosunod sa imong style sheet:
td, n {
utlanan: solid 1px itom;
}
Unsaon Pagdugang sa mga Linya Tali sa Mga Kolum lamang sa Talaan
Aron idugang ang mga linya tali sa mga kolum (kini nagmugna sa mga linya nga nagbarug nga gikan sa ibabaw ngadto sa ubos sa mga kolum sa lamesa), idugang ang mosunod sa imong style sheet:
td, n {
border-left: solid 1px black;
}
Dayon, kon dili nimo gusto nga makita sila sa unang kolum, kinahanglan nimo nga idugang ang usa ka klase sa mga selula ug mga selula nga td . Sa niini nga panig-ingnan, kita naghunahuna nga kita adunay usa ka klase sa no-border sa maong mga selula ug atong giwagtang ang utlanan uban niining mas piho nga lagda sa CSS. Busa ania ang klase sa HTML nga atong gamiton:
class = "no-border">
Ug dayon mahimo namong idugang ang mosunod nga estilo sa among style sheet:
.no-border {
utlanan-wala: wala;
}
Unsaon Pagdugang sa mga Linya Tali sa Mga Linya sa Usa ka Lamesa
Sama sa pagdugang sa mga linya tali sa mga kolum, mahimo nimo kini pinaagi sa usa ka yano nga estilo nga idugang sa estilo sa imong estilo. Ang ubos sa CSS makadugang sa bertikal nga mga linya tali sa matag laray sa among lamesa:
tr {
border-bottom: solid 1px black;
}
Ug aron makuha ang utlanan gikan sa ubos sa lamesa, imong pag-usab pag-usab ang usa ka klase sa maong tag:
class = "no-border">
Idugang ang mosunod nga estilo sa imong style sheet:
.no-border {
utlanan-sa ubos: wala;
}
Unsaon Pagdugang sa mga Linya sa Tino nga Mga Kolum o Mga Tumboy sa Tabel
Kung gusto nimo ang mga linya sa tunga nga pila ka laray o kolum, kinahanglan nimo nga gamiton ang klase sa mga selula o mga linya. Ang pagdugang sa usa ka linya tali sa mga kolum mas lisud kaysa sa mga linya tungod kay kinahanglan nimo nga idugang ang klase sa matag selula sa maong kolum. Kon ang imong lamesa awtomatiko nga gikan sa usa ka CMS sa usa ka matang , kini dili posible, apan kon ikaw nag-abli sa panid sa panid, mahimo nimong idugang ang angay nga mga klase kung kinahanglanon aron makab-ot kini nga epekto.
class = "side-border">
Ang pagdugang sa mga linya tali sa mga tudling mas sayon, tungod kay mahimo nimong idugang ang klase sa laray nga gusto nimo sa linya.
class = "border-bottom">
Dayon idugang ang CSS sa imong style sheet:
.border-side {
border-left: solid 1px black;
}
.border-bottom {
border-bottom: solid 1px black;
}
Unsaon Pagdugang og mga Linya libot sa mga Cell sa Indibidwal sa usa ka Talaan
Aron makadugang sa mga linya palibot sa tagsa-tagsa nga mga selula, imong idugang ang usa ka klase sa mga selula nga gusto nimo nga adunay utlanan:
class = "border">
Ug dayon idugang ang mosunod nga CSS sa imong style sheet:
.border {
utlanan: solid 1px itom;
}
Unsaon Pagdugang sa mga Linya sa Indibidwal nga mga Cell sa usa ka Talaan
Kon gusto nimong idugang ang mga linya sulod sa mga sulod sa usa ka cell, ang labing sayon nga paagi sa paghimo niini mao ang pahalang nga tag sa tag (
).
Mapuslanong mga Sugyot
Kon makita nimo ang mga kal-ang diha sa imong mga utlanan, kinahanglan nga imong sigurohon nga ang estilo sa pagguba sa utlanan gipahimutang sa imong lamesa. Idugang ang mosunod sa imong style sheet:
lamesa {
pagbagsak sa utlanan: pagkahugno;
}
Mahimo nimo malikayan ang tanan nga CSS sa ibabaw ug gamiton ang hiyas sa utlanan sa tag sa imong lamesa. Hinumdomi, bisan pa niana, nga ang iyang kinaiya, bisan wala pa matuman, dili kaayo masayon kaysa CSS, tungod kay mahimo mo lamang ipasabot ang gilapdon sa utlanan ug mahimo lamang kini nga anaa sa tanang mga selula sa lamesa o wala.