Jifunze jinsi ya kuunda mpaka wa meza ya CSS kwa dakika tano tu
Huenda umesikia kwamba meza za CSS na HTML hazichanganyiki. Hii siyo kweli. Ndiyo, kutumia meza za HTML kwa mpangilio haviwe tena kubuni wavuti bora, baada ya kubadilishwa na mitindo ya mpangilio wa CSS, lakini meza bado ni markup sahihi ya kutumia ili kuongeza data ya barua pepe kwenye ukurasa wa wavuti.
Kwa bahati mbaya, kwa sababu wataalamu wengi wa wavuti wameondoka kwenye meza kufikiria kuwa ni sumu, wengi wa wataalam hawa wana uzoefu mdogo kufanya kazi na hii kipengele HTML kawaida na mapambano wakati wao kushughulikia yao kwenye ukurasa wa wavuti. Kwa mfano, ikiwa una meza kwenye ukurasa na unataka kuongeza mistari ya ndani kwenye seli za meza.
Mipaka ya Jedwali la CSS
Unapotumia CSS ili kuongeza mipaka kwenye meza, inaongeza tu mpaka karibu na meza. Ikiwa unataka kuongeza mistari ya ndani kwa seli za kila mtu za meza hiyo, unahitaji kuongeza mipaka kwenye mambo ya ndani ya CSS. Unaweza pia kutumia lebo ya HR ili kuongeza mistari ndani ya seli za mtu binafsi.
Ili kutumia mitindo iliyofunikwa katika makala hii, unapaswa kuwa na meza kwenye ukurasa wako wa wavuti. Unapaswa kuunda karatasi ya mtindo kama karatasi ya ndani ya kichwa katika kichwa cha hati yako (utawezekana tu kufanya hivyo kama "tovuti" yako ni ukurasa mmoja) au ambatanishwa na waraka kama karatasi ya nje ya nje (hii ndio wewe utafanya kama tovuti yako ni kurasa nyingi - kukuwezesha mtindo wa kurasa zote kutoka kwa karatasi moja nje). Utaweka mitindo ya kuongeza mistari ya ndani ndani ya karatasi hiyo ya mtindo.
Kabla ya Kuanza
Kwanza unahitaji kuamua wapi mstari utaonekana kwenye meza yako. Una chaguo kadhaa, ikiwa ni pamoja na:
- Kuzunguka seli zote ili kuunda gridi ya taifa;
- Kuweka mistari kati ya nguzo tu;
- Tu kati ya safu; au
- Kati ya nguzo maalum au safu.
Unaweza pia kuweka mstari karibu na seli za mtu binafsi au ndani ya seli za kibinafsi.
Jinsi ya kuongeza Mistari Kote kwa seli zote katika Jedwali
Ili kuongeza mistari karibu na seli zote zilizo kwenye meza yako, na kuunda athari hiyo kama gridi, ongeza zifuatazo kwa karatasi yako ya mtindo:
td, th {
mpaka: imara 1px nyeusi;
}
Jinsi ya kuongeza Mipaka kati ya nguzo tu kwenye Jedwali
Ili kuongeza mistari kati ya nguzo (hii inafanya mistari ya wima inayoendeshwa kutoka juu hadi chini kwenye safu ya meza), ongeza zifuatazo kwa karatasi yako ya mtindo:
td, th {
mpaka-kushoto: imara 1px nyeusi;
}
Kisha, ikiwa hutaki kuonekana kwenye safu ya kwanza, utahitaji kuongeza darasa kwa seli za t na td . Katika mfano huu, tunadhani tuna darasa la mipaka kwenye seli hizo na tunaondoa mpaka na utawala huu maalum zaidi wa CSS. Kwa hiyo hapa ni darasa la HTML tunaloweza kutumia:
darasa = "hakuna mpaka">
Na kisha tunaweza kuongeza mtindo uliofuata kwa karatasi yetu ya mtindo:
.ni mpaka {
mpaka-kushoto: hakuna;
}
Jinsi ya kuongeza Mipaka kati ya Mishale tu katika Jedwali
Kama kwa kuongeza mistari kati ya nguzo, unaweza kufanya hivyo kwa style moja tu rahisi iliyoongezwa kwenye karatasi yako ya mtindo. Chini ya CSS itaongeza mistari ya wima kati ya kila safu ya meza yetu:
tr {
mpaka-chini: imara 1px nyeusi;
}
Na kuondoa kikomo kutoka chini ya meza, ungeweza tena kuongeza darasa kwa tr tag hiyo:
darasa = "hakuna mpaka">
Ongeza mtindo unaofuata kwa karatasi yako ya mtindo:
.ni mpaka {
mpaka-chini: hakuna;
}
Jinsi ya kuongeza Mipaka kati ya nguzo maalum au safu katika Jedwali
Ikiwa unataka tu mistari kati ya safu maalum au safu, unahitaji kutumia darasa kwenye seli hizo au safu. Kuongeza mstari kati ya nguzo ni vigumu kidogo kuliko kati ya mistari kwa sababu unahitaji kuongeza darasa kwa kila kiini katika safu hiyo. Ikiwa meza yako inazalishwa kwa moja kwa moja kutoka kwa CMS ya aina fulani , hii haiwezekani, lakini ikiwa unakiliana mkono ukurasa, unaweza kuongeza madarasa sahihi kama inahitajika kufikia athari hii.
darasa = "upande wa mpaka">
Kuongeza mistari kati ya mistari ni rahisi sana, kwa kuwa unaweza kuongeza tu darasa kwenye safu unayotaka mstari.
darasa = "mpaka-chini">
Kisha kuongeza CSS kwenye karatasi yako ya mtindo:
upande wa mbali {
mpaka-kushoto: imara 1px nyeusi;
}
chini ya chini {
mpaka-chini: imara 1px nyeusi;
}
Jinsi ya kuongeza Mistari Kote ya Viini Kila Mtu katika Jedwali
Ili kuongeza mistari karibu na seli za kila mtu, unaua darasani kwa seli unayotaka mpaka:
darasa = "mpaka">
Na kisha kuongeza CSS zifuatazo kwa karatasi yako ya mtindo:
.mpaka {
mpaka: imara 1px nyeusi;
}
Jinsi ya kuongeza Mistari Ndani ya Viini vya Mtu binafsi katika Jedwali
Ikiwa unataka kuongeza mistari ndani ya maudhui ya kiini, njia rahisi zaidi ya kufanya hivyo ni lebo ya utawala usawa (
).
Vidokezo muhimu
Ukiona mapengo katika mipaka yako, unapaswa kuhakikisha kuwa mtindo wa kuanguka-mpaka unawekwa kwenye meza yako. Ongeza zifuatazo kwa karatasi yako ya mtindo:
meza {
mpaka-kuanguka: kuanguka;
}
Unaweza kuepuka yote ya CSS hapo juu na kutumia sifa ya mpaka katika lebo yako ya meza. Tambua, hata hivyo, kuwa sifa yake, ingawa haijaondolewa, haiwezi kubadilika sana kuliko CSS, kama unaweza tu kufafanua upana wa mpaka na inaweza tu kuwa karibu na seli zote za meza au hakuna.