Barva řádku tabulky CSS. Poznámka: záporný offset

Příznaky těhotenství po implantaci embrya

Pomocí atributu BGCOLOR můžete změnit barvu obsahu buňky, řádku, skupiny sloupců, skupiny řádků nebo celé tabulky.

Barvu lze určit buď názvem barvy nebo hexadecimální hodnotu barevný kód se znakem #.

Příklad:

HTML kód:


Displej prohlížeče:


1 2
3 4

Grafické pozadí tabulky html stránky

Pomocí atributu BACKGROUND můžete nastavit grafické pozadí buňky nebo celé tabulky. Pokud je obrázek větší než buňka nebo tabulka, pro kterou je určen, prohlížeč obrázek ořízne, aby se vešel do příslušného objektu.

Příklad:

mají mnoho atributů, které musí být specifikovány, aby naše tabulka měla rám, pozadí, rozměry atd.

Nejprve se podíváme na atributy, které jsou značkám vlastní

HTML kód:


11111 22222 33333 44444

Displej prohlížeče:


11111 22222
33333 44444

Zarovnání dat v tabulce stránek html

Atributy ALIGN a VALIGN se používají k zarovnání dat v tabulce.

Atribut ALIGN je pro horizontální zarovnání. Ve výchozím nastavení je obsah záhlaví vystředěn a obsah buňky je zarovnán doleva.

Atribut VALIGN zarovnává data vertikálně. Ve výchozím nastavení jsou informace zarovnány na střed. Nástroje pro zarovnání lze použít v jedné buňce, řádku, skupině sloupců nebo skupině řádků. Atribut zarovnání v buňkách tabulky má nejvyšší prioritu.

Pokud omezíte vzdálenost mezi obsahem buňky a jejími okraji pomocí atributu CELLPADDING, ovlivní to výsledek zarovnání. Například s CELLPADDING=3 a ALIGN="top" budou data umístěna tři pixely od horního okraje buňky.

Příklad:

který je zodpovědný za vytváření řetězců a tagů, zodpovědný za tvorbu buněk.

Abychom viděli, jak vše funguje v praxi, vytvoříme tabulku sestávající ze dvou řádků a čtyř buněk. Kód pro naši tabulku bude následující:

HTML kód:


1111
2222		 22222 Spodní buňka Spodní buňka

Displej prohlížeče:


1111
2222 		22222
Spodní buňka Spodní buňka

Změna velikosti tabulky stránek HTML

Šířka tabulky je určena atributem WIDTH. Hodnotu lze zadat jak v absolutních jednotkách (WIDTH=250), tak v relativních jednotkách (WIDTH="80%"). Například nastavením šířky na 600 pixelů si můžete být jisti, že se tabulka vejde do okna prohlížeče při jakémkoli rozlišení monitoru.

Totéž lze provést s výškou tabulky pomocí atributu HEIGHT.

Při nastavení šířky a výšky tabulky na příliš malé hodnoty určí prohlížeč minimální hodnoty, které umožňují normální zobrazení dat.

Vše výše uvedené platí pro buňky tabulky. V tomto případě není vůbec nutné uvádět rozměry každé jednotlivé buňky. Když změníte šířku buňky, všechny sousední buňky ve sloupci se zobrazí na základě nové hodnoty. Totéž platí pro výšku buňky.

Dobrý den, milí čtenáři tohoto blogu. Rozhodl jsem se napsat krátký příspěvek na téma využití CSS pro zlepšení zážitku návštěvníků stránek.

Z ničeho nic mě napadla myšlenka, že pokud položky v pravém menu mého blogu oživte to střídáním barev pozadí(udělejte různé barvy pro sudé a liché čáry), může to zlepšit použitelnost. Zde vkládám své naděje do pohodlí vnímání velkého množství informací, když jsou rozděleny do bloků (jak se to děje například při použití odstavců v textu).

Tato praxe se velmi často používá při stylování tabulek, kdy chtějí zvýšit viditelnost informací v nich zobrazených. Při hledání řešení se ukázalo, že tento problém lze vyřešit zcela jednoduše pomocí samotného CSS.

Není potřeba označovat sudé a liché prvky seznamu třídami ( pravé menu Funguje to na mém základě). Stačí přidat pár řádků kódu pomocí pseudotřídy n-tého potomka v souboru CSS, který je zodpovědný za styling stránek. N-té dítě má však i spoustu dalších využití, které také neopomenu v příspěvku zmínit.

Možnosti pseudotřídy n-tého dítěte a její použití na webu

Vlastně po oznámení pseudotřídy n-té dítě bych mohl příspěvek ukončit, protože si o něm můžete vygooglit spoustu informací. Ale toto není naše cesta, takže budeme pokračovat. Nejprve tedy popíšu své kroky, jak změnit správné menu na „pruhované“. Stačilo zjistit pomocí vývojářských nástrojů zabudovaných v prohlížečích (volaných z kontextové nabídky požadovaného prvku na webové stránce výběrem položky jako „Zobrazit kód prvku“), kde se v souboru stylu zobrazí vzhled řádků tohoto seznam je nastaven.

Princip práce s vývojářskými nástroji je podobný tomu, co jsem popsal v článku o . Klikněte pravým tlačítkem na libovolnou položku v levé nabídce mého blogu a podívejte se na výsledný přehled na panelu, který se otevře:

Vlevo uvidíte Html kód tohoto prvku (nás zajímá prvek s LI tagy - řádek seznamu) a v pravém sloupci jsou CSS pravidla, která prohlížeč používá k jeho stylizaci. Okamžitě zjistíte, kde se soubor stylu nachází, najetím kurzoru myši na jeho název.

V mém případě se bude jednat o soubor, který lze otevřít připojením k webu přes FTP a následnou cestou (nedoporučoval bych upravovat soubory šablon z administrační oblasti WordPressu, protože neexistuje způsob, jak udělat krok zpět, jak je to například možné).

/wp-content/themes

Vlastně na panelu nástrojů pro vývojáře v oblasti CSS styly dokonce najdete v souboru stylu řádek, kde je zapsáno požadované pravidlo. V mém případě je to 281 řádků. Proto po otevření style.css v poznámkovém bloku (mám ho přiřazený jako výchozí editor pro všechny soubory, které se objevují v enginu webu), jsem se okamžitě přesunul na tento řádek.

A hned pod něj jsem přidal několik dalších pravidel s (toto pravidlo je zodpovědné za změnu barvy pozadí pravého pruhu nabídky, když je kurzor myši přímo nad ním - díky tomu je nabídka „živější“ nebo tak něco) a s n-tým -dětská pseudotřída zmíněná výše. Pokud jsme již mluvili o hovver (viz odkaz výše), pak budeme hovořit o n-tém dítěti. Pokud jste si všimli, že parametr 2n je u této pseudotřídy zapsán v závorkách.

N-té dítě (2n)

V obecný pohled hodnotu tohoto pseudotřídního n-tého dítěte je dáno pomocí výrazu: an+b, kde a a b jsou celá čísla a n je čítač, který nabývá celočíselné hodnoty od 0 a více: 0,1,2,3... V našem případě při změně čítače n dostaneme čísla 0 , 2, 4, 6 atd. To znamená, že vlastnost zadaná pro tuto pseudotřídu (v našem případě je to pravidlo pro nastavení pozadí řádku seznamu pomocí ) je v seznamu na #E4F2FA.

Tato šestnáctková soustava je nejběžnější. K nalezení vhodných barev jsem použil program Contrast Analyzer 2.0 popsaný v uvedeném odkazu. Umožňuje vám zachytit barvu z obrazovky a sladit její světlejší tóny, což je přesně to, co jsem udělal.

Pro pozadí nabídkové lišty jsem při najetí kurzorem myši (pseudotřída hover) zvolil ještě světlejší odstín ze stejné řady.

Další příklady použití n-tého dítěte

Pokud chcete změnit pozadí nebo jinak ovlivnit vzhled (například přidat výplň, zvětšit písmo nebo udělat něco jiného neslušnějšího), použijte výraz. Můžete zkontrolovat, že dosazením celých čísel od nuly za n získáte ve výsledku pouze lichá čísla. Můžete použít obě možnosti najednou (pro sudé a liché řádky seznamů, tabulek nebo čehokoli jiného).

Více několik příkladů použití n-tého dítěte pro zvýraznění různých řádků seznamů, tabulek a podobných prvků:

  1. Chcete-li zesměšňovat liché prvky, můžete použít n-té dítě (liché) místo výrazu uvedeného výše a n-té dítě (sudé) pro sudé prvky.
  2. Co když chcete změnit pouze čtvrtý řádek? pak přidejte do pravidla CSS pseudotřídu n-tého potomka (4) oddělenou dvojtečkou.
  3. Chcete změnit vzhled linek počínaje devátou? Žádný problém - n-té dítě (n+9).
  4. Pokud naopak chcete vybrat pouze prvních devět prvků, použijte konstrukci n-tého potomka (-n+9).
  5. Pokud chcete vybrat prvky od devátého do osmnáctého, přidejte složenou pseudotřídu:n-té-dítě (n+9):nté-dítě (-n+18). Čistá logika.
  6. Chcete udělat to samé jako v předchozím odstavci, ale zvýraznit pouze sudé řádky v tomto rozsahu? Žádný problém - :n-té-dítě (n+9):nté-dítě (-n+18):nté-dítě (sudé).

No, tam to je. Ta věc by se mohla ukázat jako docela užitečná. V každém případě mi to bylo užitečné.

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás to zajímat

Selektory pseudotříd a pseudoprvků v CSS (hover, first-child, first-line a další), vztahy mezi HTML tagy kód
Display (block, none, inline) in CSS – nastavte typ zobrazení Html prvků na webové stránce
Vlastnosti CSS text-decoration, vertical-align, text-align, text-indent pro zdobení textu v Html
Styl seznamu (typ, obrázek, pozice) - Pravidla CSS pro přizpůsobení vzhled seznamy v HTML kód
Jak najít a odstranit nepoužívané stylové řádky (extra selektory) v souboru CSS vašeho webu
Pozice (absolutní, relativní a pevná) – způsoby umístění prvků Html v CSS (pravidla vlevo, vpravo, nahoře a dole) Různá provedení pro vnitřní a externí odkazy přes CSS
Priority v Css a jejich zvýšení z důvodu Důležité, kombinace a seskupení selektorů, uživatelských a autorských stylů
Pravidla pro písmo (hmotnost, rodina, velikost, styl) a výška řádku pro stylování písem v CSS
Plovoucí a jasné v CSS - nástroje pro rozložení bloků
K čemu slouží CSS, jak propojit kaskádové styly s Html dokumentem a základní syntaxe tohoto jazyka
Tagy, class, Id a univerzální selektory, stejně jako selektory atributů v moderním CSS

- 4,7 z 5 na základě 6 hlasů

Při tvorbě webových stránek je často nutné znázornit část obsahu stránky ve formě tabulek.

Někdy se k vytvoření struktury stránky používají tabulky. Tento přístup není zcela správný, protože tabulky původně nebyly určeny k umístění prvků stránky.

Pro tento účel je nejlepší použít nástroje CSS. V některých případech jsou však tabulky pro poskytování informací nepostradatelné a vhodné.

Tag je zodpovědný za vytváření tabulek v HTML

a uzavírací značku
. Pravděpodobně už ale víte, že tabulky se skládají z řádků a buněk. Proto, abychom mohli vytvořit tabulku, potřebujeme další dva tagy: toto je tag
1 - buňka 2 - buňka
3 - buňka 4 - buňka

Chcete-li zjistit, co z toho vyplývá, vytvořte stránku HTML pomocí níže uvedeného kódu. Pokud nevíte, jak vytvořit HTML stránku, podívejte se na lekci.

Stůl

1 - buňka 2 - buňka
3 - buňka 4 - buňka

Měli byste získat následující:

Jak vidíte, náš stůl zatím vůbec nevypadá jako stůl. To vše kvůli našim značkám

A
. Abyste viděli, jak se naše tabulka změní, můžete tyto atributy přidat do značek
a po obnovení stránky uvidíte, jak bude tabulka vypadat v prohlížeči. Pro usnadnění neposkytnu celý kód stránky, ale pouze kód související se značkou tedy co změníme.

A tak tagujte

má následující atributy:

border - nastavuje šířku okraje tabulky v pixelech, zapisuje se takto:

.

bordercolor – barva ohraničení tabulky tento atribut není podporován všemi prohlížeči, takže nemusíte vidět zadanou barvu ohraničení:

Šířku rámce nastavíme na 2 pixely, modrá, tabulka bude vypadat takto:

šířka – nastavuje šířku tabulky v pixelech nebo procentech:

výška – výška tabulky v pixelech nebo procentech:

Šířka tabulky bude 250 pixelů a výška 150 pixelů, tabulka bude vypadat takto:

zarovnat – zarovnání tabulky;

align=left – tabulka bude zarovnána doleva;

align=right – tabulka bude zarovnána doprava:

Náš stůl by měl být správně zarovnán.

bgcolor – barva pozadí tabulky, bgcolor=#FFC000 – barva pozadí tabulky bude žlutá:

Tabulka bude vypadat takto:

pozadí – pomocí tohoto atributu můžete určit obrázek, který bude sloužit jako pozadí tabulky.

Jako příklad uložte malý obrázek, který vidíte v závorkách () do složky, kde máte stránku s tabulkou, a do značky

přidejte background="fon.gif" celý kód:

Tabulka bude vypadat takto:

cellpadding – atribut, který určuje odsazení vlevo, vpravo, nahoře a dole uvnitř buňky. Například pokud do našeho tagu

přidat cellpadding=10, pak bude text napsaný uvnitř buněk odsazen.

cellspacing – nastavuje mezeru mezi buňkami tabulky.

Pokud se podíváte blíže na naši tabulku, uvidíte, že mezi rámečky buněk je malá mezera, toto je odsazení mezi buňkami, je to nastaveno standardně. K jeho odstranění stačí ve štítku

nastavit rozmístění buněk=0. Celý kód:

V důsledku toho byly naše buňky přitisknuty k sobě a text uvnitř buněk byl odsazen:

hspace - nastavuje mezeru od tabulky doleva a doprava v pixelech, zapsaná takto: hspace=20

nowrap – zakazuje zalamování slov v buňce, jednoduše napsáno nowrap

Poslední dva atributy se používají extrémně zřídka, takže s nimi neukazuji příklad kódu.

Nyní se podíváme na atributy značek

, některé z nich jsou stejné jako atributy značek

šířka - šířka buňky v pixelech nebo procentech.

výška – výška buňky v pixelech nebo procentech.

Nastavíme například šířku první buňky prvního řádku na 30 % - width=30 % a výšku první buňky druhého řádku na 100 pixelů. Kód bude vypadat takto:

1 - buňka 2 - buňka
3 - buňka 4 - buňka

Všimněte si, že stačí nastavit výšku nebo šířku jedné buňky a všechny buňky v tomto řádku nebo sloupci budou mít stejnou velikost. Pokud tedy potřebujete nastavit např. určitou výšku buněk, pak stačí zadat tento parametr pro jednu buňku a všechny ostatní buňky v řádku se stanou stejnými.

zarovnat – zarovná obsah buněk, má následující hodnoty:

align="lef" – obsah buňky bude zarovnán doleva;

align="right" – obsah bude zarovnán doprava;

align="center" – obsah bude zarovnán na střed buňky.

Přidejme tyto atributy a hodnoty do našeho kódu a zarovnáme obsah 1. buňky doleva (obsah je standardně zarovnán doleva, ale v některých případech je tento atribut nezbytný), obsah 2. buňky je zarovnáno vpravo a 4. uprostřed.

1 - buňka 2 - buňka
3 - buňka 4 - buňka

bgcolor – pomocí tohoto atributu lze nastavit barvu buňky.

pozadí – nastaví obrázek jako pozadí buňky.

S těmito atributy jsme se již setkali při zvažování atributů značek

. Fungují stejně, pouze v tomto případě nastavují pozadí buňky. Nastavíme například barvu pozadí 2. buňky na žlutou a jako pozadí 4. buňky nastavíme následující obrázek ().

K tomu přidáme do našeho kódu potřebné atributy, pro naše buňky bgcolor="#FFFF00" pro 2. buňku a background="fon.jpg" pro 4. buňku. Ve výsledku bude naše tabulka vypadat takto:

Jak vidíte, přesto, že nastavujeme pozadí samotné tabulky, pokud nastavíme pozadí buněk tabulky, tak se zobrazí přesně to pozadí, které jsme buňkám nastavili.

bordercolor – nastavuje barvu ohraničení buňky.

S tímto atributem jsme se také setkali při zvažování atributů tagů

. Upozorňujeme, že nefunguje ve všech prohlížečích. Vezměte prosím na vědomí, že značka . V praxi existují případy, kdy je nutné 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 tabulky

Do tabulky můžete přidat název pomocí značky

Neexistuje žádný atribut border označující ohraničení buňky. Nastavíme barvu ohraničení 2. buňky na červenou, přidáme do druhé buňky atribut bordercolor="#FF0000".

Existuje další atribut určený k zarovnání obsahu buněk:

valign – zarovná obsah buněk vertikálně.

Má následující významy:

valign="top" – zarovnat obsah buňky k hornímu okraji;

valign="bottom" – zarovná obsah buňky ke spodnímu okraji;

valign="middle" – zarovnání na střed buňky;

valign="baseline" – zarovná obsah buňky podél základní linie.

Přidejme tyto atributy do každé z našich 4 buněk.

1 - buňka 2 - buňka
3 - buňka 4 - buňka

Naše tabulka bude vypadat takto:

Poslední věcí, kterou musíme v tomto tutoriálu probrat, je sloučení buněk tabulky. Aby bylo možné sloučit několik buněk za sebou, existuje atribut colspan="" kde je počet buněk, které je třeba sloučit, uveden v uvozovkách.

Od autora: CSS má selektory pro vyhledání prvků na základě jejich pozice ve stromu dokumentu. Říká se jim indexové pseudotřídy, protože sledují pozici prvku spíše než jeho typ, atributy nebo ID. Je jich celkem pět.

:první dítě a :poslední dítě

Jak můžete uhodnout z názvu, pseudotřídy :first-child a :last-child vybírají první a poslední potomek v uzlu (prvku). Stejně jako u jiných pseudotříd mají :first-child a :last-child minimální vedlejší účinky při použití jednoduchých selektorů.

Zvažte HTML a CSS níže:

:první dítě a:poslední dítě

Seznam ovoce

  • jablka
  • banány
  • Borůvky
  • Pomeranče
  • Jahody

< ! DOCTYPE html >

< html lang = "en-US" >

< head >

< meta charset = "utf-8" >

< title >: první - dítě a : poslední - dítě< / title >

< / head >

< body >

< h2 >Seznam ovoce< / h2 >

< ul >

< li >jablka< / li >

< li >banány< / li >

< li >Borůvky< / li >

< li >Pomeranče< / li >

< li >Jahody< / li >

< / ul >

< / body >

< / html >

Snímek obrazovky níže ukazuje výsledek.

Záhlaví h2 a první li jsou zbarveny růžově, protože:první dítě není vázáno na konkrétní prvky. Značka h2 je prvním potomkem značky body a li je prvním potomkem prvku ul. Ale proč jsou zbývající prvky li zelené? Protože:last-child také není vázán na konkrétní prvek a ul je poslední podřízený prvek ve značce body. Ve skutečnosti jsme ve stylech výše napsali *:první-dítě a *:poslední-dítě.

Přidáním jednoduchého selektoru k :first-child a :last-child je upřesníte. Omezme náš výběr pouze na položky seznamu. Nahraďte :first-child za li:first-child a :last-child za li:last-child. Snímek obrazovky níže ukazuje výsledek.

:nth-child() a :nth-last-child()

Umět vybrat první a poslední podřízený prvek v dokumentu není špatný nápad. Co když potřebujete vybrat sudé nebo liché prvky? Možná budeme muset vybrat šestý prvek ve stromu nebo použít styly na každý třetí podřízený prvek. Zde nám pomohou pseudotřídy:nth-child() a:nth-last-child().

Stejně jako :not, :nth-child() a :nth-last-child() jsou také funkční pseudotřídy. Berou jeden argument, který musí být:

klíčové slovo zvláštní;

klíčové slovo sudé;

celočíselnou hodnotu typu 2 nebo 8;

argument ve tvaru An+B, kde A je krok, B je posun a n je kladné celé číslo.

Poslední argument je o něco složitější než ostatní. Podíváme se na to trochu později.

Jaký je rozdíl mezi :nth-child() a :nth-last-child()? Liší se výchozím bodem: :nth-child() počítá dopředu a :nth-last-child() počítá dozadu. CSS indexy používají přirozená čísla a začínají na 1, nikoli na 0.

Pomocí pseudo-tříd:nth-child() a:nth-last-child() je vhodné vytvořit střídající se vzory. Pruhovaný stůl je ideálním případem použití. Níže uvedený CSS dává sudým řádkům v tabulce světle modrošedé pozadí, výsledek je vidět na obrázku níže:

tr:nth-child(sudé) ( pozadí: rgba(96, 125, 139, 0,1); )

tr : n-té dítě (sudé) (

pozadí: rgba(96, 125, 139, 0,1);

Pokud přepnete z:nth-child na:nth-last-child, sloupce se obrátí, protože počítání začíná odspodu. Viz snímek obrazovky níže.

Chcete něco složitějšího, se složitějšími argumenty? Vytvořme dokument s 20 prvky, jak je znázorněno níže.

Pomocí :nth-child() a :nth-last-child() můžete vybrat jeden konkrétní prvek. Můžete vybrat všechny podřízené prvky za danou pozicí nebo můžete vybrat prvky s násobkem odsazení. Změňme pozadí šestého prvku:

Item:nth-child(6) ( background: #e91e63; )

Ještě jednou, A je krok. Toto je faktor pro n začínající na 1. To znamená, že pokud A = 3, pak 3n vybere třetí, šestý a devátý prvek a tak dále. To je přesně to, co je vidět na snímku obrazovky níže.

Zde je vše trochu zajímavější. Pomocí :nth-child() a :nth-last-child() můžete vybrat všechny prvky po daný bod. Vyberme všechny prvky kromě prvních sedmi:

Item:nth-child(n+8) ( background: #e91e63; )

Položka : n-té dítě (n + 8) (

pozadí : #e91e63;

Není zde specifikován žádný krok. Výsledkem je, že n+8 vybere všechny prvky n, počínaje osmým. Viz snímek obrazovky níže.

Poznámka: záporný offset

Záporné hodnoty a rozsahy jsou také platné. Záznam jako:nth-child(-n+8) obrátí výběr a vybere prvních osm prvků.

Pomocí offsetu a kroku můžete vybrat každý třetí prvek, počínaje pátým:

Item:n-th-child(3n+5) ( background: #e91e63; )

Položka : n-té dítě (3n + 5) (

pozadí : #e91e63;

Výsledek.

Jedináček

Pseudotřída jediného potomka vybere prvek pouze v případě, že se jedná o jediný podřízený prvek. Níže jsou dvě seznam s odrážkami. První má jeden prvek, druhý má tři:

  • Jablko
  • oranžový
  • Banán
  • Malina

< ul >

< li >Jablko< / li >

< / ul >

< ul >

< li >oranžový< / li >

< li >Banán< / li >

< li >Malina< / li >

< / ul >

Volič li:only-child(color: #9c27b0;) vybere

  • Jablko
    • , protože je jediným potomkem prvního seznamu. Prvky druhého seznamu nejsou zahrnuty do výběru, protože existují tři sousední prvky. Výsledek je uveden níže.

    :prázdný

    Pseudotřídu :empty můžete použít k výběru prvků, které nemají žádné potomky. Pseudotřída:empty mluví sama za sebe (prázdné z anglického „empty“). Aby byl prvek zahrnut do výběru:empty, musí být zcela prázdný, dokonce ani mezery. To znamená, že se dostane do vzorku, ale ne.

    Někdy WYSIWYG editory vloží do vašeho obsahu prázdné p tagy. Chcete-li zabránit použití stylů na tyto prvky, můžete použít :empty a :not. Například p:not(:empty).

    Výběr prvků určitého typu podle jejich indexu

    Pseudotřídy popsané v předchozí části vybírají prvky, pokud zaujímají určitou pozici ve stromu dokumentu. Například p:nth-last-child(2) vybere všechny p tagy před posledním v rodičovském bloku.

    V této části budeme hovořit o typovaných indexových pseudotřídách. Tyto pseudotřídy také vybírají prvky podle hodnoty indexu, ale výběr je omezen na konkrétní typ. Například musíte vybrat pátý tag p nebo dokonce tagy h2.

    Existuje pět takových pseudotříd, jejichž jména jsou přesným opakem jejich netypových protějšků:

    n-tý poslední typ()

    Mezi nimi a podřízenými indexovými pseudotřídami je tenká čára. Záznam p:nth-child(5) najde pouze pátý tag p, zatímco záznam p:nth-of-type(5) najde všechny tagy p a vybere pátý.

    Vytvoříme další dokument. Má také 20 prvků, pouze některé jsou p tagy a jiné jsou divs. p tagy se zaoblenými rohy, viz snímek obrazovky níže.

    Specifikace CSS dává neomezené možnosti pro navrhování tabulek. Ve výchozím nastavení nemají buňky tabulky a tabulky žádné viditelné okraje ani pozadí a buňky v tabulce spolu nesousedí.

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

    Formátování tabulek

    1. Hranice tabulky

    Ve výchozím nastavení se tabulka a buňky v ní v prohlížeči zobrazují bez viditelných okrajů. Hranice stolu jsou specifikovány vlastností border:

    Tabulka ( border-collapse: sbalit; /*odstranit prázdná místa mezi buňkami*/ border: 1px plná šedá; /*nastavit vnější okraj tabulky na šedou barvu o tloušťce 1px*/ )

    Ohraničení buňky záhlaví každý sloupec je určen 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á barva;)

    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 můžete zvýraznit zvětšením šířky:

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

    Hranice lze nastavit částečně:

    /* nastavit šedý vnější okraj o tloušťce 3px pro tabulku */ tabulka (border-top: 3px plná šedá; ) /* nastavit šedý okraj o tloušťce 1px pro buňku těla tabulky */ td (border-bottom: 1px solid šedá;)

    Přečtěte si více o hraniční majetek umíš číst.

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

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

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

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

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

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

    		A . 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 jsou průhledné. Pokud má stránka nebo blok obsahující tabulku pozadí, zobrazí se v tabulce. Pokud je pozadí určeno pro tabulku i buňky, pak v místech, kde se pozadí tabulky a buněk překrývá, bude viditelné pouze pozadí buněk. Pozadí tabulky jako celku a jejích buněk může být:
    plnicí,
    ,
    .

    4. Sloupce tabulky

    Model tabulky CSS je zaměřen především na řádky (řádky) tvořené pomocí značky

    a pomocí vlastnosti caption-side jej lze umístit před nebo pod tabulku. Chcete-li vodorovně zarovnat text nadpisu, použijte vlastnost zarovnání textu. Zděděno.

    ...
    Tabulka č. 1
    Společnost Q1 Q2 Q3 Q4
    titulek (strana titulku: dole; zarovnání textu: vpravo; odsazení: 10px 0; velikost písma: 14px; ) Rýže. 2. Příklad zobrazení záhlaví pod tabulkou

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

    Ve výchozím nastavení jsou rámečky buněk tabulky 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 oddělenými rámečky buněk

    7. Jak zvětšit prostor mezi rámečky buněk

    Pomocí vlastnosti border-spacing můžete změnit vzdálenost mezi rámečky 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 pomocí vlastnosti table-layout

    Rozvržení tabulky je určeno jedním ze dvou přístupů: pevným rozložením nebo automatickým rozložením. V tomto případě rozložení odkazuje na to, jak je šířka tabulky rozdělena mezi šířky 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, ve kterých se text čte vodorovně. Každá entita je samostatný řádek. Tabulkám, jako je tato, můžete dát minimalistický vzhled umístěním dvoupixelového ohraničení pod záhlaví.

    ZaměstnanecPlatBonusDozorce
    Stephen C. Cox$300$50Bobe
    Josephine Tan$150-Annie
    Joyce Ming$200$35Andy
    James A. Pentel$175$25Annie
    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;)

    Pokud existuje velký počet řádků, tento návrh tabulky ztěžuje jejich čtení. 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; )/*zbytek kódu je jako v příkladu výše*/

    Přidání efektu :hover k prvku tr usnadní čtení tabulek navržených v minimalistickém stylu. Když najedete myší na buňku, zbývající buňky ve stejném řádku se současně zvýrazní, 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 užitečné pro kategorizaci nebo porovnávání popisů objektů reprezentovaných sloupcem. Můžete je navrhnout v minimalistickém 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: 30px plný #fff barva: #669;

    3. „Boxový“ styl

    Nejspolehlivějším stylem pro navrhování 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 ohraničení 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; 1px solid transparentní;

    Nejtěžší je najít barevné schéma, které se bude harmonicky kombinovat s vaším webem. Pokud je web náročný na grafiku a design, bude pro vás použití tohoto stylu docela 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: 7px solid #9baff1; font-weight: normal background: #e8edff border- left: 1px; solid #9baff1; barva: #039; padding: 8px; td (pozadí: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px ; )

    4. Horizontální zebra

    Stůl zebra vypadá docela atraktivně a pohodlně. Další barva pozadí může sloužit jako vizuální vodítko pro lidi při č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ý styl novin může vypadat takto: pohrajte si s barevným schématem, přidejte ohraničení, výplň, různá pozadí a efekt vznášení při najetí na čáru.

    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 okraj-levý: 1px solid #0865c2: 1px solid #fff;

    6. Pozadí tabulky

    Pokud hledáte rychlý a jedinečný způsob, jak navrhnout stůl, vyberte atraktivní obrázek nebo fotografii, která souvisí 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é pozadí: rgba(51, 51, 153, .2);

    Publikace na dané téma