Možno ste počuli, že sa tabuľky CSS a HTML nemiešajú. Toto nie je ten prípad. Áno, použitie HTML tabuliek na rozloženie už nie je najlepšou praxou v oblasti webového dizajnu, pretože boli nahradené štýlmi rozloženia CSS, ale tabuľky sú stále správnou značkou, ktorá sa má použiť na pridanie tabuľkových údajov na webovú stránku.
Keďže toľko profesionálov na webe sa vyhýbajú tabuľkám a myslí si, že nie sú ničím iným problémom, mnohí z týchto profesionálov majú málo skúseností s prácou s týmto bežným prvkom HTML a zápasia, keď majú na webovej stránke pridať vnútorné riadky.
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ť na pridávanie riadkov do jednotlivých buniek.
Ak chcete použiť štýly zahrnuté v tomto návode, potrebujete tabuľku na webovej stránke. Potom vytvoríte štýl štýlu ako interný štýl listu v hlavičke dokumentu (ak sa jedná iba o jednu stranu) alebo priložený k dokumentu ako externý štýl listu (ak má stránka viacero stránok). Vložili ste štýly, aby ste do listu štýlov pridali vnútorné linky.
Predtým ako začneš
Rozhodnite, kde chcete, aby sa riadky objavili v tabuľke. Máte niekoľko možností, vrátane:
- Okolo všetkých buniek vytvoríte mriežku
- Umiestnenie čiar medzi len stĺpcami
- Len medzi riadkami
- 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ť efekt mriežky, pridajte do šablóny so štýlmi:
td, th {hranica: pevná 1px čierna;} Ak chcete pridať riadky medzi stĺpcami na vytvorenie vertikálnych riadkov, ktoré sa spúšťajú zhora nadol v stĺpcoch tabuľky, pridajte do šablóny so štýlmi: td, th {okraj-ľavý: pevný 1px čierny;} Ak nechcete, aby sa v prvom stĺpci objavili zvislé čiary, pridajte triedy th a td buniek. V tomto príklade predpokladáme triedu no-border na tieto bunky a odstránenie hranice s pravidlom CSS. Trieda HTML, ktorú používate, je: class = "no-border"> Potom pridajte do štýlu štýlov nasledujúci štýl: .no-hranica {border-left: none;} Rovnako ako pri pridávaní riadkov medzi stĺpcami môžete medzi riadky pridať vodorovné čiary s jedným jednoduchým štýlom, ktorý sa pridal do štýlu štýlov: tr {hraničná spodná časť: pevná 1px čierna;} Ak chcete odstrániť okraje zo spodnej časti tabuľky, znova pridáte triedu tag: class = "no-border"> Pridajte do štýlu štýlov nasledujúci štýl: .no-hranica {hraničný dno: žiadne;} 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"> Pridanie riadkov medzi riadkami je jednoduchšie, pretože môžete pridať triedu do riadku, na ktorý chcete linku zapnúť. class = "border-bottom"> Potom pridajte CSS do štýlu šablón: . side-side {okraj-ľavý: pevný 1px čierny;}.dĺžka zadnej strany {hraničná spodná časť: pevná 1px čierna;} Ak chcete pridať riadky okolo jednotlivých buniek, pridajte triedu do buniek, na ktorých chcete hranicu: class = "border"> Potom pridajte nasledujúci CSS do štýlu šablón: .border {hranica: pevná 1px čierna;} Ak chcete do bunky pridať riadky, najjednoduchší spôsob, ako to urobiť, je horizontálna značka pravidiel (). Ak spozorujete medzery vo vašich hraniciach, uistite sa, že štýl zúženia okrajov je nastavený na stôl. Pridajte do svojho šablóny so štýlmi: tabuľka {hraničný kolaps: zbaliť;} Môžete sa vyhnúť všetkým a použiť atribút hranice v značke tabuľky. Uvedomte si však, že tento atribút, aj keď nie je zastaraný, je podstatne 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. Ako pridať riadky medzi len stĺpce v tabuľke
Ako pridať riadky medzi riadkami v tabuľke
Ako pridať riadky medzi špecifickými stĺpcami alebo riadkami v tabuľke
Ako pridať riadky okolo jednotlivých buniek v tabuľke
Ako pridať riadky vnútri jednotlivých buniek do tabuľky
Užitočné tipy
