Nastavuje vzdialenosť medzi okrajmi buniek v tabuľke. Atribút border-spacing nefunguje, keď má tabuľka border-collapse nastavené na zbalenie .

Syntax

border-spacing: value [value]

Argumenty

Jedna hodnota nastavuje vertikálnu aj horizontálnu vzdialenosť medzi okrajmi buniek. Ak existujú dva argumenty, potom prvý určuje horizontálnu vzdialenosť a druhý - vertikálnu.





ohraničenie










12
34


Výsledok tohto príkladu je znázornený na obr. jeden.

Ryža. 1. Použitie možnosti ohraničenia

Poznámka

Ak označovať

pridal parameter cellspacing, potom sa pri použití atribútu border-spacing style neberie do úvahy a hodnota cellspacing sa ignoruje. Výnimkou z tohto pravidla je internetový prehliadač Prieskumník, ktorý vôbec nerozumie vlastnosti border-spacing.

tabuľky

  • border-collapse nastavuje spôsob zobrazenia okrajov okolo buniek tabuľky. Tento parameter hrá úlohu, keď je pre bunky nastavený rámec, potom sa na spoji buniek získa čiara s dvojnásobnou hrúbkou. Pridanie hodnoty zbalenia spôsobí, že prehliadač analyzuje tieto miesta v tabuľke a odstráni z nej dvojité riadky.
  • table-layout určuje, ako má prehliadač vypočítať výšku a šírku buniek tabuľky na základe jej obsahu.
  • border-spacing nastavuje vzdialenosť medzi okrajmi buniek v tabuľke. Atribút border-spacing nefunguje, keď má tabuľka border-collapse nastavené na zbalenie.

    • CSS umožňuje nastaviť nielen štýl orámovania tabuľky, ale aj štýl orámovania jednotlivých buniek. Keďže každá bunka má svoje vlastné hranice, hranice medzi susednými bunkami sa zdvojnásobia. Je však možné zlúčiť hranice susedných buniek do jednej. Existuje na to vlastnosť border-collapse. Má nasledujúce hodnoty:

    border-collapse: samostatné - každá bunka má svoj vlastný okraj (predvolené)

    border-collapse: kolaps - všeobecná hranica

    border-collapse: dedit - hodnota je prevzatá z nadradený prvok

    Vytvorme si napríklad tabuľku a nastavíme rámec pre bunky všetkých tabuliek, ktoré budú na stránke. Najprv nebudeme nič meniť, aby sme videli, ako bude tabuľka vyzerať:

    Štýl:

    a a ich styling.

    Príklad zvýraznenia stĺpca tabuľky

    1
    2
    3
    4
    5
    6

    		 Stránka

    Domáca úloha.

    V tejto lekcii tiež nebudem všetko podrobne popisovať - ​​iba všeobecné body. Pre úplnosť pozri výsledok príkladu.

    1. Vytvorte tri tabuľky, každú s jedným riadkom a tromi stĺpcami (stĺpcami).
    2. Do prvej tabuľky umiestnite hlavičku alebo „hlavičku“ stránky (nezamieňajte s „hlavičkou“ dokumentu HTML), do druhej ponuky vľavo a vpravo, ako aj hlavný obsah (obsah) , v tretej - Päta alebo „päta“ stránky.
    3. Nech je šírka prvého a posledného stĺpca každej tabuľky pevná.
    4. Dôležité. Použite značku len na vytvorenie štyroch tlačidiel horizontálne menu v hlavičke stránky. V ostatných prípadoch nechajte obrázky ísť na pozadí a v druhých bunkách tabuliek sa vo všeobecnosti používajú iba farby a v prvej a poslednej tabuľke je to #99FF99.
    5. Nechajte text obsahu stránky zarovnať na obe strany bunky tabuľky s nadpisom vycentrovaným.
    6. Pokiaľ ide o vzdialenosti medzi bunkami tabuliek, ako aj odsadenia buniek, potom si premyslite, kde by sa mali úplne odstrániť a kde by sa mali zväčšiť.

    Uvažovali sme o mnohých spôsoboch úpravy takých prvkov na stránke, ako sú textové informácie, odkazy, obrázky, nadpisy, ale to všetko stále nestačí. Vo svojich článkoch často používam HTML prvky, ako sú tabuľky, pretože sú vo väčšine prípadov pomôcť pri systematizácii dôležitá informácia a zjednodušiť doručenie.

    V tomto článku vám predstavím zložitosť stylingu HTML tabuľky a naučíte sa nové vlastnosti CSS navrhnuté na dosiahnutie týchto cieľov.

    Hypertextový značkovací jazyk HTML nám dal veľa možností na naviazanie štýlov CSS na desať jedinečných značiek určených na prácu s tabuľkami, navrhujem ich zopakovať pred ďalším štúdiom:

    („päta“ tabuľky) farba pozadia – koralový, pre prvok ("hlavička" tabuľky) nastavte farbu pozadia Strieborná.
  • Pre prvky
    • , ktoré sú vo vnútri prvku (telo tabuľky) nastavenie farby pozadia, ktorá sa zmení pri umiestnení kurzora myši (pseudotrieda: vznášanie sa) c biely podľa farby kaki(zvýrazní sa celý riadok).

    Výsledok nášho príkladu:

    Ryža. 153 Príklad štýlu riadkov v tabuľkách

    Nasledujúci príklad sa zaoberá aplikáciou zaoblenia rohov na bunky tabuľky (vlastnosť).

    Príklad zaoblenia rohu bunky
    TagPopis
    .
    Definuje obsah tabuľky.
    Určuje názov tabuľky.
    Definuje bunku hlavičky tabuľky.
    Definuje riadok tabuľky.
    Definuje dátovú bunku tabuľky.
    Používa sa na zahrnutie hlavičky skupiny v tabuľke (hlavička tabuľky).
    Používa sa na uloženie „tela“ tabuľky.
    Používa sa na obsiahnutie „päty“ tabuľky (päty).
    Definuje vlastnosti daného stĺpca pre každý stĺpec v rámci značky
    Definuje skupinu stĺpcov v tabuľke.

    Práca s odrážkami v tabuľke

    Použitie výplne v tabuľke
    Zarážky tabuľky
    1 2 3 4
    2
    3
    4

    AT tento príklad my:

    • Stôl sme umiestnili do stredu technikou horizontálneho centrovania s vonkajšími okrajmi (margin : 0 auto ).
    • Pre názov tabuľky (tag
    ) spodnú výplň nastavíme na 19 pixelov. Dúfam, že sa nepletú nepárne čísla :)

    Výsledok nášho príkladu:

    Medzera medzi bunkami

    Po vyššie uvedenom príklade ste si mohli všimnúť, že medzi všetkými bunkami v tabuľke máme stále medzeru. Pozrime sa, ako odstrániť medzeru medzi bunkami tabuľky alebo ju zväčšiť.

    Ak chcete nastaviť vzdialenosť medzi okrajmi susedných buniek, musíte použiť vlastnosť CSS - border-spacing .

    Zmena medzier medzi tabuľkami
    border-spacing: 30px 10px;
    1 2 3
    2
    3
    ohraničenie: 0;
    1 2 3
    2
    3
    rozstup okrajov: 0,2 em;
    1 2 3
    2
    3

    V tomto príklade:

    • plavák : vľavo ). Ak ste vynechali tému plávajúcich prvkov, vždy sa k nej môžete vrátiť v tomto návode - "".
    • Okrem toho nastavíme pravý okraj tabuliek na 30px a nastavíme vertikálne zarovnanie tabuliek (horná časť prvku je zarovnaná s hornou časťou najvyššieho prvku). K podrobnej diskusii o tejto vlastnosti sa vrátime v tomto článku.
    ) je tučné.
  • Pre bunky tabuľky (záhlavie a dátové bunky) sme nastavili pevný okraj 1 px s hexadecimálnou farbou #F50 a nastavili výplne 19 px na všetkých stranách.
  • Za prvý stôl s triedou .najprv nastavíme medzery medzi bunkami tabuľky (vlastnosť border-spacing) na 30px 10px , pre druhú tabuľku s triedou .druhý rovná nule, pre tretiu tabuľku s triedou .tretie rovná 0,2 em .

    • Upozorňujem na skutočnosť, že ak je vo vlastnosti border-spacing špecifikovaná iba jedna hodnota dĺžky, potom určuje intervaly horizontálne aj vertikálne a ak sú špecifikované dve hodnoty dĺžky, potom prvá určuje interval horizontálna vzdialenosť a druhá vertikálna. Vzdialenosť medzi okrajmi susedných buniek môže byť špecifikovaná v jednotkách CSS (px, cm, em atď.). Záporné hodnoty nie sú povolené.

    Výsledok nášho príkladu:

    Zobraziť okraje okolo buniek tabuľky

    Môžeš povedať: - takže sme odstránili medzeru medzi bunkami pomocou vlastnosti border-spacing s hodnotou 0 , ale prečo teraz máme hranice buniek, ktoré sa pretínajú?

    Dvojité orámovanie sa tvorí vďaka tomu, že spodný okraj jednej bunky sa pridáva k hornému okraju bunky pod ňou, podobná situácia nastáva aj po stranách buniek a je to logické z hľadiska zobrazenia tabuľky, ale našťastie tam je spôsob, ako povedať prehliadaču, že nechceme vidieť také drzé správanie okrajov buniek.

    Na to musíte použiť Vlastnosť CSS border-collaps . Napodiv, pomocou vlastnosti border-collapse s hodnotou kolapsu je najlepšia cesta ako môžem odstrániť medzeru medzi bunkami a zároveň medzi nimi nezískať dvojité okraje.

    Zvážte porovnanie správania okrajov pri použití vlastnosti border-spacing s hodnotou 0 a vlastnosti border-collapse s hodnotou kolapsu:

    Príklad zobrazenia okrajov okolo buniek tabuľky
    ohraničenie: 0;
    1 2 3
    2
    3
    border-collapse: kolaps;
    1 2 3
    2
    3

    V tomto príklade:

    • Naše tabuľky sme urobili plávajúcimi a posunuli sme ich doľava (float : left ), nastavili sme ich vonkajší pravý okraj na 30px .
    • Nastavte pre názov tabuľky (tag
    ) je tučné.
  • Pre bunky tabuľky (záhlavie a dátové bunky) nastavíme pevný okraj 5 px s hexadecimálnou farbou #F50 a nastavíme pevnú šírku 50px a výšku 75px.
  • Za prvý stôl s triedou .najprv nastavíme medzery medzi bunkami tabuľky na nulu (border-spacing : 0 ;) a pre druhú tabuľku s triedou .druhý nastavte vlastnosť border-collapse na kolaps , ktorá, keď je to možné, zlúči okraje buniek do jedného.

    • Výsledok nášho príkladu:

    Správanie prázdnych buniek

    Pomocou CSS môžete nastaviť, či sa majú zobraziť okraje a pozadie prázdnych buniek v tabuľke alebo nie. Za toto správanie je zodpovedná vlastnosť empty-cells, ktorá, ako ste si mohli všimnúť z predchádzajúcich príkladov, štandardne zobrazuje prázdne bunky.

    Prejdime na príklad:

    Príklad zobrazenia prázdnych buniek tabuľky
    prázdne bunky: zobraziť;
    1 2 3
    2 ☺
    3 ☺
    prázdne bunky: skryť;
    1 2 3
    2 ☺
    3 ☺

    Je veľmi ľahké pochopiť, ako funguje vlastnosť prázdnych buniek z tohto príkladu, ak je nastavená na skryť , potom sa prázdne bunky a pozadie v nich skryjú, ak je nastavené na show (predvolené), zobrazia sa.

    Umiestnenie hlavičky tabuľky

    Pozrime sa na ďalšiu jednoduchú vlastnosť pre štylizáciu tabuľky – caption-side , ktorá nastavuje polohu popisku tabuľky (nad alebo pod tabuľkou). V predvolenom nastavení je vlastnosť caption-side nastavená na top , čím sa titulok umiestni nad tabuľku. Ak chcete umiestniť hlavičku pod tabuľku, musíte použiť vlastnosť s hodnotou bottom .

    Pozrime sa na príklad použitia tejto vlastnosti:

    Príklad použitia vlastnosti caption-side
    Nadpis nad tabuľkou
    názovcena
    Ryby350 rubľov
    Mäso250 rubľov

    Titul pod stolom
    názovcena
    Ryby350 rubľov
    Mäso250 rubľov

    V tomto príklade sme vytvorili dve triedy, ktoré riadia umiestnenie hlavičky tabuľky. Prvá trieda ( .topCaption) umiestni hlavičku tabuľky nad ňu, aplikovali sme ju na prvú tabuľku a druhú triedu ( .bottomCaption) umiestni hlavičku tabuľky pod ňu, aplikovali sme ju na druhú tabuľku. Trieda .topCaption je predvolene nastavená na vlastnosť caption-side a bola vytvorená na demonštračné účely.

    Výsledok nášho príkladu:

    Horizontálne a vertikálne zarovnanie

    Vo väčšine prípadov pri práci s tabuľkami budete musieť upraviť zarovnanie obsahu v hlavičke a dátových bunkách. Vlastnosť text-align sa používa na horizontálne zarovnanie, podobne ako ktorákoľvek iná textové informácie. O použití tejto vlastnosti pre text sme uvažovali skôr v článku „“.

    Ak chcete nastaviť zarovnanie obsahu v bunkách, musíte použiť špeciálne kľúčové slová s vlastnosťou zarovnanie textu. Zvážte aplikáciu Kľúčové slová túto vlastnosť v nasledujúcom príklade.

    Príklad vodorovného zarovnania v tabuľke
    VýznamPopis
    vľavoZarovná text bunky doľava. Toto je predvolená hodnota (ak je smer textu zľava doprava).
    správnyZarovná text bunky doprava. Toto je predvolená hodnota (ak je smer textu sprava doľava).
    stredZarovná text bunky na stred.
    ospravedlniťRoztiahne riadky tak, aby mal každý riadok rovnakú šírku (roztiahne text bunky tak, aby sa zmestil na šírku).

    V tomto príklade sme vytvorili štyri triedy, ktorý nastavil rôzne horizontálne zarovnania v bunkách a aplikoval ich v poradí na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti zarovnania textu

    Výsledok nášho príkladu:

    Okrem vodorovného zarovnania môžete v bunkách tabuľky definovať aj zvislé zarovnanie pomocou vlastnosti vertikálneho zarovnania.

    Upozorňujeme, že pri práci s bunkami tabuľky platia iba nasledujúce * hodnoty tejto vlastnosti:

    * - Hodnoty Sub , super , text-top , text-bottom , length a % ​​aplikované na bunku tabuľky sa budú správať ako pri použití základnej hodnoty.

    Zoberme si príklad použitia:

    Príklad vertikálneho zarovnania v tabuľke
    VýznamPopis
    základná líniaZarovná základnú čiaru bunky so základnou čiarou nadradenej bunky. Toto je predvolená hodnota.
    topZarovná obsah bunky zvisle nahor.
    strednáZarovná obsah bunky vertikálne na stred.
    dnoZarovná obsah bunky zvisle nadol.

    V tomto príklade sme vytvorili štyri triedy, ktorý nastavil rôzne vertikálne zarovnania v bunkách a použil ich na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti vertikálneho zarovnania, ktorá bola použitá na daný riadok.

    Algoritmus na umiestnenie rozloženia tabuľky prehliadačom

    CSS štandardne používa algoritmus automatického rozloženia tabuľky prehliadača. V tomto prípade šírka stĺpca sa nastavuje podľa najširšieho neprerušiteľného obsahu bunky. Tento algoritmus môže byť v niektorých prípadoch pomalý, pretože prehliadač musí pred určením konečného rozloženia tabuľky prečítať celý obsah tabuľky.

    Ak chcete zmeniť typ rozloženia rozloženia tabuľky prehliadačom pomocou automatické na pevné, musíte použiť vlastnosť CSS table-layout s hodnotou fixed .

    V tomto prípade závisí iba horizontálne umiestnenie na šírku tabuľky a šírku stĺpcov, nie na obsah buniek. Prehliadač začne vykresľovať tabuľku hneď po prijatí prvého riadku. V dôsledku toho vám pevný algoritmus umožňuje vytvoriť rozloženie takejto tabuľky rýchlejšie ako pri použití automatickej možnosti. Pri práci s veľkými tabuľkami môžete na zvýšenie výkonu použiť pevný algoritmus.

    Pozrime sa na použitie tejto vlastnosti na nasledujúcom príklade:

    Príklad použitia vlastnosti table-layout
    rozloženie tabuľky: auto;
    názov 2009 2010 2011 2012 2013 2014 2015 2016
    Pšenica 125 215 2540 33287 695878 1222222 125840000 125
    rozloženie stola: pevné;
    názov 2009 2010 2011 2012 2013 2014 2015 2016
    Pšenica 125 215 2540 33287 695878 1222222 125840000 125

    V tomto príklade:

    Úprava štýlu riadkov a stĺpcov tabuľky

    Vy a ja sme sa už čiastočne dotkli spôsobov úpravy riadkov a stĺpcov tabuľky v článku „“. V tomto článku sme sa zamerali na použitie skupinovej pseudotriedy, ktorá vám umožňuje vkladať štýly riadkov do tabuliek pomocou hodnôt dokonca (čestný) a zvláštny (zvláštny), alebo základnými matematický vzorec.

    Vráťme sa k technikám, ktorým sme sa doteraz venovali, a preskúmajme nové spôsoby štýlovania riadkov a stĺpcov v tabuľkách. Prejdime na príklady.

    Príklad použitia pseudotriedy :nth-child s tabuľkami
    1 2 3 4 5 6 7 8 9 10 11 12 13 14
    2
    3
    4

    V tomto príklade:

    Výsledok nášho príkladu:

    Prejdime k ďalšiemu príkladu, v ktorom zvážime možnosti úpravy riadkov tabuľky.

    Príklad úpravy riadkov v tabuľkách
    serviscena
    Sum 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000

    V tomto príklade:

    • Šírku tabuľky nastavíme na 100% šírky nadradeného prvku, pre hlavičku a dátové bunky nastavíme pevný okraj široký 1px.
    • Sada pre prvok
    1 2 3 4 5

    V tomto príklade:

    • Tabuľku vycentrujte s vonkajšími okrajmi, nastavte šírku a výšku buniek hlavičky na 50 pixelov, zadané transparentný okraj 5 pixelov.
    • Zistil som, že keď umiestnite kurzor myši (pseudotrieda :hover) na bunku hlavičky, dostane sa pozadie Modrá farby, Oranžová farba textu, orámovanie oranžová farby 5 pixelov a polomer zaoblenia 100 % .
    • priehľadný okraj je potrebné na rezerváciu miesta pre hranicu, ktorá sa zobrazí pri umiestnení kurzora myši, ak sa tak nestane, tabuľka „preskočí“.

    Výsledok nášho príkladu:

    Nasledujúci príklad sa týka pomocou HTML prvkov

    Prihláška č.serviscena, rub.Celkom
    1Spev 6 000 6 000
    2umývanie riadu 2 000 2 000
    3Upratovanie 1 000 1 000
    4Dotieravý 1 500 1 500
    5Čítanie 3 000 3 000

    V tomto príklade:

    Výsledok nášho príkladu:

    A posledný príklad, ktorý je dosť náročný na pochopenie a vyžaduje pokročilé znalosti CSS, keďže sa dotýka budúcich tém plánovaných na podrobné štúdium v ​​rámci tohto kurzu.

    V predchádzajúcom príklade sme si to uvedomili HTML prvok môžete použiť iba jednu CSS vlastnosť - farbu pozadia (background-color), ale zároveň nemôžete nastaviť farbu pozadia na hover (pseudo-class :hover) na tomto prvku priamo. V tomto príklade sa pozrieme na to, ako zvýrazniť stĺpec tabuľky iba pomocou CSS.

    Príklad zvýraznenia stĺpcov a riadkov tabuľky pri umiestnení kurzora myši
    Prihláška č.serviscena, rub.Celkom
    1Spev 6 000 6 000
    2umývanie riadu 2 000 2 000
    3Upratovanie 1 000 1 000
    4Dotieravý 1 500 1 500
    5Čítanie 3 000 3 000

    V tomto príklade:

    • Nastavili sme, že naša tabuľka zaberá 100 % nadradeného prvku, bunky tabuľky zaberajú 25 % nadradeného prvku a majú plné zelené orámovanie 1 pixel, výška hlavičky a dátových buniek je 45 px . Medzeru medzi bunkami sme odstránili pomocou vlastnosti border-collapse s hodnotou .
    • A tak pomocou pseudoprvku ::after pridávame obsah za každý prvok vznášať sa. Pseudoprvok ::after musí byť použitý spolu s vlastnosťou content, vďaka ktorej vložíme prvok na úrovni bloku, ktorý má farbu pozadia lesná zeleň a má absolútne umiestnenie.
    • Absolútne umiestnenie je tu potrebné na odsadenie prvku vzhľadom na zadaný okraj jeho predka, zatiaľ čo predok musí mať inú hodnotu polohy ako predvolenú - statickú , inak bude počet relatívny k zadanému okraju okna prehliadača. dôvod, pre ktorý sme položili stôl relatívne umiestnenie(príbuzný).
    • Pre náš vygenerovaný blok nastavíme vlastnosť top, ktorá určuje smer odsadenia umiestneného prvku od horného okraja a vlastnosť bottom, ktorá určuje smer odsadenia umiestneného prvku od spodného okraja. Obe vlastnosti boli nastavené na 0 , čiže blok úplne zaberie prvok zo spodnej a hornej časti tabuľky, šírka tohto bloku bola nastavená na 25%, táto hodnota zodpovedá hodnote šírky samotnej bunky.
    • A posledná vlastnosť, ktorú sme nastavili pre tento blok: z-index s hodnotou "-1" určuje poradie umiestnených prvkov v os Z. Táto vlastnosť je potrebná, aby bol text pred týmto blokom a nie za ním, ak nenastavíte hodnotu menšiu ako nula, blok text uzavrie.

    Výsledok nášho príkladu:

    Ak v tejto fáze štúdie nerozumiete procesu polohovania prvkov, nenechajte sa odradiť, je to ťažko pochopiteľná téma, ktorú sme tiež nezvažovali, ale určite sa ňou budeme zaoberať v ďalšom článku učebnica "Polohovacie prvky v CSS".

    Otázky a úlohy k téme

    Skôr než prejdete na ďalšiu tému, dokončite praktickú úlohu:


    Ak máte ťažkosti robiť praktická úloha, Príklad môžete vždy otvoriť v samostatnom okne a prezrieť si stránku, aby ste videli, aké CSS bolo použité.


    2016-2020 Denis Bolshakov, môžete na stránku posielať pripomienky a návrhy na adresu [email protected]