Zistite, ako vytvoriť okraj CSS tabuľky za päť minút
Možno ste počuli, že sa tabuľky CSS a HTML nemiešajú. To jednoducho nie je pravda. Áno, používanie tabuliek HTML pre rozloženie už nie je najlepšou praxou v oblasti webového dizajnu, pretože bola nahradená štýlmi rozloženia CSS, ale tabuľky sú stále správnou značkou na pridanie tabuľkových údajov na webovú stránku.
Bohužiaľ, pretože toľko webových profesionálov sa vyhýbalo tabuľkám a myslelo si, že sú jedom, mnohí z týchto odborníkov majú málo skúseností s prácou s týmto bežným prvkom HTML a bojom, keď ich musia zvládnuť na webovej stránke. Napríklad, ak máte tabuľku na stránke a chcete pridať interné riadky do buniek tabuľky.
Okraje tabuľky CSS
Keď použijete CSS na pridanie ohraničenia do tabuliek, pridá iba okraj okolo vonkajšej tabuľky. Ak chcete do jednotlivých buniek tejto tabuľky pridať vnútorné riadky, musíte do vnútorných prvkov CSS pridať hranice. Značku HR môžete použiť aj na pridávanie riadkov do jednotlivých buniek.
Ak chcete použiť štýly, na ktoré sa vzťahuje tento článok, mali by ste zrejme mať tabuľku na svojej webovej stránke. Potom by ste mali vytvoriť štýl štýlu ako interný štýl listu v hlavičke vášho dokumentu (pravdepodobne to urobíte len vtedy, ak vaša "stránka" je jedna stránka) alebo priložená k dokumentu ako externý štýl listu (to je to, čo ste vy bude robiť, ak vaša stránka je viac stránok - umožňuje vám štýl všetkých stránok z jedného externého hárku). Styly pridáte tak, aby ste do toho štýlu pridali vnútorné linky.
Predtým ako začneš
Najprv sa musíte rozhodnúť, kde chcete, aby sa riadky objavili vo vašej tabuľke. Máte niekoľko možností, vrátane:
- Okolo všetkých buniek tvorí mriežku;
- Umiestnenie čiar medzi len stĺpmi;
- Len medzi riadkami; alebo
- Medzi konkrétnymi stĺpcami alebo riadkami.
Môžete tiež umiestniť čiary okolo jednotlivých buniek alebo vnútri jednotlivých buniek.
Ako pridať riadky okolo všetkých buniek v tabuľke
Ak chcete pridať riadky okolo všetkých buniek v tabuľke a vytvoriť taký efekt podobný mriežke, pridajte do svojho štýlu štýlov nasledovné:
td, th {
hranica: pevná 1px čierna;
}
Ako pridať riadky medzi len stĺpce v tabuľke
Ak chcete medzi stĺpce pridať riadky (vytvára vertikálne čiary, ktoré sa spúšťajú zhora nadol v stĺpcoch tabuľky), pridajte do svojej šablóny štýlov:
td, th {
okraj-ľavý: pevný 1px čierny;
}
Potom, ak nechcete, aby sa v prvom stĺpci objavili, budete musieť pridať triedu na tie bunky th a td . V tomto príklade predpokladáme, že na týchto bunkách máme triedu bez hraníc a odstránime hranice s týmto špecifickým pravidlom CSS. Takže tu je trieda HTML, ktorú by sme použili:
class = "no-border">
A potom môžeme pridať nasledujúci štýl do nášho štýlu:
.no-hranica {
border-left: none;
}
Ako pridať riadky medzi riadkami v tabuľke
Rovnako ako pri pridávaní riadkov medzi stĺpcami, môžete to urobiť len jednoduchým štýlom, ktorý sa pridá do vášho štýlu. Nasledujúci CSS pridá vertikálne riadky medzi každý riadok našej tabuľky:
tr {
hraničná spodná časť: pevná 1px čierna;
}
A ak chcete odstrániť hranicu od spodnej časti tabuľky, znova pridáte do tejto značky triedy:
class = "no-border">
Pridajte do štýlu štýlov nasledujúci štýl:
.no-hranica {
hraničný dno: žiadne;
}
Ako pridať riadky medzi špecifickými stĺpcami alebo riadkami v tabuľke
Ak chcete len riadky medzi konkrétnymi riadkami alebo stĺpcami, musíte použiť triedu na týchto bunkách alebo riadkoch. Pridanie riadku medzi stĺpcami je trochu zložitejšie ako medzi riadkami, pretože musíte pridať triedu do každej bunky v tomto stĺpci. Ak je vaša tabuľka automaticky generovaná z CMS nejakého druhu , nemusí to byť možné, ale ak ručne kódujete stránku, mohli by ste pridať príslušné triedy podľa potreby, aby ste dosiahli tento efekt.
class = "side-border">
Pridávanie riadkov medzi riadkami je oveľa jednoduchšie, pretože môžete jednoducho pridať triedu do riadku, na ktorý chcete linku zapnúť.
class = "border-bottom">
Potom pridajte CSS do štýlu štýlov:
. side-side {
okraj-ľavý: pevný 1px čierny;
}
.dĺžka zadnej strany {
hraničná spodná časť: pevná 1px čierna;
}
Ako pridať riadky okolo jednotlivých buniek v tabuľke
Ak chcete pridať riadky okolo jednotlivých buniek, pridajte triedu do buniek, na ktorých chcete hranicu:
class = "border">
A potom pridajte nasledujúci CSS do štýlu štýlov:
.border {
hranica: pevná 1px čierna;
}
Ako pridať riadky vnútri jednotlivých buniek do tabuľky
Ak chcete do bunky pridať riadky, najjednoduchší spôsob je horizontálna značka pravidiel (
).
Užitočné tipy
Ak spozorujete medzery vo vašich hraniciach, mali by ste sa uistiť, že štýl zúženia okrajov je nastavený na vašom stole. Pridajte do svojho štýlu štýlov:
tabuľka {
hraničný kolaps: zbaliť;
}
Môžete sa vyhnúť všetkým vyššie uvedeným CSS a použiť atribút hranice v značke tabuľky. Uvedomte si však, že jeho atribút, aj keď nie je zastaraný, je oveľa menej flexibilný ako CSS, pretože môžete definovať iba šírku hranice a môže ho mať iba okolo všetkých buniek tabuľky alebo žiadnych.