Buňka tabulky css. Pole uvnitř buněk. Vzdálenost mezi buňkami

Bez stylů vypadá náš stůl velmi jednoduše a nenápadně:

Obrázek 1. Zobrazení tabulky bez stylů.

Pojďme přidat styly, aby to bylo krásnější:

Řeka	Délka (km)	povodí
Amazonka	6992	6915000
Nil	6852	3349000
Jang-c'-ťiang	5800	1800000

Nyní naše tabulka vypadá takto:

Obrázek 2. Pohled na tabulku se styly.

V tomto stylu musíte věnovat pozornost pravidlu:

/* Nastaví zvýraznění řádku při najetí kurzorem */ tr+tr:hover( background-color: #e6e3da; )

K tomu se používá selektor sousedního prvku (znaménko plus) a pseudotřída :hover, která definuje styl prvku při najetí na něj.

Při najetí myší nemusíme měnit barvu pozadí záhlaví tabulky, že? Musíme změnit barvu pozadí pro všechny řádky kromě prvního.

Sousední selektor tr+tr se použije na všechny řádky kromě prvního. Přečtěte si více o sousedních selektorech zde. A pseudotřída :hover označuje, že styl z pravidla CSS by měl být aplikován pouze při najetí kurzorem.

Nyní máme velmi reálný příklad tabulky. Jen mějte na paměti, že na stránce může být několik tabulek a ne všechny musí mít tento styl. Aby styl fungoval pouze na jedné tabulce, přiřadíme mu třídu, čti CSS třídy.

V níže uvedeném příkladu je komentář pouze pro přidaný kód.

Řeka	Délka (km)	povodí
Amazonka	6992	6915000
Nil	6852	3349000
Jang-c'-ťiang	5800	1800000

Na tom, jak tento příklad funguje, se nic nezměnilo, ale nemělo by se to změnit. Stačí, když si nyní uložíte tento příklad do svého počítače a v příkladu přidáte druhou tabulku, například zkopírujte stávající kód tabulky, ale odstraňte třídu ="river", ale styl se použije pouze na tabulku s třídou nainstalováno. Toto jsou jednoduché základy CSS.

Druhý příklad

Nyní nastavíme následující úkol: musíme zvýraznit první sloupec světle šedou barvou.

K vyřešení tohoto problému použijeme pseudotřídu :first-child. Pomocí této pseudotřídy můžete přistupovat k prvním buňkám každého řádku.

Název:	Zvedák
Příjmení:	Londýn

Toto je velmi jednoduchý příklad. Pro přístup k těmto prvkům použijte podřízené selektory.

V našem kódu je značka předek a má předka

, to znamená, že podřízený selektor by měl vypadat takto:

Název:	Zvedák
Příjmení:	Londýn

A teď vidíme, že náš styl nefunguje. Proč? Ostatně volič je na první pohled specifikován správně. Jde o to, že po značce

vždy je tam značka . Je tam, i když to není napsané v kódu. Proto bude kód fungovat:

Název:	Zvedák
Příjmení:	Londýn

Při práci s tabulkami tento bod určitě musíte znát.

Nyní je tu ještě jeden bod, který sice s tabulkami přímo nesouvisí, ale při práci s nimi mohou často nastat podobné otázky. Podívejme se na to pomocí tohoto kódu jako příkladu. Například chceme nastavit barvu pozadí buněk posledního řádku na červenou. K tomu použijeme třídu (class ="my-td").

Název:	Zvedák
Příjmení:	Londýn

V důsledku toho třída pracovala ve druhé buňce („Londýn“), ale nefungovala v první buňce, pro kterou fungoval selektor tabulka > tbody > tr > td:první dítě.

Proč se to tak stalo?

Protože volič tabulka > tbody > tr > td:první dítě má větší „váhu“ (významnost) pro CSS, protože je to konkrétnější.

Jak to opravit?

K definování třídy můžete použít konkrétnější selektor: table > tbody> tr > td.my-td .

Můžete použít pravidlo !důležité. Toto pravidlo zvyšuje prioritu stylu; použití tohoto pravidla je považováno za extrémní případ.

Název:	Zvedák
Příjmení:	Londýn

V tomto případě můžete místo tříd použít identifikátory id, jejich priorita je vyšší a styl se provede.

Každý prohlížeč má své priority, nikde jsem nečetl o nějakém striktním standardu. Ale existují obecná pravidla:

1. čím konkrétnější je volič, tím větší je jeho hmotnost;
2. id je důležitější než třída.

Toto téma samozřejmě přímo nesouvisí s tabulkami HTML, právě jsme se podívali na příklad priority selektoru pomocí tabulek.

Ale pokud jde o CSS, měli byste si uvědomit, že CSS nefunguje dobře při výběru buněk tabulky (tag ). Je lepší přiřadit třídu k řetězci (tag ) a poté pomocí selektoru s pseudotřídou td:nth-child(n) určete požadovanou buňku.

A v tomto článku budu mluvit o jejich návrhu pomocí CSS. Kaskádové styly používají k formátování tabulek následující vlastnosti:

šířka a výška

Nastavte šířku a výšku stolu. Bez těchto vlastností se parametry určují automaticky a závisí na obsahu nádoby

. Hodnoty jsou nastaveny na libovolné jednotky délky CSS, ale často se používají pixely ( px) a zájem ( % ). Druhý nastavuje šířku vzhledem k rodičovskému prvku, zatímco první nastavuje absolutní hodnotu.

Tabulka (šířka: 450 pixelů; výška: 80 %;)

titulková strana

Určuje, kam bude umístěno záhlaví tabulky popsané tagem

, takže když bylo nutné ponechat buňku bez obsahu, ale zobrazit barvu pozadí, byla uvnitř buňky přidána neoddělená mezera (). Prostor není vždy vhodný, zvláště když potřebujete nastavit výšku buňky na 1-2 pixely, a proto se rozšířila jednopixelová průhledná grafika. Takový obrázek lze skutečně změnit podle vašeho uvážení, ale na webové stránce se nijak nezobrazuje.

Éra jednopixelových kreseb a na nich založených všemožných spacerů naštěstí pominula. Prohlížeče celkem korektně pracují s tabulkami i bez přítomnosti obsahu buněk.

Chcete-li řídit vzhled prázdných buněk, použijte vlastnost empty-cells, když je nastaveno skrýt, ohraničení a pozadí se v prázdných buňkách nezobrazují. Pokud jsou všechny buňky v řádku prázdné, je celý řádek skrytý. Buňka je považována za prázdnou v následujících případech:

• neexistují vůbec žádné symboly;
• buňka obsahuje pouze nový řádek, tabulátor nebo mezeru;
• viditelnost je nastavena na skryté .

Přidání nepřerušitelné mezery je vnímáno jako viditelný obsah, tzn. buňka již nebude prázdná (příklad 2.10).

Příklad 2.10. Prázdné buňky

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

. Vlastnost lze nastavit:

• horní- umístěte nad stůl.
• dno- umístěte jej pod stůl.

Hodnoty dostupné výhradně pro prohlížeč Firefox vlevo, odjet(směrem vlevo) a že jo(vpravo od tabulky), ale ostatní prohlížeče jim nerozumí.

Tabulka (strana s titulkem: nahoře;)

border-kolaps

Pomáhá vyhnout se situacím, kdy okraje buněk tvoří dvojité okraje. Obrázek níže ukazuje právě takový případ.

Takto se rámečky buněk zobrazují ve výchozím nastavení. Pravidlo border-collapse: oddělené; dává stejný efekt. Chcete-li problém vyřešit, musíte deklarovat border-collapse: kolaps;(výsledek je znázorněn na obrázku níže).

ohraničení

Definuje vzdálenost mezi hranicemi buněk. Pravidlo je nastaveno pro celý stůl najednou. Pokud existuje jedna hodnota, nastaví vzdálenost horizontálně i vertikálně. Pokud existují dvě hodnoty, pak první nastaví horizontální vzdálenost, druhá - vertikální. Vlastnost je neslučitelná s pravidlem tabulka (border-collapse: kolaps;).

Tabulka ( border: 4px double #FCA360; border-collapse: samostatné; border-spacing: 10px 20px; ) td ( padding: 3px; border: 1px solid #FCA360; )

Dává tabulce následující vzhled:

prázdné buňky

Určuje, zda se zobrazí pozadí a ohraničení buňky, pokud je prázdná. Vlastnost může mít jednu ze dvou hodnot:

• ukázat- zobrazit okraje a pozadí (výchozí).
• skrýt- schovej je. Pokud jsou všechny buňky řádku prázdné, bude celý řádek skrytý. Pokud je v tabulce uvedeno pravidlo border-collapse: kolaps;, pak je vlastnost ignorována.

rozložení tabulky

Řekne prohlížeči, jak určit šířku buněk tabulky na základě jejich obsahu.

• auto. Šířka je určena automaticky. V tomto případě se buď sečte šířka všech sloupců, nebo se vezme hodnota vlastnosti šířka, pokud je to u tabulky uvedeno. Prohlížeč nejprve načte tabulku, poté ji analyzuje, aby určil její šířku, a teprve poté ji zobrazí.
• pevný. Pevná šířka, která je určena prvním řádkem.

Příklad návrhu stolu

Nezapomeňte, že stolu můžete nastavit další univerzální pravidla, jako jsme to udělali s výškou ( výška) a šířka ( šířka).

S ohledem na to vytvoříme jednoduchou tabulku, která bude částečně komentovat kód.

Příklad tabulky

Ceny	2014	2015	2016
Chléb	16	18	21
Cukr	35	44	50
Sůl	8	8,50	9

V prohlížeči bude tabulka vypadat jako níže.

šířka: 50 %;

Nastavte šířku tabulky na polovinu šířky nadřazené tabulky. 50 % se odebírá ze šířky nádoby protože nemá jiné rodiče. To znamená, že tabulka bude zabírat přesně polovinu okna prohlížeče.

strana titulku: spodní;

Nadpis umístíme dole, pod tabulku.

ohraničení: 4px plné #006400;

Dejte tabulce barevný rámeček o tloušťce 4 pixelů.

border-collapse: kolaps;

Sloučit ohraničení buněk.

rozvržení stolu: pevné;

Nakonfigurujeme způsob, jakým prohlížeč určuje šířku tabulky.

velikost písma: 13px;

Nastavte velikost písma buněk záhlaví.

váha písma: tučné;

Text uvnitř označte tučným písmem.

pozadí: #ADFF2F;

Nastavte barvu pozadí buněk.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Nastavení horního a spodního rámu.

barva: #039;

Definujte barvu textu.

výplň: 8px;

Nastavte vzdálenost od obsahu buněk k jejich okrajům na osm pixelů.

Tabulky samotné vypadají dost chudě a prohlížeče svým způsobem zobrazují některé charakteristiky tabulek, zejména rámce. Tyto nedostatky lze přitom snadno napravit využitím síly stylů. Zároveň jsou značně rozšířeny prostředky pro navrhování tabulek, což umožňuje úspěšně zasadit tabulky do návrhu webu a přehledněji prezentovat tabulková data.

Barva pozadí buňky

Barva pozadí všech buněk tabulky současně se nastavuje pomocí vlastnosti pozadí, která se aplikuje na selektor TABULKA. V tomto případě byste si měli pamatovat pravidla pro používání stylů, zejména dědičnost vlastností prvků. Přestože se vlastnost pozadí nedědí, výchozí hodnota pozadí pro buňky je transparentní, tzn. průhlednost, takže efekt výplně pozadí je získán také pro buňky. Pokud současně s TABLE nastavíte barvu pro volič TD nebo TH, bude tato barva nastavena jako pozadí buňky (příklad 2.3).

Příklad 2.3. Barva pozadí

Nadpis 1	Nadpis 2
Buňka 3	Buňka 4

V tomto příkladu získáme modrou barvu pozadí buněk (tag

) a červenou v názvu (tag	). Není totiž definován styl pro selektor TH, takže pozadí nadřazeného prvku, v tomto případě selektoru TABLE, je "prosvítáno". A barva pro volič TD je specifikována explicitně, takže buňky jsou „vyplněny“ modrou barvou. Výsledek tohoto příkladu je znázorněn na Obr. 2.4. Rýže. 2.4. Změna barvy pozadí Okraje uvnitř buněk Okraj je vzdálenost mezi okrajem obsahu buňky a jejím okrajem. Obvykle se pro tento účel používá atribut cellpadding značky. . Definuje hodnotu okraje v pixelech na všech stranách buňky. Je možné použít vlastnost padding style přidáním do selektoru TD, jak je znázorněno v příkladu 2.4. Příklad 2.4. Pole v tabulkách XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Nadpis 1 Nadpis 2 Buňka 3 Buňka 4 V tomto příkladu seskupením voličů jsou pole nastavena současně pro voliče TD a TH. Výsledek příkladu je na Obr. 2.5. Rýže. 2.5. Pole v buňkách Pokud je vlastnost padding style aplikována na buňky tabulky, pak účinek atributu cellpadding značky ignoroval. Vzdálenost mezi buňkami Chcete-li změnit vzdálenost mezi buňkami, použijte atribut cellpacing značky . Efekt tohoto atributu je jasně viditelný při použití ohraničení kolem buněk nebo při vyplnění buněk barvou, která vyčnívá z pozadí stránky. Vlastnost stylu border-spacing funguje jako náhrada za cellspacing, nastavuje vzdálenost mezi okraji buněk. Jedna hodnota nastavuje svislou i vodorovnou vzdálenost mezi ohraničením buněk. Pokud má tato vlastnost dvě hodnoty, pak první určuje vodorovnou vzdálenost (tj. vlevo a vpravo od buňky) a druhá určuje vertikální vzdálenost (nad a pod). Vlastnost border-spacing se projeví pouze v případě, že selektor TABLE nemá vlastnost border-collapse nastavenou na sbalení (příklad 2.5). Příklad 2.5. Vzdálenost mezi hranicemi buněk XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx Leonardo 5 8 Raphael 4 11 Michelangelo 24 9 Donatello 2 13 Výsledek tohoto příkladu je znázorněn na Obr. 2.6. Rýže. 2.6. Zobrazení tabulky při použití ohraničení Internet Explorer verze 7 a vyšší nepodporuje vlastnost border-spacing, takže tabulky v tomto prohlížeči budou používat výchozí hodnotu cellpacing (obvykle 2px). Při přidávání vlastnosti border-collapse s hodnotou sbalení do selektoru TABLE je atribut cellpacing ignorován a hodnota border-spacing je resetována na nulu. Hranice a rámečky Ve výchozím nastavení není v tabulce zpočátku žádný okraj a jeho přidání se provádí pomocí atributu border značky . Prohlížeče takové ohraničení zobrazují jinak, proto je lepší tento atribut vůbec neuvádět a nechat vykreslení ohraničení na stylech. Podívejme se na dvě metody přímo související se styly. Použití atributu cellspacing Je známo, že atribut cellspacing značky nastavuje vzdálenost mezi buňkami tabulky. Pokud použijete různé barvy pozadí pro tabulku a buňky, pak se mezi buňkami objeví mřížka čar, jejíž barva odpovídá barvě tabulky a tloušťka je rovna hodnotě atributu cellspacing v pixelech. Příklad 2.3 výše ukazuje tento efekt, takže jej nebudu opakovat. Všimněte si, že to není příliš pohodlný způsob vytváření hranic, protože má omezený rozsah. Tímto způsobem můžete získat pouze jednobarevnou mřížku, nikoli svislé nebo vodorovné čáry na správných místech. Použití vlastnosti border Vlastnost border style současně nastavuje barvu, styl a tloušťku ohraničení kolem prvku. Když potřebujete vytvořit samostatné čáry na různých stranách, je lepší použít deriváty - border-left , border-right , border-top a border-bottom , tyto vlastnosti definují ohraničení vlevo, vpravo, nahoře a dole. . Použitím vlastnosti border na selektor TABLE přidáme ohraničení kolem tabulky jako celku a na selektor TD nebo TH přidáme ohraničení kolem buněk (Příklad 2.6). Příklad 2.6. Přidání dvojitého rámu XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Nadpis 1 Nadpis 2 Buňka 3 Buňka 4 Tento příklad používá černé dvojité ohraničení kolem samotné tabulky a plné bílé ohraničení kolem každé buňky. Výsledek příkladu je na Obr. 2.7. Rýže. 2.7. Ohraničení kolem stolu a buněk Upozorňujeme, že v místě spojení buněk se tvoří dvojité čáry. Získávají se opět díky působení atributu cellpacing tagu . Ačkoli se tento atribut nikde v ukázkovém kódu nevyskytuje, prohlížeč jej používá ve výchozím nastavení. Pokud nastavíte , pak dostaneme ne dvojité, ale jednoduché čáry, ale dvojnásobné tloušťky. Chcete-li tuto funkci změnit, použijte vlastnost stylu border-collapse s hodnotou kolaps , která je přidána do selektoru TABLE (příklad 2.7). Příklad 2.7. Vytvoření jednoho rámce XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Nadpis 1 Nadpis 2 Buňka 3 Buňka 4 Tento příklad vytvoří plnou zelenou čáru mezi buňkami a černou čáru kolem tabulky. Všechny okraje v tabulce mají stejnou tloušťku. Výsledek příkladu je na Obr. 2.8. Rýže. 2.8. Ohraničení kolem stolu Zarovnání obsahu buňky Ve výchozím nastavení je text v buňce tabulky zarovnán doleva. Výjimkou z tohoto pravidla je tag	, definuje záhlaví, které je vystředěné. Chcete-li změnit metodu zarovnání, použijte vlastnost stylu zarovnání textu (příklad 2.8). Příklad 2.8. Zarovnat obsah buňky vodorovně XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Nadpis 1 Buňka 1 Buňka 2 Nadpis 2 Buňka 3 Buňka 4 V tomto příkladu obsah značky	je zarovnán doleva a obsah značky	- ve středu. Výsledek příkladu je uveden níže (obrázek 2.9). Rýže. 2.9. Zarovnání textu v buňkách Svislé zarovnání v buňce je vždy na střed, pokud není uvedeno jinak. To není vždy vhodné, zejména u tabulek, jejichž obsah buněk se liší výškou. V tomto případě je zarovnání nastaveno k hornímu okraji buňky pomocí vlastnosti vertical-align, jak ukazuje příklad 2.9. Příklad 2.9. Zarovnat obsah buňky svisle XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Nadpis 1 Nadpis 2 Buňka 1 Buňka 2 Tento příklad nastavuje výšku záhlaví	jako 40 pixelů a text je zarovnán ke spodnímu okraji. Výsledek příkladu je na Obr. 2.10. Rýže. 2.10. Zarovnání textu v buňkách Prázdné buňky Prohlížeče zobrazují buňku, ve které není nic, jinak. „Nic“ v tomto případě znamená, že do buňky nebyl přidán obrázek ani text a prostor se nebere v úvahu. Vzhled buněk se přirozeně liší pouze tehdy, je-li kolem nich nastaveno ohraničení. Při použití neviditelného ohraničení je vzhled buněk, bez ohledu na to, zda v nich něco je nebo není, stejný. Starší prohlížeče nezobrazovaly barvu pozadí prázdných buněk zobrazení

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Zobrazení tabulky v prohlížeči Safari je na Obr. 2.11a. Stejná tabulka v prohlížeči IE7 je na Obr. 2.11b.

A. V prohlížeči Safari, Firefox, Opera, IE8, IE9

b. V prohlížeči IE7

Rýže. 2.11. Pohled na tabulku s prázdnými buňkami