Výplň mezi buňkami CSS. Zarovnání obsahu buňky

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, stačí udělat odrážky v buňkách HTML tabulka. 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.

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ého prvku

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:

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.

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.

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í

1	2
3	4

Výsledek tento příklad ani obr. 1.

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 prohlížeč internet Explorer, 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í.

Specifikace CSS dává neomezené možnosti pro návrh tabulek. Ve výchozím nastavení nemají tabulka a buňky tabulky viditelné ohraničení nebo pozadí a buňky v tabulce nejsou umístěny blízko sebe.

Šířka buněk tabulky je dána šířkou jejich obsahu, takže šířka sloupců tabulky může být různá. Výška všech buněk v řadě je stejná a je určena výškou nejvyšší buňky.

Formátování tabulky

1. Hranice tabulky

Tabulka a buňky v ní jsou standardně zobrazeny v prohlížeči bez viditelných okrajů. Hranice tabulky jsou nastaveny vlastností border:

Tabulka ( border-collapse: sbalit; /*odstranit prázdná místa mezi buňkami*/ border: 1px plná šedá; /*nastavit vnější okraj tabulky šedá barva Tloušťka 1px*/ )

Ohraničení buňky záhlaví každý sloupec je nastaven pro th prvek:

Th (ohraničení: 1px plná šedá;)

Hranice buněk těla tabulek jsou určena pro prvek td:

Td (ohraničení: 1px plná šedá;)

Tloušťka okrajů sousedních buněk není zdvojnásobena, takže můžete nastavit okraje pro celou tabulku následujícím způsobem:

Th, td (ohraničení: 1px plná šedá;)

Vnější okraj tabulky lze zvýraznit zvětšením šířky:

Tabulka (ohraničení: 3px plné šedé;)

Hranice lze nastavit částečně:

/* nastaví 3px šedé vnější ohraničení tabulky */ tabulka (border-top: 3px plné šedé; ) /* nastavení 1px šedého ohraničení pro buňku těla tabulky */ td (border-bottom: 1px plné šedé;)

Můžete si přečíst více o vlastnosti border.

2. Jak nastavit šířku a výšku stolu

Výchozí šířka a výška stolu určeno obsahem jeho buněk. Pokud není šířka nastavena, bude se rovnat šířce nejširšího řádku (čáry).

Šířky tabulky a sloupce nastavit pomocí vlastnosti width. Pokud je tabulka nastavena na tabulku (šířka: 100%;) , bude šířka tabulky rovna šířce kontejnerového bloku, ve kterém se nachází.

Šířka tabulky a sloupců se obvykle nastavuje v px nebo % , například:

Tabulka (šířka: 600px;) th (šířka: 20 %;) td:první dítě (šířka: 30 %;)

Výška stolu Nenastaveno. Výška řádku s tabulkami lze manipulovat přidáním horní a spodní výplně k prvkům

. V praxi existují situace, kdy je potřeba speciální formátování sloupců, které je možné následujícími způsoby:

pomocí značky

Můžete nastavit pozadí pro libovolný počet sloupců;

pomocí selektorové tabulky td:first-child , table td:last-child , můžete nastavit styly pro první nebo poslední sloupec tabulky (kromě první buňky záhlaví tabulky);

pomocí selektoru tabulky td:nth-child (pravidlo pro výběr sloupců) můžete nastavit styly pro libovolné sloupce tabulky.

Můžete si přečíst více o selektorech CSS.

5. Jak přidat název do tabulky

Pomocí značky můžete do tabulky přidat záhlaví

. Fixování výšky pomocí vlastnosti height se nedoporučuje.

Th, td (odsazení: 10px 15px;)

3. Jak nastavit pozadí tabulky

Výchozí pozadí stolu a buňky průhledné. Pokud má stránka nebo blok obsahující tabulku pozadí, zobrazí se v tabulce. Pokud je pozadí nastaveno pro tabulku i pro buňky, tak v místech, kde se pozadí tabulky a buněk překrývá, bude vidět pouze pozadí buněk. Pozadí tabulky jako celku a jejích buněk může být:
plnění,
,
.

4. Sloupce tabulky

Tabulkový CSS model je zaměřen především na řádky (řádky) tvořené pomocí tagu

a pomocí vlastnosti caption-side jej lze umístit před nebo pod tabulku. Vlastnost text-align se používá k vodorovnému zarovnání textu záhlaví. Zděděno.

...

Tabulka č. 1
Společnost	Q1	Q2	Q3	Q4

titulek ( caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; )

Rýže. 2. Příklad zobrazení nadpisu pod tabulkou

6. Jak odstranit mezeru mezi rámečky buněk

Ohraničení buněk tabulky jsou ve výchozím nastavení odděleny malou mezerou. Pokud nastavíte border-collapse:collapse pro tabulku, mezera bude odstraněna. Nemovitost se dědí.

Syntax

Tabulka (border-collapse: kolaps;)
Rýže. 3. Příklad tabulek se slučováním a dělením ohraničení buněk

7. Jak zvětšit mezery mezi okraji buněk

Pomocí vlastnosti border-spacing můžete změnit mezery mezi ohraničeními buněk. Tato vlastnost platí pro tabulku jako celek. Zděděno.

Syntax

Tabulka (border-collapse: samostatné; border-spacing: 10px 20px;) tabulka (border-collapse: samostatné; border-spacing: 10px;)
Rýže. 4. Příklad tabulek se zvětšenými mezerami mezi rámečky buněk

8. Jak skrýt prázdné buňky tabulky

Vlastnost empty-cells skryje nebo zobrazí prázdné buňky. Ovlivňuje pouze buňky, které neobsahují žádný obsah. Pokud je buňka nastavena na pozadí a tabulka je nastavena na tabulku (border-collapse: kolaps;) , buňka nebude skryta. Zděděno.

Společnost	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabulka ( border: 1px solid #69c; border-collapse: oddělené; empty-cells: hide; ) th, td (border: 2px solid #69c;)

Rýže. 5. Příklad skrytí prázdné buňky tabulky

9. Rozvržení tabulky s vlastností table-layout

Rozvržení rozložení tabulky je určeno jedním ze dvou přístupů: pevným rozložením nebo automatickým rozložením. Rozložení v tomto případě odkazuje na to, jak je šířka tabulky rozdělena mezi šířku buněk. Nemovitost se nedědí.

Syntax

Stůl (rozložení stolu: pevné;)

10. Nejlepší rozložení tabulek

1. Horizontální minimalismus

Vodorovné tabulky jsou tabulky, jejichž text se čte vodorovně. Každá entita je samostatný řádek. Tyto tabulky můžete stylizovat do minimalistického stylu umístěním dvoupixelového ohraničení pod nadpis.

zaměstnanec	Plat	Bonus	Dozorce
Stephen C. Cox	$300	$50	Bobe
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabulka ( rodina písem: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; velikost písma: 14px; pozadí: bílé; max. šířka: 70 %; šířka: 70 %; sbalení ohraničení: sbalení; text -align: left; ) th ( font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td (color: #669; padding: 9px 8px; transition: .3s lineární; ) tr:hover td (barva: #6699ff;)

Díky velkému počtu řádků je tento design tabulky obtížně čitelný. Chcete-li tento problém vyřešit, můžete pod všechny prvky td přidat jednopixelové ohraničení.

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*další kód jako výše*/

Přidání efektu :hover k prvku tr usnadní čtení minimalistických tabulek. Když najedete myší na buňku, zbytek buněk ve stejném řádku se vybere současně, což usnadňuje sledování informací, pokud mají tabulky více sloupců.

Th ( váha písma: normální; barva: #039; padding: 10px 15px; ) td ( barva: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (pozadí: #e8edff ;)

2. Vertikální minimalismus

Ačkoli se takové tabulky používají zřídka, vertikálně orientované tabulky jsou přesto užitečné pro kategorizaci nebo porovnávání popisů objektů reprezentovaných sloupcem. Můžete je stylizovat do minimalistického stylu přidáním prostoru pro oddělení sloupců.

Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- pravý: 30px plný #fff; okraj-levý: 30px plný #fff; barva: #669; výplň: 12px 2px; )

3. Styl "krabicový".

Nejspolehlivějším stylem pro navrhování stolů všech typů je tzv. „krabicový“ styl. Stačí vybrat dobré barevné schéma a poté nastavit barvu pozadí pro všechny buňky. Nezapomeňte zdůraznit rozdíl mezi řádky nastavením hranic jako oddělovače.

Th ( font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; ) td ( background : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; ) tr:hover td (background: #ccddff;)

Nejtěžší je najít to správné barevné schéma, které bude harmonicky ladit s vaším webem. Pokud je web nabitý grafikou a designem, pak pro vás bude použití tohoto stylu poměrně obtížné.

Tabulka ( rodina písem: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; velikost písma: 14px; maximální šířka: 70 %; šířka: 70 %; zarovnání textu: na střed; sbalení ohraničení: sbalení ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- left: 1px solid #9baff1; color: #039; padding: 8px; ) td ( background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px ;)

4. Horizontální zebra

Zebra-stůl vypadá docela atraktivně a pohodlně. Volitelná barva pozadí může sloužit jako vizuální vodítko pro čtení tabulky.

Th ( váha písma: normální; barva: #039; padding: 10px 15px; ) td ( barva: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( pozadí: #e8edff ;)

5. Novinový styl

Chcete-li dosáhnout tzv. novinového efektu, můžete na prvky tabulky aplikovat ohraničení a hrát si s buňkami uvnitř. Lehký, minimalistický novinový styl může vypadat takto: pohrajte si s barevným schématem, přidejte okraje, výplň, různá pozadí a efekt vznášení na čáře.

Tabulka (border: 1px solid #69c;) th ( font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; ) td ( color: #669; padding: 7px 17px; ) tr:hover td (pozadí: #ccddff;)

Tabulka (ohraničení: 1px plný #69c;) th ( váha písma: normální; barva: #039; odsazení: 10px; ) td ( barva: #669; horní okraj: 1px přerušovaný #fff; odsazení: 10px; pozadí: #ccddff; ) tr:hover td (pozadí: #99bcff;)

Tabulka (ohraničení: 1px plné #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; text-transform: largecase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px plný #0865c2; border-bottom: 1px solid #fff; padding: 20px; ) td (color: #669; border-right: 1px přerušované #6cf; padding: 10px 20px; )

6. Pozadí tabulky

Pokud hledáte rychlý a jedinečný způsob, jak navrhnout stůl, vyberte si poutavý obrázek nebo fotografii související s tématem stolu a nastavte jej jako pozadí stolu.

Png") 98 % 86 % bez opakování; ) th ( váha písma: normální; velikost písma: 14px; barva: #339; výplň: 10px 12px; pozadí: bílá; ) td ( barva: #669; ohraničení- nahoře: 1px plná bílá; výplň: 10px 12px; pozadí: rgba(51, 51, 153, .2); přechod: .3s; ) tr:hover td ( pozadí: rgba(51, 51, 153, .1); )

5,00 / 3

Domov →D-link →Výplň mezi buňkami CSS. Zarovnání obsahu buňky →

Související články: