Aprann kijan pou kreye yon fwontyè CSS tab nan senk minit sèlman
Ou ka tande ke CSS ak tab HTML pa melanje. Sa a se tou senpleman pa vre. Wi, lè l sèvi avèk tablo tab pou layout se pa yon pi bon konsepsyon sit entènèt wèb, yo te ranplase pa estil layout CSS, men tab yo toujou markup ki kòrèk la yo sèvi ak ajoute done tabulèr nan yon Paj Web.
Malerezman, paske anpil pwofesyonèl entènèt yo te bloke lwen tab yo panse ke yo anpwazonnen, anpil nan pwofesyonèl sa yo pa gen anpil eksperyans k ap travay ak eleman HTML komen sa a ak lit yo lè yo gen okipe yo sou yon paj entènèt. Pou egzanp, si ou gen yon tab sou yon paj epi ou vle ajoute liy entèn nan selil yo tab.
CSS Table Borders
Lè ou sèvi ak CSS ajoute sou fwontyè a tab, li sèlman ajoute fwontyè a alantou deyò a nan tab la. Si ou vle ajoute liy entèn nan selil endividyèl yo nan ki tab, ou bezwen ajoute sou fwontyè eleman yo CSS enteryè. Ou ka itilize tou HR la pou ajoute liy anndan selil endividyèl yo.
Yo nan lòd yo aplike estil ki kouvri nan atik sa a, ou ta dwe evidamman gen yon tab nan paj entènèt ou an. Ou ta dwe kreye yon fèy estil kòm yon fèy estil entèn nan tèt dokiman ou (ou pral gen chans sèlman fè sa si "sit ou" se yon paj sèl) oswa tache ak dokiman an kòm yon fèy estil ekstèn (sa a se sa ou ap fè si sit ou a se paj miltip - ki pèmèt ou style tout paj yo nan yon fèy ekstèn). Ou pral mete estil yo ajoute liy enteryè nan fèy style sa a.
Anvan ou kòmanse
Premye ou bezwen deside ki kote ou vle liy yo parèt nan tab ou. Ou gen plizyè chwa, tankou:
- Ki antoure tout selil yo pou fòme yon kadriyaj;
- Pozisyon liy yo ant jis kolòn yo;
- Jis ant ranje yo; oswa
- Ant kolòn espesifik oswa ranje.
Ou kapab tou pozisyon liy yo nan selil endividyèl oswa anndan selil endividyèl yo.
Ki jan yo ajoute liy atravè tout selil ki nan yon tab
Pou ajoute liy alantou tout selil ki nan tab ou a, kreye ke efè kadriyaj tankou, ajoute sa ki annapre yo nan fèy style ou a:
td, th {
fwontyè: solid 1px nwa;
}}
Ki jan yo ajoute liy ant jis kolòn yo nan yon tab
Pou ajoute liy ant kolòn yo (sa a kreye liy vètikal ki kouri soti nan tèt jouk anba sou kolòn tab la), ajoute sa ki annapre yo nan fèy style ou a:
td, th {
fwontyè-bò gòch: solid 1px nwa;
}}
Lè sa a, si ou pa vle yo parèt sou kolòn an premye, ou pral bezwen ajoute yon klas nan sa yo selil th ak td . Nan egzanp sa a, nou sipoze nou gen yon klas nan fwontyè pa- sou selil sa yo epi nou retire fwontyè a ak règleman sa a plis espesifik CSS. Se konsa, isit la se klas la HTML nou ta itilize:
klas = "pa gen okenn fwontyè">
Lè sa a, nou te kapab ajoute style sa a nan fèy style nou an:
.no-fontyè {
fontyè-bò gòch: pa;
}}
Ki jan yo ajoute liy ant jis ranje yo nan yon tablo
Menm jan ak ajoute liy ant kolòn yo, ou ka fè sa ak jis yon sèl style senp ajoute nan fèy style ou a. CSS ki anba la a ta ka ajoute liy vètikal ant chak ranje tab nou an:
Tr {
fontyè-anba: solid 1px nwa;
}}
Ak yo retire fwontyè a anba nan fon an nan tablo a, ou ta yon lòt fwa ankò ajoute yon klas nan ki etikèt TR:
klas = "pa gen okenn fwontyè">
Add style ki anba la a fèy style ou a:
.no-fontyè {
fontyè-anba: okenn;
}}
Ki jan yo ajoute Liy ant Kolòn espesifik oswa ranje nan yon tablo
Si ou sèlman vle liy ant ranje espesifik oswa kolòn, ou bezwen sèvi ak yon klas sou selil sa yo oswa ranje. Ajoute yon liy ant kolòn se yon ti kras pi difisil pase ant ranje paske ou oblije ajoute klas la nan chak selil ki nan kolòn. Si tab ou otomatikman pwodwi nan yon kalite CMS , sa ka pa posib, men si ou men kodaj paj la, ou ta ka ajoute klas apwopriye jan sa nesesè pou reyalize efè sa a.
klas = "bò fontyè">
Ajoute liy ant ranje se pi fasil, menm jan ou ka jis ajoute klas la ranje a ou vle liy lan sou.
klas = "fontyè-anba">
Lè sa a, ajoute CSS nan fèy style ou a:
Border-bò {
fwontyè-bò gòch: solid 1px nwa;
}}
.Border-anba {
fontyè-anba: solid 1px nwa;
}}
Ki jan yo ajoute liy atravè selil endividyèl nan yon tablo
Pou ajoute liy nan selil endividyèl, ou ajoute yon klas nan selil yo ou vle yon fwontyè alantou:
klas = "fwontyè">
Lè sa a, ajoute CSS sa yo nan fèy style ou a:
.Border {
fwontyè: solid 1px nwa;
}}
Ki jan yo ajoute Liy andedan selil endividyèl nan yon tab
Si ou vle ajoute liy andedan sa ki nan yon selil, fason ki pi fasil fè sa a se ak tag nan règ orizontal (
).
Konsèy itil
Si ou remake twou vid ki genyen nan fwontyè ou yo, ou ta dwe asire ke style la fwontyè-efondreman mete sou tab ou. Ajoute sa ki annapre yo nan fèy style ou a:
tab {
fwontyè-efondreman: efondre;
}}
Ou ka evite tout CSS ki pi wo a epi sèvi ak atribi fwontyè a nan tag tab ou. Reyalize, sepandan, ke atribi li, pandan y ap pa deprecated, se siyifikativman mwens fleksib pase CSS, menm jan ou ka sèlman defini lajè fwontyè a epi li ka sèlman genyen li nan tout selil nan tablo a oswa okenn.