Mësoni si të krijoni një kufi të tabelës CSS në vetëm pesë minuta
Ju mund të keni dëgjuar se tabelat CSS dhe HTML nuk përzihen. Kjo nuk është thjesht e vërtetë. Po, përdorimi i tabelave HTML për paraqitjen nuk është më një praktikë më e mirë për t'u dizajnuar në formatin e uebit, duke u zëvendësuar me stilet e paraqitjes së CSS, por tabelat janë ende shenjat e duhura për t'u përdorur për të shtuar të dhëna tabelare në një faqe interneti.
Për fat të keq, për shkak se kaq shumë profesionistë të internetit janë larguar nga tavolinat duke menduar se ato janë helm, shumë nga këta profesionistë kanë pak përvojë pune me këtë element të përbashkët HTML dhe luftën kur ato duhet t'i trajtojnë në një faqe interneti. Për shembull, nëse keni një tabelë në një faqe dhe doni të shtoni linja të brendshme në qelizat e tabelës.
Kufijtë e tabelave të CSS
Kur përdorni CSS për të shtuar kufijtë në tavolina, ajo vetëm shton kufirin përreth jashtë tabelës. Nëse doni të shtoni linja të brendshme në qelitë individuale të asaj tabele, ju duhet të shtoni kufijtë tek elementët e brendshëm CSS. Ju gjithashtu mund të përdorni tag HR për të shtuar linjat brenda qelizave individuale.
Për të aplikuar stilet e mbuluara në këtë artikull, duhet të keni një tabelë në faqen tuaj web. Pastaj duhet të krijoni një fletë stili si një fletë e stilit të brendshëm në krye të dokumentit tuaj (ndoshta do ta bëni këtë vetëm nëse faqja juaj është një faqe e vetme) ose bashkangjitur dokumentit si një fletë e stilit të jashtëm (kjo është ajo që ju do të bëni nëse faqja juaj është faqe të shumta - duke ju lejuar të stilit të gjitha faqet nga një fletë e jashtme). Ju do t'i vendosni stilet për të shtuar linjat e brendshme në atë fletë stili.
Para se të filloni
Së pari ju duhet të vendosni se ku doni që linjat të shfaqen në tryezën tuaj. Ju keni disa mundësi, duke përfshirë:
- Rrethojnë të gjitha qelizat për të formuar një rrjet;
- Vendosja e linjave ndërmjet vetëm kolonave;
- Vetëm mes rreshtave; ose
- Mes kolonave ose rreshtave specifike.
Ju gjithashtu mund të poziciononi linjat rreth qelizave individuale ose brenda qelizave individuale.
Si të shtoni linja rreth të gjitha qelizave në një tabelë
Për të shtuar linjat rreth të gjitha qelizave në tabelën tënde, duke krijuar këtë efekt në rrjet, shtoni sa më poshtë në fletën tuaj të stilit:
td, th {
kufiri: 1px ngurta e zezë;
}
Si të shtoni linja mes vetëm kolonave në një tabelë
Për të shtuar rreshta midis kolonave (kjo krijon vija vertikale që shkojnë nga lart poshtë në kolonat e tabelës), shtoni sa më poshtë në fletën tuaj të stilit:
td, th {
kufiri i majtë: 1px i ngurtë i zi;
}
Pastaj, nëse nuk dëshironi që ata të shfaqen në kolonën e parë, do t'ju duhet të shtoni një klasë në ato qeliza th dhe td . Në këtë shembull, ne supozojmë se kemi një klasë pa kufi në ato qeliza dhe ne heqim kufirin me këtë rregull të CSS më specifike. Pra, këtu është klasa HTML që do të përdorim:
class = "no-kufitare">
Dhe pastaj ne mund të shtojmë stilin e mëposhtëm në fletën tonë të stilit:
.no-kufiri {
kufiri i majtë: asnjë;
}
Si të shtoni linjat mes vetëm rreshtave në një tabelë
Ashtu si duke shtuar rreshta midis kolonave, mund ta bëni këtë me vetëm një stil të thjeshtë të shtuar në fletën tuaj të stilit. CSS më poshtë do të shtonte linja vertikale mes secilës rresht të tabelës sonë:
tr {
fundja e kufirit: 1px e ngurta e zezë;
}
Dhe për të hequr kufirin nga fundi i tabelës, ju do të shtoni përsëri një klasë në atë tag tr:
class = "no-kufitare">
Shto stilin e mëposhtëm në fletën tuaj të stilit:
.no-kufiri {
fund i kufirit: asnjë;
}
Si të shtoni vija midis kolonave ose rreshtave specifike në një tabelë
Nëse dëshironi vetëm linja mes rreshtave ose kolonave të veçanta, duhet të përdorni një klasë në ato qeliza ose rreshta. Shtimi i një rreshti midis kolonave është pak më e vështirë se në mes të rreshtave sepse duhet të shtoni klasën në çdo qelizë në atë kolonë. Nëse tabela juaj gjenerohet automatikisht nga një CMS e një lloji , kjo mund të mos jetë e mundur, por nëse jeni duke e koduar faqen, mund të shtoni klasa të duhura sipas nevojës për të arritur këtë efekt.
class = "side-kufitare">
Shtimi i rreshtave midis rreshtave është shumë më e lehtë, pasi mund ta shtosh klasën në rreshtin që dëshiron të vijë.
class = "border-bottom">
Pastaj shtoni CSS në fletën tuaj të stilit:
. kufiri i anës {
kufiri i majtë: 1px i ngurtë i zi;
}
. kufiri-fund {
fundja e kufirit: 1px e ngurta e zezë;
}
Si të shtoni linja rreth qelizave individuale në një tabelë
Për të shtuar linja rreth qelizave individuale, shtoni një klasë në qelizat që dëshironi një kufi rreth:
class = "border">
Pastaj shtoni CSS-në e mëposhtme në fletën tuaj të stilit:
. kufitare {
kufiri: 1px ngurta e zezë;
}
Si të shtoni linja brenda qelizave individuale në një tabelë
Nëse doni të shtoni linja brenda përmbajtjes së një celulari, mënyra më e lehtë për ta bërë këtë është me etiketën horizontale horizontale (
).
Këshilla të dobishme
Nëse vëren boshllëqe në kufijtë tuaj, duhet të sigurohesh që stili i kolapsit të kufijve të vendoset në tryezën tënde. Shtoni sa më poshtë në fletën tuaj të stilit:
tabela {
kolapsi i kufirit: kolapsi;
}
Ju mund të shmangni të gjithë CSS-në e mësipërm dhe të përdorni atributin kufitar në tagun tuaj të tabelës. Kuptojeni, megjithatë, se atributi i tij, edhe pse nuk është i depozituar, është dukshëm më pak fleksibël sesa CSS, pasi mund të përcaktoni vetëm gjerësinë e kufirit dhe mund ta keni atë vetëm rreth të gjitha qelizave të tabelës ose jo.