Nastaví vzdálenost mezi ohraničením buněk v tabulce. Atribut border-spacing nefunguje, když má tabulka border-collapse nastavenou na sbalit .

Syntax

border-spacing: value [value]

Argumenty

Jedna hodnota nastavuje svislou i vodorovnou vzdálenost mezi ohraničením buněk. Pokud existují dva argumenty, pak první určuje horizontální vzdálenost a druhý - vertikální.





ohraničení










12
34


Výsledek tohoto příkladu je znázorněn na Obr. jeden.

Rýže. 1. Použití možnosti ohraničení

Poznámka

Pokud označovat

přidal parametr cellspacing, pak se při použití atributu border-spacing style nebere v úvahu a hodnota cellspacing je ignorována. Výjimkou z tohoto pravidla je internetový prohlížeč Průzkumník, který vůbec nerozumí vlastnosti border-spacing.

tabulky

  • border-collapse nastavuje způsob zobrazení ohraničení kolem buněk tabulky. Tento parametr hraje roli, když je pro buňky nastaven rámec, pak se na spoji buněk získá čára dvojnásobné tloušťky. Přidání hodnoty sbalení způsobí, že prohlížeč analyzuje tato místa v tabulce a odstraní z ní dvojité řádky.
  • table-layout určuje, jak má prohlížeč vypočítat výšku a šířku buněk tabulky na základě jejího obsahu.
  • border-spacing nastavuje vzdálenost mezi ohraničením buněk v tabulce. Atribut border-spacing nefunguje, když má tabulka border-collapse nastaveno na sbalení.

    • CSS umožňuje nastavit nejen styl ohraničení tabulky, ale také styl ohraničení jednotlivých buněk. Protože každá buňka má své vlastní okraje, hranice mezi sousedními buňkami se zdvojnásobí. Ale je možné sloučit hranice sousedních buněk do jedné. K tomu existuje vlastnost border-collapse. Nabývá následujících hodnot:

    border-collapse: samostatné - každá buňka má svůj vlastní okraj (výchozí)

    border-collapse: kolaps - obecná hranice

    border-collapse: inherit - hodnota je převzata z nadřazený prvek

    Vytvořme si například tabulku a nastavíme rámeček pro buňky všech tabulek, které budou na stránce. Nejprve nebudeme nic měnit, abychom viděli, jak bude tabulka vypadat:

    Styl:

    a a jejich styling.

    Příklad zvýraznění sloupce tabulky

    1
    2
    3
    4
    5
    6

    		 Strana

    Domácí práce.

    V této lekci také nebudu popisovat vše podrobně - pouze obecné body. Pro úplnost viz výsledek příkladu.

    1. Vytvořte tři tabulky, každou s jedním řádkem a třemi sloupci (sloupci).
    2. Do první tabulky umístěte záhlaví nebo „záhlaví“ stránky (nezaměňujte s „záhlavím“ dokumentu HTML), do druhé levé a pravé nabídky a také hlavní obsah (obsah) , ve třetí - zápatí nebo „zápatí“ stránky.
    3. Nechte šířku prvního a posledního sloupce každé tabulky pevně nastavit.
    4. Důležité. Použijte značku pouze vytvořit čtyři tlačítka horizontální menu v záhlaví stránky. V ostatních případech nechte obrázky jít na pozadí a v druhých buňkách tabulek jsou obecně použity pouze barvy a v první a poslední tabulce je to #99FF99.
    5. Nechte text obsahu stránky zarovnat na obě strany buňky tabulky s nadpisem na střed.
    6. Pokud jde o vzdálenosti mezi buňkami tabulek, stejně jako odsazení buněk, pak se sami zamyslete, kde by měly být zcela odstraněny a kde by měly být zvětšeny.

    Zvažovali jsme mnoho metod pro stylování takových prvků na stránce, jako jsou textové informace, odkazy, obrázky, nadpisy, ale to vše stále nestačí. Ve svých článcích často používám HTML prvky, jako jsou tabulky, protože jsou ve většině případů pomoci systematizovat důležitá informace a usnadnit doručení.

    V tomto článku vás seznámím se záludnostmi stylingu HTML tabulky a naučíte se nové vlastnosti CSS navržené k dosažení těchto cílů.

    Hypertextový značkovací jazyk HTML nám dal mnoho možností, jak svázat styly CSS na deset jedinečných značek určených pro práci s tabulkami, navrhuji je před dalším studiem zopakovat:

    („zápatí“ tabulky) barva pozadí – korál, pro prvek ("záhlaví" tabulky) nastavte barvu pozadí stříbrný.
  • Pro prvky
    • , které jsou uvnitř prvku (tělo tabulky) nastavit barvu pozadí na změnu při umístění kurzoru (pseudotřída :hover) c bílý za barvu khaki(zvýrazní se celý řádek).

    Výsledek našeho příkladu:

    Rýže. 153 Příklad stylingu řádků v tabulkách

    Následující příklad ukazuje použití zaoblení rohů na buňky tabulky (vlastnost).

    Příklad zaoblení rohu buňky
    ŠtítekPopis
    .
    Definuje obsah tabulky.
    Určuje název tabulky.
    Definuje buňku záhlaví tabulky.
    Definuje řádek tabulky.
    Definuje datovou buňku tabulky.
    Používá se k umístění záhlaví skupiny v tabulce (záhlaví tabulky).
    Slouží k uložení „těla“ tabulky.
    Slouží k uložení „zápatí“ tabulky (zápatí).
    Definuje vlastnosti daného sloupce pro každý sloupec v rámci značky
    Definuje skupinu sloupců v tabulce.

    Práce s odrážkami v tabulce

    Použití výplně v tabulce
    Odsazení tabulky
    1 2 3 4
    2
    3
    4

    NA tento příklad my:

    • Stůl jsme umístili do středu technikou horizontálního centrování s vnějšími okraji (margin : 0 auto ).
    • Pro název tabulky (tag
    ) nastavíme spodní výplň na 19 pixelů. Doufám, že vás nepletou lichá čísla :)

    Výsledek našeho příkladu:

    Mezery mezi buňkami

    Po výše uvedeném příkladu jste si možná všimli, že mezi všemi buňkami v tabulce máme stále mezeru. Podívejme se, jak odstranit mezeru mezi buňkami tabulky nebo ji zvětšit.

    Chcete-li nastavit vzdálenost mezi okraji sousedních buněk, musíte použít vlastnost CSS - border-spacing .

    Změna mezer mezi tabulkami
    border-spacing: 30px 10px;
    1 2 3
    2
    3
    border-spacing: 0;
    1 2 3
    2
    3
    border-spacing:0,2em;
    1 2 3
    2
    3

    V tomto příkladu:

    • plavat vlevo ). Pokud vám uniklo téma plovoucích prvků, můžete se k němu kdykoli vrátit v tomto tutoriálu - "".
    • Navíc nastavíme pravý okraj tabulek na 30px a nastavíme vertikální zarovnání tabulek (horní část prvku je zarovnána s horní částí nejvyššího prvku). K podrobné diskusi o této vlastnosti se vrátíme v tomto článku.
    ) je tučné.
  • Pro buňky tabulky (záhlaví a datové buňky) nastavíme pevný okraj 1 px s hexadecimální barvou #F50 a nastavíme odsazení 19 px na všech stranách.
  • Za první stůl se třídou .První nastavíme mezery mezi buňkami tabulky (vlastnost border-spacing) na 30px 10px , pro druhou tabulku s třídou .druhý rovna nule, pro třetí tabulku s tř .Třetí rovná 0,2 em .

    • Upozorňuji na skutečnost, že pokud je ve vlastnosti border-spacing uvedena pouze jedna hodnota délky, pak určuje intervaly, horizontálně i vertikálně, a pokud jsou zadány dvě hodnoty délky, pak první určuje horizontální vzdálenost a druhá vertikální. Vzdálenost mezi okraji sousedních buněk lze zadat v jednotkách CSS (px, cm, em atd.). Záporné hodnoty nejsou povoleny.

    Výsledek našeho příkladu:

    Zobrazit ohraničení kolem buněk tabulky

    Můžeš říct: - takže jsme odstranili mezeru mezi buňkami pomocí vlastnosti border-spacing s hodnotou 0, ale proč nyní máme hranice buněk, které se protínají?

    Dvojité okraje se tvoří díky tomu, že spodní okraj jedné buňky je přidán k hornímu okraji buňky pod ní, podobná situace nastává na stranách buněk a je to logické z hlediska zobrazení tabulky, ale naštěstí tam je způsob, jak prohlížeči sdělit, že nechceme vidět takové drzé chování okrajů buněk.

    K tomu musíte použít Vlastnost CSS border-collaps . Kupodivu použití vlastnosti border-collapse s hodnotou kolaps je nejlepší způsob jak mohu odstranit mezeru mezi buňkami a zároveň mezi nimi nedostat dvojité okraje.

    Zvažte srovnání chování okrajů při použití vlastnosti border-spacing s hodnotou 0 a vlastnosti border-collapse s hodnotou kolaps :

    Příklad zobrazení ohraničení kolem buněk tabulky
    border-spacing: 0;
    1 2 3
    2
    3
    border-collapse: kolaps;
    1 2 3
    2
    3

    V tomto příkladu:

    • Udělali jsme naše tabulky jako plovoucí a posunuli je doleva (float : left ), nastavili jejich vnější pravý okraj na 30px .
    • Nastavit pro název tabulky (tag
    ) je tučné.
  • Pro buňky tabulky (záhlaví a datové buňky) nastavíme pevný okraj 5 px s hexadecimální barvou #F50 a nastavíme pevnou šířku 50px a výšku 75px.
  • Za první stůl se třídou .První nastavíme mezery mezi buňkami tabulky na nulu (border-spacing : 0 ;) a pro druhou tabulku s třídou .druhý nastavte vlastnost border-collapse na kolaps , která, pokud je to možné, sloučí okraje buněk do jednoho.

    • Výsledek našeho příkladu:

    Chování prázdných buněk

    Pomocí CSS můžete nastavit, zda se mají zobrazovat okraje a pozadí prázdných buněk v tabulce nebo ne. Za toto chování je zodpovědná vlastnost empty-cells, která, jak jste si mohli všimnout z předchozích příkladů, standardně zobrazuje prázdné buňky.

    Pojďme k příkladu:

    Příklad zobrazení prázdných buněk tabulky
    prázdné buňky: zobrazit;
    1 2 3
    2 ☺
    3 ☺
    prázdné buňky: skrýt;
    1 2 3
    2 ☺
    3 ☺

    Je velmi snadné pochopit, jak vlastnost empty-cells z tohoto příkladu funguje, pokud je nastavena na hide , pak budou prázdné buňky a pozadí v nich skryté, pokud je nastaveno na show (výchozí), budou zobrazeny.

    Umístění záhlaví tabulky

    Podívejme se na další jednoduchou vlastnost pro styling tabulky - caption-side , která nastavuje pozici popisku tabulky (nad nebo pod tabulkou). Ve výchozím nastavení je vlastnost caption-side nastavena na top , která umístí titulek nad tabulku. Chcete-li umístit záhlaví pod tabulku, musíte použít vlastnost s hodnotou bottom .

    Podívejme se na příklad použití této vlastnosti:

    Příklad použití vlastnosti caption-side
    Nadpis nad tabulkou
    názevCena
    Ryba350 rublů
    Maso250 rublů

    Titul pod stolem
    názevCena
    Ryba350 rublů
    Maso250 rublů

    V tomto příkladu jsme vytvořili dvě třídy, které řídí umístění záhlaví tabulky. První stupeň ( .topCaption) umístí záhlaví tabulky nad ni, aplikovali jsme ji na první tabulku a druhou třídu ( .bottomCaption) umístí záhlaví tabulky pod sebe, aplikovali jsme jej na druhou tabulku. Třída .topCaption je standardně nastavena na vlastnost caption-side a byla vytvořena pro demonstrační účely.

    Výsledek našeho příkladu:

    Horizontální a vertikální vyrovnání

    Ve většině případů při práci s tabulkami budete muset upravit zarovnání obsahu v buňkách záhlaví a dat. Vlastnost text-align se používá pro vodorovné zarovnání, podobně jako kterákoli jiná textové informace. Použití této vlastnosti pro text jsme zvažovali dříve v článku „“.

    Chcete-li nastavit zarovnání obsahu v buňkách, musíte použít speciální klíčová slova s ​​vlastností text-align. Zvažte aplikaci klíčová slova tuto vlastnost v následujícím příkladu.

    Příklad vodorovného zarovnání v tabulce
    VýznamPopis
    vlevo, odjetZarovná text buňky doleva. Toto je výchozí hodnota (pokud je směr textu zleva doprava).
    že joZarovná text buňky doprava. Toto je výchozí hodnota (pokud je směr textu zprava doleva).
    centrumZarovná text buňky na střed.
    ospravedlnitRoztáhne řádky tak, aby každý řádek měl stejnou šířku (roztáhne text buňky tak, aby odpovídal šířce).

    V tomto příkladu jsme vytvořili čtyři třídy, který nastavil různá vodorovná zarovnání v buňkách a aplikoval je v pořadí na řádky tabulky. Hodnota v buňce odpovídá hodnotě vlastnosti text-align

    Výsledek našeho příkladu:

    Kromě horizontálního zarovnání můžete také definovat vertikální zarovnání v buňkách tabulky pomocí vlastnosti vertical-align.

    Upozorňujeme, že při práci s buňkami tabulky platí pouze následující * hodnoty této vlastnosti:

    * - Hodnoty Sub , super , text-top , text-bottom , length a % ​​aplikované na buňku tabulky se budou chovat jako při použití základní hodnoty.

    Podívejme se na příklad použití:

    Příklad vertikálního zarovnání v tabulce
    VýznamPopis
    základní linieZarovná účaří buňky s účaří rodiče. Toto je výchozí hodnota.
    horníZarovná obsah buňky svisle nahoru.
    středníZarovná obsah buňky svisle na střed.
    dnoZarovná obsah buňky svisle dolů.

    V tomto příkladu jsme vytvořili čtyři třídy, který nastavil různá svislá zarovnání v buňkách a použil je pro řádky tabulky. Hodnota v buňce odpovídá hodnotě vlastnosti vertical-align, která byla použita na daný řádek.

    Algoritmus pro umístění rozložení tabulky prohlížečem

    CSS ve výchozím nastavení používá algoritmus automatického rozvržení tabulky prohlížeče. V tomto případě šířka sloupce je dána nejširším nerozdělitelným obsahem buňky. Tento algoritmus může být v některých případech pomalý, protože prohlížeč musí přečíst veškerý obsah tabulky, než určí její konečné rozložení.

    Chcete-li změnit typ rozvržení rozvržení tabulky pomocí prohlížeče automatický na pevný, musíte použít vlastnost CSS table-layout s hodnotou fixed .

    V tomto případě záleží pouze na vodorovném umístění na šířku tabulky a šířku sloupců, nikoli na obsah buněk. Prohlížeč začne vykreslovat tabulku, jakmile obdrží první řádek. V důsledku toho vám pevný algoritmus umožňuje vytvořit rozvržení takové tabulky rychleji než pomocí automatické volby. Při práci s velkými tabulkami můžete ke zvýšení výkonu použít pevný algoritmus.

    Podívejme se na použití této vlastnosti na následujícím příkladu:

    Příklad použití vlastnosti table-layout
    rozvržení stolu: auto;
    název 2009 2010 2011 2012 2013 2014 2015 2016
    Pšenice 125 215 2540 33287 695878 1222222 125840000 125
    rozvržení stolu: pevné;
    název 2009 2010 2011 2012 2013 2014 2015 2016
    Pšenice 125 215 2540 33287 695878 1222222 125840000 125

    V tomto příkladu:

    Stylování řádků a sloupců tabulky

    Vy a já jsme se již částečně dotkli metod stylování řádků a sloupců tabulky v článku "". V tomto článku jsme se podívali na použití skupinové pseudotřídy, která vám umožňuje prokládat styly řádků v tabulkách pomocí hodnot dokonce (upřímný) a zvláštní (zvláštní), nebo základní matematický vzorec.

    Vraťme se k technikám, které jsme dosud probrali, a prozkoumáme nové způsoby stylování řádků a sloupců v tabulkách. Pojďme k příkladům.

    Příklad použití pseudotřídy :nth-child s tabulkami
    1 2 3 4 5 6 7 8 9 10 11 12 13 14
    2
    3
    4

    V tomto příkladu:

    Výsledek našeho příkladu:

    Přejdeme k dalšímu příkladu, ve kterém zvážíme možnosti stylování řádků tabulky.

    Příklad stylingu řádků v tabulkách
    ServisCena
    Součet 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000

    V tomto příkladu:

    • Šířku tabulky nastavíme na 100 % šířky nadřazeného prvku, pro záhlaví a datové buňky nastavíme pevný okraj široký 1px.
    • Sada pro prvek
    1 2 3 4 5

    V tomto příkladu:

    • Vycentrujte tabulku s vnějšími okraji, nastavte šířku a výšku buněk záhlaví na 50px , zadáno průhledný ohraničení 5 pixelů.
    • Zjistil jsem, že když umístíte kurzor (pseudotřída :hover) na buňku záhlaví, dostane se pozadí modrý barvy, oranžový barva textu, ohraničení oranžový barvy 5 pixelů a poloměr zaoblení 100 % .
    • průhledný okraj je nutné pro rezervaci místa pro ohraničení, které se zobrazí při najetí, pokud tak neučiníte, tabulka „skočí“.

    Výsledek našeho příkladu:

    Následující příklad se týká pomocí HTML Prvky

    Přihláška č.Serviscena, rub.Celkový
    1Zpěv 6 000 6 000
    2mytí nádobí 2 000 2 000
    3Čištění 1 000 1 000
    4Naštvání 1 500 1 500
    5Čtení 3 000 3 000

    V tomto příkladu:

    Výsledek našeho příkladu:

    A poslední příklad, který je poměrně složitý na pochopení a vyžaduje pokročilé znalosti CSS, protože se dotýká budoucích témat plánovaných k podrobnému studiu v rámci tohoto kurzu.

    V předchozím příkladu jsme si to uvědomili HTML prvek můžete použít pouze jednu CSS vlastnost - barvu pozadí (background-color), ale zároveň nemůžete nastavit barvu pozadí na hover (pseudo-class :hover) na tento prvek přímo. V tomto příkladu se podíváme na to, jak zvýraznit sloupec tabulky pouze pomocí CSS.

    Příklad zvýraznění sloupců a řádků tabulky při umístění kurzoru myši
    Přihláška č.Serviscena, rub.Celkový
    1Zpěv 6 000 6 000
    2mytí nádobí 2 000 2 000
    3Čištění 1 000 1 000
    4Naštvání 1 500 1 500
    5Čtení 3 000 3 000

    V tomto příkladu:

    • Nastavili jsme, že naše tabulka zabírá 100 % nadřazeného prvku, buňky tabulky zabírají 25 % nadřazeného prvku a mají plné ohraničení 1 pixel zeleně, výška záhlaví a datových buněk je 45 px . Mezeru mezi buňkami jsme odstranili pomocí vlastnosti border-collapse s hodnotou .
    • A tak pomocí pseudoprvku ::after přidáme obsah za každý prvek vznášet se. Pseudoprvek ::after musí být použit spolu s vlastností content, díky které vložíme prvek na úrovni bloku, který má barvu pozadí lesní zeleň a má absolutní umístění.
    • Absolutní umístění je zde nutné k odsazení prvku vzhledem k zadané hraně jeho předka, zatímco předchůdce musí mít hodnotu pozice jinou než výchozí - static , jinak bude počet vztažen k zadanému okraji okna prohlížeče. důvod, proč jsme se postavili ke stolu relativní umístění(relativní ).
    • Pro náš vygenerovaný blok jsme nastavili vlastnost top, která určuje směr odsazení umístěného prvku od horní hrany, a vlastnost bottom, která určuje směr odsazení umístěného prvku od spodní hrany. Obě vlastnosti byly nastaveny na 0 , takže blok zcela zabere prvek ze spodní a horní části tabulky, šířka tohoto bloku byla nastavena na 25 %, tato hodnota odpovídá hodnotě šířky samotné buňky.
    • A poslední vlastnost, kterou jsme tomuto bloku nastavili: z-index s hodnotou "-1" určuje pořadí umístěných prvků v Osa Z. Tato vlastnost je nezbytná, aby byl text před tímto blokem a ne za ním, pokud nenastavíte hodnotu menší než nula, blok text uzavře.

    Výsledek našeho příkladu:

    Pokud v této fázi studie nerozumíte procesu polohování prvků, pak se nenechte odradit, jde o těžko pochopitelné téma, které jsme také nezvažovali, ale určitě se jím budeme zabývat v dalším článku učebnice "Polohování prvků v CSS".

    Otázky a úkoly k tématu

    Než přejdete k dalšímu tématu, dokončete praktický úkol:


    Pokud máte potíže dělat praktický úkol, Vždy můžete otevřít příklad v samostatném okně a prohlédnout si stránku, abyste viděli, jaké CSS bylo použito.


    2016-2020 Denis Bolshakov, můžete posílat komentáře a návrhy na web na adresu [email protected]