Úvod do štýlov tabuliek CSS

Prečo používame CSS, aj keď môžeme použiť tabuľky HTML, je to preto, že v tabuľke HTML sa rozloženie stránky založené na tabuľke často vykresľuje pomalšie ako ekvivalentné rozloženie založené na CSS; to platí najmä pre stránky, ktoré majú veľa obsahu. Tabuľky by sa nemali používať ako pomôcky na rozloženie. A ak zostavíme tabuľky HTML bez štýlov alebo atribútov v prehliadači, zobrazia sa bez ohraničenia. Štýl tabuľky s CSS môže vylepšiť jej vzhľad.

Tabuľky CSS sa dajú jednoducho pochopiť a používať. Je to len otázka zapamätania zodpovedajúcich hodnôt vlastnosti zobrazenia CSS pre základné prvky tabuľky HTML. S pomocou CSS sme schopní vyrobiť niekoľko štýlových stolov.

Čo je to štýl stolov CSS?

Tabuľka CSS (Cascading Style Sheets) popisuje, ako rozložiť skupinu prvkov v riadkoch a stĺpcoch. Predvolená CSS použitá na tabuľku HTML je tabuľka CSS.

  • CSS navrhol a prepracoval flexibilitu.
  • To znamená, že rozloženie založené na CSS zaisťuje, že všetky svoje štýly (tj od malých zmien po hlavné pravidlá) umiestnite na jedno miesto.
  • Zmenou pravidiel rozloženia nastavených v tejto šablóne štýlov ovplyvníte každú stránku, ktorá naň odkazuje.
  • Rozloženie stránky založené na CSS sa zvyčajne objaví rýchlejšie na obrazovke a dokonca aj sťahovanie bude rýchlejšie ako rozloženie na základe tabuľky.

Vlastnosti štýlu tabuľky CSS

Nižšie sú uvedené rôzne vlastnosti štýlov tabuľky CSS:

1. Zrútenie okrajov

Používa sa na označenie, či sa majú okraje okolo buniek tabuľky oddeliť alebo zbaliť.

Syntax: border-collapse: separate|collapse|initial|inherit;

  • Hraničný kolaps: oddelený: Používa sa tak, že susediace bunky majú svoje vlastné a nezávislé hranice, ktoré nie sú zdieľané.

syntax

border-collapse: separate;

Predvolená hodnota nastavená na vlastnosť border-collapse je samostatná. Keď sú od seba oddelené, prehliadače vložia do každej bunky medzeru pár pixelov pomocou vlastnosti medzerníka.

kód

Výkon:

  • Ohraničenie okrajov : kolaps: vždy, keď nastavíme vlastnosť ohybu okrajov, odstráni sa priestor medzi bunkami.

syntax

border-collapse: collapse;

kód

Výkon :

Aj keď tento priestor odstránite nastavením atribútu cellspacing pre značku HTML na 0, prehliadače stále zobrazujú dvojité orámovanie. To znamená, že spodný okraj jednej bunky sa objaví nad horným okrajom bunky pod, čo spôsobí zdvojnásobenie hraničných čiar. Nastavenie vlastnosti kolaps na kolapsu eliminuje tak priestor medzi bunkami, ako aj zdvojnásobenie hraníc.

  • Border collapse: initial: Používa sa na nastavenie vlastnosti border-collapse na jeho predvolenú hodnotu.
  • Ohraničenie okrajov : dedí: Používa sa, keď sa vlastnosť ohradenia okrajov dedí od svojich rodičovských prvkov. Táto vlastnosť funguje iba v prípade, že sa vzťahuje na a tag.

    Hodnoty: kolaps, samostatné, počiatočné, dedenie;

    2. Rozstup hraníc

    Nastavuje priestor priľahlé ohraničenia a obsah okolo tabuľky. Je to podobné rozstupu buniek v značke

    s výnimkou toho, že má voliteľnú druhú hodnotu. Táto vlastnosť funguje iba v prípade, že sa vzťahuje na a
    tag.

    syntax

    border-spacing: Length|initial|inherit;

    Hraničné rozstupy obvykle nadobúdajú jednu alebo dve hodnoty dĺžky. V tomto je zadaná iba jedna hodnota, ktorá potom definuje horizontálne aj vertikálne rozstupy medzi bunkami.

    kód

    Výkon:

    V tomto prípade, ak sú špecifikované dve hodnoty, potom prvá hodnota definuje horizontálne medzery medzi bunkami (priestor na každej strane každej bunky) a druhá hodnota definuje vertikálne medzery medzi bunkami. (priestor oddeľujúci spodok jednej bunky od vrchu bunky pod ňou).

    3. Strana s titulkami

    Vlastnosť na strane s popisom určuje umiestnenie titulku tabuľky. Keď sa použije na popis tabuľky, táto vlastnosť určuje, či sa popis objaví v hornej alebo dolnej časti tabuľky. Titulok by sa za normálnych okolností objavil v hornej časti tabuľky.

    syntax

    caption-side: top|bottom|initial|inherit;

    Táto vlastnosť môže mať jednu zo štyroch hodnôt:

    • Strana s titulkami: hore: Je to predvolená hodnota. V tomto umiestni titulok nad stôl.

    Syntax: caption-side:top;

    kód

    Výkon:

    • Strana s titulkami : spodná: umiestni popis pod stôl.

    Syntax: caption-side:bottom;

    kód

    Výkon:

    • Strana s titulkami: počiatočná: Používa sa na nastavenie vlastnosti na jej predvolenú hodnotu.
    • Strana s titulkami : zdediť: Zdedí túto vlastnosť od svojho nadradeného prvku.

    Hodnoty: horná, dolná, počiatočná, dediť;

    4. Prázdne bunky

    Prehliadaču povie, či má zobrazovať úplne prázdnu bunku tabuľky. Riadi vykreslenie orámovania a pozadia buniek, ktoré neobsahujú viditeľný obsah v tabuľke, ktorá používa model oddelených ohraničení.

    Syntax: empty-cells: show|hide|initial|inherit;

    Táto vlastnosť môže mať jednu zo štyroch hodnôt:

    • Empty-cell: show: Táto vlastnosť sa používa na zobrazenie okrajov na prázdnej bunke.

    Syntax: empty-cells: show;

    kód

    Výkon:

    • Empty-cell: hide: Táto vlastnosť sa používa na skrytie okrajov v prázdnej bunke.

    Syntax: empty-cells: hide;

    kód

    Výkon:

    • Empty-cell: initial : Používa sa na nastavenie vlastnosti na jej predvolenú hodnotu.
    • Empty-cell: dediť: Zdedí túto vlastnosť od svojho nadradeného prvku.

    Hodnoty: ukázať, skryť, počiatočné, zdediť;

    5. Rozloženie tabuľky

    Určuje, ako webový prehľadávač kreslí tabuľku a môže mierne ovplyvniť rýchlosť, akou ju prehliadač zobrazí. Táto vlastnosť môže mať jednu zo štyroch hodnôt.

    Syntax: table-layout: auto|fixed|initial|inherit;

    Predvolená vlastnosť je auto.

    1. Rozloženie tabuľky: auto: Automaticky nastaví šírku prvkov automaticky podľa obsahu.

    2. Tabuľka - rozloženie: pevné : Pevné nastavenie núti prehliadač vykresliť všetky stĺpce na rovnakú šírku ako stĺpce v prvom riadku. Ak je obsah širší ako prvý riadok, bude obsah zalomený, orezaný alebo rozšírený mimo bunky.

    kód

    Výkon:

    3. Rozloženie tabuľky: počiatočné: Používa sa na nastavenie vlastnosti na predvolenú hodnotu.

    4. Rozloženie tabuľky: zdediť: Zdedí túto vlastnosť od svojho nadradeného prvku.

    záver

    S pomocou CSS dokážeme vytvoriť štýlové stoly a vylepšiť vzhľad stola.

    Odporúčané články

    Toto je sprievodca štýlom CSS Table Styling. Tu diskutujeme vlastnosti s kódmi, výstupmi a syntaxou štýlu tabuľky CSS. Ak sa chcete dozvedieť viac, môžete si tiež prečítať naše dané články -

    1. Výhody CSS
    2. Použitie CSS
    3. Úvod do CSS
    4. Formátovanie textu CSS

    Kategórie:

    Nástroje na vývoj webových aplikácií