pomocí voliče tabulky td: první dítě, tabulka td: poslední dítě můžete stylovat první nebo poslední sloupec tabulky (kromě první buňky záhlaví tabulky);
pomocí tabulky td: nth-child selector (pravidlo pro výběr sloupců) můžete stylovat libovolné sloupce v tabulce.
Můžete si přečíst více o voličích CSS.
, a pomocí vlastnosti na straně titulků ji lze umístit před nebo pod tabulku. Vlastnost zarovnání textu slouží k horizontálnímu zarovnání textu nadpisu. Zděděno.
Tabulka č. 1
| Společnost |
Q1 |
Q2 |
Q3 |
Q4 |
...
titulek (strana s titulky: dole; zarovnání textu: vpravo; odsazení: 10 pixelů 0; velikost písma: 14 pixelů;) 
Rýže. 2. Příklad zobrazení záhlaví pod tabulkou 6. Jak odstranit mezeru mezi rámečky buněk
Výchozí ohraničení buněk tabulky jsou oddělena malou mezerou. Pokud pro tabulku nastavíte border-collapse: collapse, mezera bude odstraněna. Nemovitost se dědí.
Syntax
Tabulka (border-collaps: collapse;)
Rýže. 3. Příklad tabulek se slučováním a rozdělením ohraničení buněk
7. Jak zvětšit prostor mezi okraji buněk
Pomocí vlastnosti mezer mezi řádky můžete změnit vzdálenost mezi ohraničeními buněk. Tato vlastnost platí pro tabulku jako celek. Zděděno.
Syntax
Tabulka (sbalení ohraničení: oddělené; mezery mezi okraji: 10 pixelů 20 pixelů;) tabulka (sbalení okrajů: oddělené; mezery mezi okraji: 10 pixelů)
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 prázdné buňky skryje nebo zobrazí prázdné buňky. Ovlivňuje pouze buňky, které neobsahují žádný obsah. Pokud je pro buňku zadáno pozadí a pro tabulku je zadána tabulka (border-collaps: collapse;), pak buňka nebude skrytá. Zděděno.
| Společnost |
Q1 |
Q2 |
Q3 |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
tabulka (ohraničení: 1px plné # 69c; sbalení ohraničení: oddělené; prázdné buňky: skrýt;) th, td (ohraničení: 2px plné # 69c;) 
Rýže. 5. Příklad skrytí prázdné buňky tabulky 9. Rozložení tabulky rozložení pomocí vlastnosti table-layout
Rozložení rozložení tabulky je určeno jedním ze dvou přístupů: pevné rozložení nebo automatické rozložení. Rozložení v tomto případě znamená, jak je šířka tabulky rozdělena mezi šířku buněk. Majetek není zděděn.
Syntax
Tabulka (rozložení tabulky: pevné;)
10. Nejlepší rozložení tabulky
1. Horizontální minimalismus
Horizontální tabulky jsou tabulky, ve kterých se text čte horizontálně. Každá entita je samostatný řádek. Tabulky můžete takto stylizovat v minimalistickém stylu umístěním dvoupixelového okraje pod th nadpis.
| Zaměstnanec | Plat | Bonus | Dozorce |
|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin tan | $150 | - | Annie |
| Joyce ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
tabulka (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; velikost písma: 14px; pozadí: bílá; max-width: 70%; width: 70%; border-collapse: collapse; text -align: left;) th (weight-font: 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;)Vzhledem k velkému počtu řádků je tento design tabulek 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;) / * the rest of the code is as in the example above * /
Přidání efektu:: hover k prvku tr usnadňuje čtení tabulek s minimalistickým stylem. Když umístíte kurzor myši na buňku, ostatní buňky ve stejném řádku se zvýrazní současně, což zjednodušuje proces sledování informací, pokud mají tabulky více sloupců.
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)
2. Vertikální minimalismus
Ačkoli se takové tabulky používají jen zřídka, vertikálně orientované tabulky jsou užitečné pro kategorizaci nebo porovnávání popisů objektů reprezentovaných sloupcem. Můžete je stylizovat v minimalistickém stylu přidáním mezery oddělující sloupce.
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- vpravo: 30px plné #fff; ohraničení vlevo: 30px plné #fff; barva: #669; polstrování: 12px 2px;)
3. Styl „Box“
Nejspolehlivějším stylem pro zdobení stolů všech typů je takzvaný „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 okrajů jako oddělovačů.
Th (velikost písma: 13 pixelů; hmotnost písma: normální; pozadí: # b9c9fe; horní okraj: 4 pixely plné #aabcfe; spodní okraj: 1 pixely plné #fff; barva: # 039; odsazení: 8 pixelů;) td (pozadí : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;)
Nejtěžší je najít barevné schéma, které bude harmonicky ladit s vaším webem. Pokud je web nabitý grafikou a designem, bude pro vás tento styl docela obtížné používat.
Tabulka (rodina písem: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; velikost písma: 14 pixelů; maximální šířka: 70%; šířka: 70%; zarovnání textu: střed; sbalení okraje: 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- vlevo: 1px plná # 9baff1; barva: # 039; výplň: 8px;) td (pozadí: # e8edff; okraj-vpravo: 1px plná #aabcfe; okrajová levá: 1px plná #aabcfe; barva: # 669; výplň: 8px ;)
4. Horizontální zebra
Stůl Zebra vypadá docela atraktivně a šikovně. Doplňková barva pozadí může lidem sloužit jako vizuální nápověda ke čtení tabulky.
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( pozadí: # e8edff;)
5. Novinový styl
Abyste dosáhli takzvaného novinového efektu, můžete na prvky stolu aplikovat ohraničení a hrát si s buňkami uvnitř. Lehký, minimální styl novin může vypadat takto: hrajte si s barvami, přidávejte ohraničení, výplně, různá pozadí a efekt: hover při vznášení se nad čárou.
Tabulka (ohraničení: 1px plná # 69c;) th (hmotnost písma: normální; barva: # 039; spodní okraj: 1px přerušovaná # 69c; výplň: 12px 17px;) td (barva: # 669; výplň: 7px 17px; ) tr: hover td (pozadí: #ccddff;)
Tabulka (ohraničení: 1px plné # 69c;) th (hmotnost písma: normální; barva: # 039; odsazení: 10px;) td (barva: # 669; horní okraj: 1px čárkované #fff; odsazení: 10px; pozadí: #ccddff;) tr: hover td (pozadí: # 99bcff;)
Tabulka (ohraničení: 1px plné # 6cf;) th (hmotnost písma: normální; velikost písma: 13px; barva: # 039; transformace textu: velká písmena; pravý okraj: 1px plný # 0865c2; horní okraj: 1px plný # 0865c2; ohraničení vlevo: 1px plné # 0865c2; spodní okraj: 1px plné #fff; polstrování: 20px;) td (barva: # 669; pravé ohraničení: 1px čárkované # 6cf; odsazení: 10px 20px;)
6. Pozadí tabulky
Pokud hledáte rychlý a jedinečný způsob stylování stolu, vyberte atraktivní obrázek nebo fotografii související s tématem stolu a nastavte jej jako pozadí stolu.
Png ") 98% 86% bez opakování;) th (hmotnost písma: normální; velikost písma: 14 pixelů; barva: # 339; výplň: 10 pixelů 12 pixelů; pozadí: bílá;) td (barva: # 669; ohraničení- top: 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); )
Ahoj všichni! Nyní tedy můžete vytvářet elementární tabulky, skládající se z tolik řádků a sloupců, kolik potřebujete. Není to špatné, není to špatné. Nyní si promluvme o designu těchto tabulek.
V poslední lekci byly tabulky zobrazeny bez ohraničení. A vidíte, vypadá to tak, že tomu ani nemůžete říkat znamení. Chcete -li vytvořit ohraničení tabulky v HTML, přidejte do značky
atribut okraj tím, že mu dáte jinou hodnotu než nulu.
Udělejme tedy okraje pro stůl. Například pro ten, který již máme:
| Levá horní buňka | Vpravo nahoře buňka |
| Levá dolní buňka | Pravá dolní buňka |
Výsledek v prohlížeči:
Jak odstranit ohraničení tabulky
Abyste zase odstranili ohraničení tabulky HTML, nebo můžete také říci, že jsou neviditelná, potřebujete atribut okraj nastavená hodnota 0
... Po těchto jednoduchých akcích bude rámeček odstraněn.
Atribut vám umožňuje vytvářet, ale ne spravovat ohraničení. Umožňuje pouze změnit jejich tloušťku.
Proto teď budeme mluvit o CSS jehož vlastnosti to umožňují s okraj kolem stolu jako celku vytvořte různá ohraničení, uvnitř každé buňky i mimo ni.
Pojďme se podívat na to, jak použít CSS k vytvoření vnějšího a vnitřního ohraničení tabulky.
Chcete -li to provést, odeberte z naší tabulky atribut border a přidejte styly:
Příklad tabulky
| Levá horní buňka |
Vpravo nahoře buňka |
| Levá dolní buňka |
Pravá dolní buňka |
Výsledek v prohlížeči:
Nyní přidejme také ohraničení pro každou buňku. Chcete -li to provést, stačí přidat styly:
Výsledek v prohlížeči:
Jak odstranit odsazení mezi buňkami v tabulce HTML
Souhlasíte s tím, že ohraničení definované pomocí CSS nemá stejný vzhled, jaký byste chtěli. Z hlediska estetiky je nepochybně na čem pracovat. Na stránce prohlížeče vidíte, že ve výchozím nastavení zobrazuje ohraničení tabulek a buněk samostatně. Příklad to jasně ukazuje.
Je však docela možné zbavit se takových hranic, kterým se říká dvojité, pokud použijeme vlastnost CSS border-collapse. V praxi to vypadá takto:
Tabulka (ohraničení: plná 1px modrá; ohraničení: sbalení;) ...
V důsledku toho se vzdálenost mezi buňkami odstraní:
Hodnota sbalení přiřazená atributu border odstraní dvojitá ohraničení. Jak vidíte, výsledkem je sbalení hranic sousedních buněk, stejně jako hranic buněk a vnějšího okraje tabulky. Pokud jde o to druhé, lze jej zcela odstranit. A pokud je potřeba jej zobrazit, musíte zvětšit jeho šířku. Tím jsme se zbavili oddělovačů v tabulce. A v další lekci si povíme, jak můžete nastavit svislé a vodorovné ohraničení. Hodně štěstí všem!
Tabulkové údaje- informace, které lze zobrazit ve formě tabulky a logicky rozdělit na sloupce a řádky. HTML tag slouží k zobrazení tabulkových dat na webových stránkách
, což je kontejner s obsahem tabulky. Obsah tabulky HTML je popsán řádek po řádku, každý řádek začíná úvodní značkou a končí uzavírací značkou
.
Uvnitř visačky
buňky tabulky jsou umístěny, reprezentované tagy | nebo | ... Jsou to buňky, které obsahují veškerý obsah tabulky zobrazený na webové stránce.
Rám stolu
Ve výchozím nastavení je tabulka HTML na webové stránce vykreslena bez ohraničení; k přidání ohraničení do tabulky se jako u všech ostatních prvků používá vlastnost CSS border. Je však třeba poznamenat, že pokud přidáte ohraničení pouze k prvku , pak se zobrazí kolem celé tabulky. Aby buňky tabulky měly také ohraničení, budete muset pro prvky nastavit vlastnost border | a | . Table, th, td (border: 1px solid black;) Try it " Tabulka i buňky mají nyní ohraničení, zatímco každá buňka a tabulka mají svá vlastní ohraničení. V důsledku toho se mezi snímky objevil prázdný prostor; vlastnost border-spacing vám umožňuje řídit velikost tohoto prostoru, který je nastaven pro celou tabulku. Jinými slovy, nemůžete ovládat mezery mezi různými buňkami jednotlivě.
I když odstraníme mezery mezi buňkami pomocí hodnoty 0 vlastnosti mezerové mezery, okraje buněk se budou navzájem dotýkat a zdvojnásobí se. Vlastnost border-collapse se používá ke sloučení hranic buněk. Může mít dvě hodnoty:
- samostatné: je výchozí. Buňky jsou zobrazeny kousek od sebe, každá buňka má své ohraničení.
- sbalit: spojuje sousední rámce do jednoho, všechny mezery mezi buňkami, jakož i mezi buňkami a rámcem 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í rámečků do buněk tabulky začalo být patrné, že obsah buněk je příliš blízko okrajů. Vlastnost padding můžete použít k přidání mezery mezi okraje buněk a jejich obsah: Čt, td (odsazení: 7 pixelů;) Zkuste to " 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í width a height, nastavením požadovaných rozměrů buď na samotnou tabulku, nebo na buňky: Tabulka (šířka: 70%;) th (výška: 50px;) Zkuste to " 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 zarovnán doleva. Pomocí vlastnosti zarovnání textu můžete ovládat vodorovné zarovnání textu.
Vlastnost CSS pro svislé zarovnání vám umožňuje řídit svislé zarovnání textového obsahu. Ve výchozím nastavení je text svisle zarovnán na střed buněk. Svislé zarovnání lze přepsat jednou z hodnot pro vlastnost svislého 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 na konec buňky
Název dokumentu
| název | Příjmení |
|---|
| Homer | Simpsonovi |
| Marge | Simpsonovi |
Snaž se " Střídání barvy pozadí řádků tabulky
Při pohledu na velké tabulky obsahující mnoho řádků se spoustou informací může být obtížné sledovat, která data patří do konkrétního řádku. Abyste uživatelům usnadnili navigaci, můžete použít střídavě dvě různé barvy pozadí. K vytvoření popsaného efektu můžete použít volič tříd a přidat jej 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 únavný úkol. Pseudotřída: nth-child byla přidána do CSS3, aby se tento problém vyřešil alternativním způsobem. Nyní lze efektu prokládání dosáhnout výhradně pomocí CSS, aniž bychom se museli uchýlit ke změně HTML označení dokumentu. Pomocí pseudotřídy: n-dítě můžete vybrat všechny sudé nebo liché řádky v tabulce pomocí jednoho z klíčových slov sudá (sudá) nebo lichá (lichá): Tr: n-dítě (liché) (barva pozadí: # EAF2D3;) Zkuste to " Při přechodu změňte pozadí řádku
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 zlepšit vizuální vnímání dat.
Implementace tohoto efektu je velmi jednoduchá, k tomu je třeba přidat: hover pseudo-třídu do voliče řádků tabulky a nastavit požadovanou barvu pozadí: Tr: hover (barva pozadí: # E0E0FF;) Zkuste to " Zarovnání stolu na střed
Zarovnání tabulky HTML ke středu je možné pouze v případě, že je šířka tabulky menší než šířka jejího nadřazeného prvku. Chcete -li zarovnat tabulku ve středu, musíte použít vlastnost margin, nastavit alespoň dvě hodnoty: první hodnota bude zodpovědná za vnější okraj tabulky v horní a dolní části a druhá - pro automatické zarovnání středu : Tabulka (okraj: 10 px automaticky;) Zkuste to " Pokud potřebujete různé okraje v horní a dolní části tabulky, můžete nastavit vlastnost margin na tři hodnoty: první bude zodpovědný za horní okraj, druhý za horizontální zarovnání a třetí za spodní okraj: Tabulka (okraj: 10px auto 30px;)
Zvažovali jsme mnoho metod stylingových prvků na stránce, jako jsou textové informace, odkazy, obrázky, nadpisy, ale to vše zatím nestačí. Ve svých článcích často používám prvky HTML, jako jsou tabulky, protože ve většině případů jsou pomáhá organizovat důležité informace a usnadňovat jejich prezentaci.
V tomto článku vás seznámím se složitostí stylingu tabulek HTML a naučíte se nové vlastnosti CSS určené k dosažení těchto cílů.
Hypertextový značkovací jazyk HTML nám poskytl velké množství příležitostí svázat styly CSS s deseti jedinečnými značkami navrženými pro práci s tabulkami, doporučuji je před další studií zopakovat:
| Štítek | Popis |
|---|
| Definuje obsah tabulky. |
|
| Určuje název tabulky. |
|
| Definuje buňku záhlaví tabulky. |
|---|
|
| Definuje řádek v tabulce. |
|
| Definuje datovou buňku tabulky. |
| Používá se k obsažení záhlaví skupiny v tabulce (záhlaví tabulky). |
| |
Používá se k obsažení „těla“ tabulky. |
|
Slouží k obsazení „zápatí“ tabulky (zápatí). |
|
| Definuje vlastnosti zadaného sloupce pro každý sloupec v rámci značky .
|
|
| Definuje skupinu sloupců v tabulce. |
Práce s odsazením tabulky
Použití polstrování v tabulce
Odsazení tabulky
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
V tomto příkladu:
- Umístil stůl doprostřed pomocí techniky horizontálního centrování s vnějším polstrováním (okraj: 0 auto).
- Název tabulky (tag ) nastavíme spodní výplň na 19 pixelů. Doufám, že vás zmatená nerovnoměrná čísla nemotají :)
Výsledek našeho příkladu:
Mezery mezi buňkami
Po výše uvedeném příkladu jste si možná všimli, že máme mezeru mezi všemi buňkami v tabulce. Podívejme se, jak odstranit mezeru mezi buňkami tabulky nebo ji zvětšit.
Chcete -li nastavit vzdálenost mezi ohraničením sousedních buněk, musíte použít vlastnost CSS - border -spacing.
Změňte mezery mezi tabulkami
mezery mezi okraji: 30px 10px;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
mezery mezi okraji: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
mezery mezi okraji: 0,2 em;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
V tomto příkladu:
- plavat vlevo). Pokud vám téma plovoucích prvků uniklo, můžete se k němu v tomto tutoriálu kdykoli vrátit - "".
- Kromě toho nastavíme polstrování stolu vpravo na 30 pixelů a nastavíme svislé zarovnání tabulek (horní část prvku je zarovnána s horní částí nejvyššího prvku). K této vlastnosti se podrobně vrátíme v tomto článku.
- ) - tučně.
- U buněk tabulky (záhlaví a datové buňky) nastavíme 1pixelové pevné ohraničení s šestnáctkovou čárkou # F50 a nastavíme odsazení na 19 pixelů pro všechny strany.
- Pro první tabulku se třídou .za prvé nastavíme mezery mezi buňkami tabulky (vlastnost mezer mezi hranicemi) na 30 pixelů 10 pixelů, pro druhou tabulku se třídou .druhý rovno nule, pro třetí tabulku s třídou .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 označuje rozteč, horizontálně i vertikálně, a pokud jsou zadány dvě hodnoty délky, pak první určuje horizontální vzdálenost , a druhá svislá. 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 jsme odstranili mezery mezi buňkami pomocí vlastnosti border-spacing s hodnotou 0, ale proč teď máme ohraničení buněk protínající?
Dvojité ohraničení se tvoří díky tomu, že spodní okraj jedné buňky je přidán k hornímu okraji buňky, která je pod ní, podobná situace nastává po stranách buněk a to je logické z hlediska zobrazení tabulka, ale naštěstí existuje způsob, jak prohlížeči říct, že jsme, nechceme vidět takové drzé chování hranic buněk.
Chcete-li to provést, musíte použít vlastnost CSS border-collapse. Zvláštní je, že použití vlastnosti sbalení hranic s hodnotou sbalení je nejlepší způsob, jak odstranit mezeru mezi buňkami, aniž by mezi nimi byly dvojité ohraničení.
Zvažte srovnání chování hranic při použití vlastnosti border-spacing s hodnotou 0 a vlastnosti border-collapse s hodnotou kolapsu:
Příklad zobrazení ohraničení kolem buněk tabulky
mezery mezi okraji: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
kolaps kolapsu: kolaps;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
V tomto příkladu:
- Naše tabulky byly plovoucí a zarovnané doleva (plovoucí: levé), nastavily jejich pravý okraj na 30 pixelů.
- Nastavte pro název tabulky (tag ) - tučně.
- Pro buňky tabulky (záhlaví a datové buňky) jsme nastavili 5px plné ohraničení s # F50 hex a nastavili pevnou šířku 50px a výšku 75px.
- Pro první tabulku se třídou .za prvé mezery mezi buňkami tabulky nastavíme na nulu (mezery mezi okraji: 0;) a pro druhou tabulku se třídou .druhý nastavte vlastnost sbalení hranic na sbalení, která pokud možno sloučí ohraničení buněk do jednoho.
Výsledek našeho příkladu:
Chování prázdné buňky
Pomocí CSS můžete nastavit, zda se mají v tabulce zobrazovat ohraničení a pozadí prázdných buněk. Za toto chování je zodpovědná vlastnost prázdné buňky, která ve výchozím nastavení, jak jste si mohli všimnout z předchozích příkladů, zobrazuje prázdné buňky.
Přejdeme 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 |
☺ | |
Chcete-li pochopit, jak funguje vlastnost prázdných buněk z tohoto příkladu, je velmi jednoduché, pokud je nastaveno na skrytí, prázdné buňky a pozadí v nich budou skryty, pokud jsou nastaveny na zobrazení (výchozí), pak se zobrazí.
Umístění záhlaví tabulky
Podívejme se na další jednoduchou vlastnost stylingových tabulek - side -caption, která nastavuje pozici titulku tabulky (nad nebo pod tabulkou). Ve výchozím nastavení je vlastnost na straně titulků nastavena na začátek, což umístí titulek nad tabulku. Aby bylo možné umístit název pod tabulku, musíte použít vlastnost se spodní hodnotou.
Podívejme se na příklad použití této vlastnosti:
Příklad použití vlastnosti na straně titulků
Nadpis nad stolem
| název | Cena |
| Ryba | 350 rublů |
| Maso | 250 rublů |
Nadpis pod tabulkou
| název | Cena |
| Ryba | 350 rublů |
| Maso | 250 rublů |
V tomto příkladu jsme vytvořili dvě třídy které řídí polohu záhlaví tabulky. První stupeň ( .topCaption) umístí nad ni název tabulky, použili jsme ji na první tabulku a druhou třídu ( .bottomCaption) umístí pod ni název tabulky, my jsme ji aplikovali na druhou tabulku. Třída .topCaption má výchozí vlastnost na straně titulků a byla vytvořena pro demonstrační účely.
Výsledek našeho příkladu:
Horizontální a vertikální zarovná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 zarovnání textu se používá pro vodorovné zarovnání podobné jakýmkoli textovým informacím. Použití této vlastnosti pro text jsme probrali 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í zarovnání textu. Zvažme použití klíčových slov této vlastnosti v následujícím příkladu.
Příklad horizontálního zarovnání v tabulce
|
Význam | Popis |
|
vlevo, odjet | Zarovná text buňky doleva. Toto je výchozí (pokud je směr textu zleva doprava). |
|
že jo | Zarovná text buňky doprava. Toto je výchozí (pokud je směr textu zprava doleva). |
|
centrum | Zarovná text buňky na střed. |
|
zdůvodnit | 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 použil je v pořadí na řádky tabulky. Hodnota v buňce odpovídá hodnotě vlastnosti zarovnání textu
Výsledek našeho příkladu:
Kromě vodorovného zarovnání můžete také definovat svislé zarovnání v buňkách tabulky pomocí vlastnosti svislé zarovnání.
Upozorňujeme, že při práci s buňkami tabulky se používají pouze následující hodnoty* této vlastnosti:
*
-Hodnoty sub, super, text-top, text-bottom, length a% použité na buňku tabulky se budou chovat, jako by používaly základní hodnotu.
Podívejme se na příklad použití:
Příklad svislého zarovnání v tabulce
|
Význam | Popis |
|
základní linie | Zarovná základní linii buňky se základní linií rodiče. Toto je výchozí nastavení. |
|
horní | Zarovná obsah buňky svisle nahoru. |
|
střední | Zarovná obsah buňky svisle uprostřed. |
|
dno | Zarovná obsah buňky svisle ke dnu. |
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 v pořadí na řádky tabulky. Hodnota v buňce odpovídá hodnotě vlastnosti svislého zarovnání, která byla použita na daný řádek.
Algoritmus pro umístění rozložení tabulky prohlížečem
CSS používá ve výchozím nastavení algoritmus automatického rozložení tabulky v prohlížeči. V tomto případě šířka sloupce je nastavena nejširším neporušeným obsahem buňky... Tento algoritmus může být v některých případech pomalý, protože prohlížeč musí před určením konečného rozložení přečíst veškerý obsah v tabulce.
Chcete -li změnit typ rozložení tabulky prohlížečem pomocí automatický na pevný, musíte použít vlastnost CSS rozložení tabulky nastavenou na fixní.
V tomto případě závisí horizontální umístění pouze na ze šířky tabulky a šířky sloupců, a nikoli z obsahu buněk. Prohlížeč začne zobrazovat tabulku ihned po přijetí prvního řádku. V důsledku toho vám pevný algoritmus umožňuje vytvořit rozložení takové tabulky rychleji než pomocí automatické verze. Při práci s velkými tabulkami můžete ke zlepšení výkonu použít pevný algoritmus.
Podívejme se na aplikaci této vlastnosti s následujícím příkladem:
Příklad použití vlastnosti table-layout
rozložení tabulky: auto;
| název |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Pšenice |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
rozlož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:
Styling řádků a sloupců tabulky
Již jsme se částečně dotkli metod stylingu řá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 střídat styly řádků v tabulkách pomocí hodnot dokonce (upřímný) a zvláštní (zvláštní) nebo elementárním matematický vzorec.
Zopakujme si předchozí techniky a prozkoumejme nové způsoby, jak stylovat řádky a sloupce v tabulkách. Přejděme k příkladům.
Příklad použití: n-podřízené pseudotřídy 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 se podíváme na možnosti stylingu řá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:
- Nastavte šířku tabulky na 100% šířky nadřazeného prvku, buňky záhlaví a dat nastavte na 1px plné ohraničení.
- Nainstalováno pro položku („Zápatí“ tabulky) barva pozadí - korál pro prvek („Záhlaví“ tabulky) nastavte barvu pozadí stříbrný.
- Pro položky
které jsou uvnitř prvku (tělo tabulky) nastavit změnu barvy pozadí při vznášení (pseudo třída: hover) c bílý podle barvy khaki(celý řádek je zvýrazněn).
Výsledek našeho příkladu: Rýže. 153 Příklad stylingu řádků v tabulkách Následující příklad ukazuje, jak použít zaokrouhlení rohů na buňky tabulky (vlastnost).
Příklad zaoblení rohů buňky
V tomto příkladu:
- Vycentrujte tabulku pomocí výplní, nastavte šířku a výšku buněk záhlaví na 50 pixelů průhledný ohraničení 5 pixelů.
- Zjistilo se, že když se vznášíte (pseudo-class: hover) nad buňkou záhlaví, získá pozadí modrý barvy, oranžový barva textu, ohraničení oranžový barvy 5 pixelů a poloměr 100%.
- Průhledné ohraničení je nutné, aby byl rezervován prostor pro hranici, která se zobrazí při vznášení, pokud se tak nestane, tabulka „skočí“.
Výsledek našeho příkladu:
Následující příklad se dotýká použití prvků HTML a a jejich styl.
Příklad zvýraznění sloupců tabulky
|
Číslo žádosti | 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 | Škádlení |
1 500 |
1 500 |
|
5 | Čtení |
3 000 |
3 000 |
V tomto příkladu:
Výsledek našeho příkladu:
No a poslední příklad, který je docela obtížně pochopitelný a vyžaduje pokročilé znalosti v CSS, protože se dotýká budoucích témat plánovaných pro podrobné studium v rámci tohoto kurzu.
V předchozím příkladu jsme si uvědomili, že prvek HTML můžete použít pouze jednu vlastnost CSS, barvu pozadí, ale nemůžete přímo nastavit barvu pozadí při přechodu (pseudotřída: hover) na tento prvek. 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 vznášení
|
Číslo žádosti | 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 | Škádlení |
1 500 |
1 500 |
|
5 | Čtení |
3 000 |
3 000 |
V tomto příkladu:
- Nastavili jsme naši tabulku, aby zabírala 100% nadřazeného prvku, buňky tabulky zabíraly 25% nadřazeného prvku a měly 1pixelové zelené plné ohraničení, záhlaví a datové buňky byly vysoké 45px. Odstranili jsme mezeru mezi buňkami pomocí vlastnosti border-collapse s hodnotou
.
- A tak pomocí pseudoprvku :: after přidejte obsah po každém prvku.
při vznášení. Pseudoprvek :: after se nutně používá ve spojení s vlastností content, díky které vložíme blokový prvek, který má barvu pozadí lesní zeleň a má absolutní polohování.
- Absolutní umístění zde je nutné k odsazení prvku vzhledem k zadanému okraji jeho předka, zatímco předchůdce musí mít jinou hodnotu polohy než výchozí statickou hodnotu, jinak bude počet z tohoto důvodu relativní k zadanému okraji okna prohlížeče. připravili jsme pro stůl relativní umístění(relativní).
- Pro náš generovaný blok nastavíme vlastnost top, která udává směr odsazení umístěného prvku od horního okraje, a vlastnost bottom, která udává směr odsazení umístěného prvku od spodního okraje. U obou vlastností byla zadána hodnota 0, takže blok zcela obsadí prvek ze spodní a horní části tabulky, šířka tohoto bloku byla nastavena na 25%, tato hodnota odpovídá šířce samotné buňky.
- A konečná vlastnost, kterou jsme pro tento blok nastavili: z-index s hodnotou „-1“ určuje pořadí umístěných prvků podle Osa Z.... Tato vlastnost je nezbytná k tomu, aby byl text před tímto blokem, a ne za ním, pokud nenastavíte hodnotu menší než nula, pak blok text zavře.
Výsledek našeho příkladu:
Pokud v této fázi studie nerozumíte procesu umísťování prvků, pak se nenechte odradit, toto je obtížně pochopitelné téma, které jsme také nezohlednili, ale určitě se jím budeme zabývat v dalším článku návod „Umístění prvků v CSS“.
Otázky a úkoly k tématu
Dokončete cvičnou aktivitu, než přejdete na další téma:
 Pokud máte potíže s dokončením cvičení, můžete vždy otevřít příklad v samostatném okně a zkontrolovat stránku a zjistit, jaký CSS byl použit.
2016-2020 Denis Bolshakov, můžete posílat své připomínky a návrhy k práci na webu na [email protected]
| |
|
| |
