Vzdálenost mezi sloupci v css tabulce. Výplň mezi buňkami

Takže jsme s vámi studovali nejjednodušší akce, které lze provést s ohraničením tabulky. A nyní stůl vypadá mnohem estetičtěji. Výplň buněk však přímo spočívá na hranicích. To lze snadno opravit jednoduchým odsazením buněk v HTML tabulce. A pak bude text uvnitř rámečku, v buňce, čitelnější.

Chcete-li odsadit buňku, použijte atribut polstrování buněk pro značku

. Existuje však další, preferovanější možnost: css.

V tomto případě se odsazení nastavuje pomocí vlastnosti vycpávka. S jeho pomocí nebude obtížné odsadit tam, kde je to nutné, to znamená shora, doprava, zdola nebo doleva, a to pomocí jedné z těchto vlastností: vršek polstrování, vycpávka vpravo, vycpávka-dno a polstrování-vlevo.

Můžete přesně nastavit, kolik pixelů má být odsazeno. Uveďme příklad, ve kterém bude spodní odsazení 20 pixelů a vše ostatní bude 10 . Takový css-kód bude vypadat takto:

Td ( padding: 10px; padding-bottom: 20px; )

A úplný kód stylu v této fázi:

Tabulka ( border: solid 1px blue; border-collapse: Collapse; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; )

Výsledek v prohlížeči:

Výplň mezi buňkami

Úlohy spojené s vytvářením tabulek lze zpravidla řešit pomocí značek, atributů a vlastností, které umožňují vytvářet rámečky, odrážky v buňkách a také nastavit barevné pozadí samotných buněk.

Odrážky v tabulkách nejsou pouze uvnitř buněk. Mohou být také přítomny mezi samotnými buňkami.

Existují dvě možnosti odsazení buněk:

pomocí atributu rozmístění buněk pro značku

použitím css-vlastnosti ohraničení.

Je třeba zdůraznit, že ohraničení se zapisuje za tabulku jako celek, zatímco vlastnost vycpávka se zapisuje přímo do buněk.

Podívejme se na příklad:

Tabulka ( okraj: plný 1px modrý; border-collapse: oddělený; border-spacing: 5px; ) td ( okraj: plný 1px modrý; odsazení: 10px; padding-bottom: 20px; )

A k výslednému výsledku:

Okamžitě stanovíme, že není nutné zkoušet dělat takové odrážky pomocí border-collapse: kolaps. Při použití této možnosti se buňky skutečně „přilepí“ k sobě.

A abyste je udrželi odděleně od sebe, měli byste použít border-collapse: oddělené. Je důležité pochopit, že tato hodnota je výchozí hodnotou. A slouží pouze k vizuální ukázce toho, jak je tento problém vyřešen. Pokud tento řádek smažeme, uloží se výsledek ve formě buněk umístěných odděleně od sebe.

Už jsme s vámi zjistili, že HTML tabulky mají rámec, ačkoli je prohlížeče ve výchozím nastavení nezobrazují. Ale to není vše, každá buňka tabulky má také rámec tzv ohraničení buňky. Ale to není vše, pomocí speciálních atributů tagů

můžete změnit mezery mezi buňkami a od buněk k rámečku tabulky, stejně jako odsazení od okrajů buněk k jejich obsahu.

Rámeček HTML tabulky, ohraničení buněk, mezery mezi buňkami a odsazení.

Tak pro vytvoření rámu HTML tabulky a hranice svých buněk je použit pouze jeden atribut značky

- okraj . Hodnota atributu je nezáporné celé číslo (ve výchozím nastavení nula), které představuje velikost v pixelech. Ale pozor, velikost se mění pouze u rámečku tabulky, u okrajů buněk je vždy beze změny.

...

Pro změnu vzdálenosti mezi buňkami(jejich hranice) a z buněk do rámečku tabulky ve značce

použije se atribut cellpacing. Jeho hodnotami mohou být také pouze čísla, která měří vzdálenosti v pixelech.

...

Chcete-li nainstalovat interní odsazení od okrajů buněk k jejich obsahu vyžadováno ve značce

použijte atribut cellpadding. A jeho hodnoty jsou čísla představující rozměry pixelů.

...

Všimněte si, že prohlížeče ve výchozím nastavení používají malé (dva pixely) cellpacing a cellpadding , takže chcete-li mezery úplně odstranit, nastavte atributy na nulu (0).

Příklad ohraničení, ohraničení a odsazení pro tabulky HTML

Okraje tabulky, okraje a odsazení

Buňka 1.1	Buňka 1.2	Buňka 1.3
Buňka 2.1	Buňka 2.2	Buňka 2.3
Buňka 3.1	Buňka 3.2	Buňka 3.3

Tabulka s nastaveným pouze rámečkem a ohraničením buněk:

Buňka 1.1	Buňka 1.2	Buňka 1.3
Buňka 2.1	Buňka 2.2	Buňka 2.3
Buňka 3.1	Buňka 3.2	Buňka 3.3

Výsledek v prohlížeči

Stůl s upraveným polstrováním a rozestupy:

Přirozeně není nutné kreslit rámeček tabulky a ohraničení buněk, aby bylo možné změnit vnitřní odsazení a vzdálenosti mezi buňkami.

Podle syntaxe HTML prohlížeče přidávají hodnoty cellpacing a cellpadding k velikosti tabulky a jejích buněk. Pokud například nastavíte šířku buňky na 100px a cellpadding="10" - prohlížeče přidají k šířce 20px (10px doleva a doprava), aby bylo 120px. Obecně na to přijdete po cestě.

Odklon od tématu nebo jak odstranit odrážky na okrajích stránky

Zpočátku všechny prohlížeče nastavují malé okraje kolem okrajů HTML stránky, které často nejsou potřeba, takže nyní se naučíte, jak je odstranit. Obecně by tato informace měla být umístěna na začátku učebnice, ale tam by se vám sotva hodila.

V pravý čas u značky existovaly čtyři atributy, které nastavovaly velikost těchto okrajů pro každou stranu stránky: topmargin (nahoře), rightmargin (right), bottommargin (dole) a leftmargin (left). Nyní jsou tyto atributy zastaralé, takže použijeme styly (CSS). Existuje tedy několik způsobů, jak změnit okraje na okrajích stránky, ukážu vám dva a o třetím se dozvíte, pokud se rozhodnete naučit se CSS.

Metoda jedna. B štítek zadejte atribut style s následujícími hodnotami:

style="margin:0" >...

- odstraní odsazení ze všech stran HTML stránky najednou.

styl= "margin:horní pravý dolní levý">...

- upraví velikost odsazení pro každou stranu ve směru hodinových ručiček. Zpravidla se používají rozměry v pixelech, například: style="margin:5px 3px 4px 5px" >...

Druhý a pohodlnější způsob. Ve štítku

Domácí práce.

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

Vytvořte tři tabulky, každou s jedním řádkem a třemi sloupci (sloupci).
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.
Nechte šířku prvního a posledního sloupce každé tabulky pevně nastavit.
Důležité. Použijte značku pouze k vytvoření čtyř horizontálních tlačítek nabídky 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.
Nechte text obsahu stránky zarovnat na obě strany buňky tabulky s nadpisem na střed.
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ů pomáhají organizovat důležité informace a usnadňují jejich prezentaci.

V tomto článku vás provedu spletitostí stylování tabulek HTML 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ítek

Popis


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

V tomto příkladu:

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

rozteč ohraničení: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.

Chcete-li to provést, musíte použít vlastnost CSS border-collapse. Kupodivu je použití vlastnosti border-collapse s hodnotou sbalení nejlepším způsobem, jak odstranit mezeru mezi buňkami, aniž by se mezi nimi vytvořily 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ázev	Cena
Ryba	350 rublů
Maso	250 rublů

Titul pod stolem
název	Cena
Ryba	350 rublů
Maso	250 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 horizontální zarovnání, podobně jako jakákoli 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 použití klíčových slov této vlastnosti v následujícím příkladu.

Příklad vodorovného zarovnání v tabulce

Význam	Popis
vlevo, odjet	Zarovná text buňky doleva. Toto je výchozí hodnota (pokud je směr textu zleva doprava).
že jo	Zarovná text buňky doprava. Toto je výchozí hodnota (pokud je směr textu zprava doleva).
centrum	Zarovná text buňky na střed.
ospravedlnit	Roztá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ýznam	Popis
základní linie	Zarovná úč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.
dno	Zarovná 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

Servis	Cena
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ů.
Zjistilo se, že když umístíte kurzor myši (pseudotřída :hover) na buňku záhlaví, získá 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 dotýká použití prvků HTML a a jejich styling.

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

Přihláška č.	Servis	cena, rub.	Celkový
1	Zpěv	6 000	6 000
2	mytí nádobí	2 000	2 000
3	Čištění	1 000	1 000
4	Naš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 uvědomili, že element HTML 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 č.	Servis	cena, rub.	Celkový
1	Zpěv	6 000	6 000
2	mytí nádobí	2 000	2 000
3	Čištění	1 000	1 000
4	Naš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í polohová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 s dokončením cvičného cvičení, můžete vždy 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]

Tabulkové údaje- informace, které lze zobrazit ve formě tabulky a logicky rozdělit do sloupců a řádků. HTML tag se používá k zobrazení tabulkových dat na webových stránkách.

, což je nádoba s obsahem tabulky. Obsah HTML tabulky je popsán řádek po řádku, každý řádek začíná úvodní značkou a končí uzavírací značkou .

Uvnitř štítku

jsou umístěny buňky tabulky reprezentované značkami

nebo

. Jsou to buňky, které obsahují veškerý obsah tabulky zobrazené na webové stránce.

rám stolu

Ve výchozím nastavení se tabulka HTML na webové stránce zobrazuje bez ohraničení, pro přidání ohraničení do tabulky, stejně jako do všech ostatních prvků, použijte vlastnost CSS okraj. Ale měli byste věnovat pozornost skutečnosti, že pokud přidáte ohraničení pouze k prvku

, pak se zobrazí kolem celé tabulky. Aby buňky tabulky měly také rámeček, budete muset pro prvky nastavit vlastnost border

Tabulka, th, td ( okraj: 1px plná černá; ) Snaž se "

Nyní tabulka i buňky mají ohraničení a každá buňka a tabulka má své vlastní ohraničení. V důsledku toho se mezi rámy objevil prázdný prostor, velikost tohoto prostoru může být řízena nemovitostí ohraničení, který je nastaven pro celý stůl. Jinými slovy, nemůžete jednotlivě ovládat rozestupy mezi různými buňkami.

I když odstraníte mezery mezi buňkami s vlastností border-spacing nastavenou na 0, okraje buněk se budou navzájem dotýkat a zdvojnásobí se. Chcete-li sloučit rámečky buněk, použijte vlastnost border-kolaps. Může nabývat dvou hodnot:

oddělené: je výchozí hodnota. Buňky jsou zobrazeny v malé vzdálenosti od sebe, každá buňka má své ohraničení.
sbalit: sloučí sousední snímky do jednoho, všechny mezery mezi buňkami i mezi buňkami a rámečkem tabulky jsou ignorovány.

Název dokumentu

název	Příjmení
Homer	Simpsonovi
Marge	Simpsonovi

název	Příjmení
Homer	Simpsonovi
Marge	Simpsonovi

Snaž se "

Velikost stolu

Po přidání ohraničení k buňkám tabulky bylo patrné, že obsah buněk byl příliš blízko okrajů. Chcete-li přidat volné místo mezi okraje buněk a jejich obsah, můžete použít vlastnost vycpávka :

Th, td ( odsazení: 7px; ) Snaž se "

Velikost stolu závisí na jeho obsahu, ale často nastávají situace, kdy je stůl příliš úzký a je nutné jej roztáhnout. Šířku a výšku tabulky lze změnit pomocí vlastností šířka a výška, nastavení požadovaných rozměrů nebo samotné tabulky nebo buněk:

Tabulka ( šířka: 70 %; ) th ( výška: 50 px; ) Snaž se "

Zarovnání textu

Ve výchozím nastavení je text v buňkách záhlaví tabulky zarovnán na střed a text v normálních buňkách je pomocí vlastnosti zarovnán doleva zarovnání textu Můžete ovládat vodorovné zarovnání textu.

Vlastnost CSS svisle zarovnat umožňuje ovládat vertikální zarovnání obsahu textu. Ve výchozím nastavení je text zarovnán svisle na střed buněk. Svislé zarovnání lze přepsat pomocí jedné z hodnot vlastnosti svislé zarovnání:

nahoře: text je zarovnán k horní části buňky
uprostřed: zarovná text na střed (výchozí)
dole: text je zarovnán k dolnímu okraji buňky

Název dokumentu

název	Příjmení
Homer	Simpsonovi
Marge	Simpsonovi

Snaž se "

Střídání barvy pozadí řádku tabulky

Při prohlížení velkých tabulek obsahujících mnoho řádků s velkým množstvím informací může být obtížné sledovat, která data se týkají konkrétního řádku. Chcete-li uživatelům usnadnit navigaci, můžete střídavě používat dvě různé barvy pozadí. Chcete-li vytvořit popsaný efekt, můžete použít selektor třídy, přidáním do každého druhého řádku tabulky:

Název dokumentu

název	Příjmení	Pozice
Homer	Simpsonovi	otec
Marge	Simpsonovi	matka
Bart	Simpsonovi	syn
Lisa	Simpsonovi	dcera

Snaž se "

Přidání atributu třídy na každý druhý řádek je poměrně zdlouhavý úkol. Přidáno do CSS3 pseudotřída:n-té dítě, což umožňuje řešit tento problém alternativním způsobem. Nyní lze efektu prokládání dosáhnout pouze pomocí CSS, aniž by bylo nutné měnit HTML označení dokumentu. Pomocí pseudotřídy :nth-child můžete vybrat všechny sudé nebo liché řádky tabulky pomocí jednoho z klíčových slov: sudé (sudé) nebo liché (liché):

Tr:nth-child(liché) (barva pozadí: #EAF2D3; ) Snaž se "

Změnit pozadí řádku při najetí myší

Dalším způsobem, jak zlepšit čitelnost tabulkových dat, je změnit barvu pozadí řádku, když na něj najedete myší. To pomůže zvýraznit požadovaný obsah tabulky a zvýšit vizuální vnímání dat.

Implementace takového efektu je velmi jednoduchá, vše, co musíte udělat, je přidat pseudotřídu :hover do selektoru řádku tabulky a nastavit požadovanou barvu pozadí:

Tr:hover (barva pozadí: #E0E0FF; ) Snaž se "

Tabulka zarovnání na střed

Zarovnání tabulky HTML na střed je možné pouze v případě, že šířka tabulky je menší než šířka jejího nadřazeného prvku. Chcete-li tabulku vycentrovat, musíte použít vlastnost margin a nastavit ji alespoň na dvě hodnoty: první hodnota bude zodpovědná za vnější okraj tabulky shora a zdola a druhá - pro automatické zarovnání na střed:

Tabulka ( okraj: 10px automaticky; ) Snaž se "

Pokud potřebujete různé odsazení v horní a dolní části tabulky, můžete nastavit vlastnost okraj tři hodnoty: první bude zodpovědná za horní odsazení, druhá za vodorovné zarovnání a třetí za spodní odsazení:

Tabulka ( okraj: 10px automaticky 30px; )

5,00 / 3

Domov →Windows 10 →Vzdálenost mezi sloupci v css tabulce. Výplň mezi buňkami →

Související články: