Domov › Internet › Barva rámu html tabulky. Barva rámu barva ohraničení. Barva vnějšího obrysu obrys-barva

Barva rámu html tabulky. Barva rámu barva ohraničení. Barva vnějšího obrysu obrys-barva

Nezdá se vám, že černobílý stůl vypadá trochu nudně? To si myslíme i my! Proto v tomto tutoriálu budeme hovořit o tom, jak změnit barvu tabulky v HTML. Existují tři možnosti přidání barvy, každá má svou vlastní vlastnost.

Určení barvy pozadí buněk. To se provádí pomocí vlastnosti barva pozadí.
Určení barvy textu v buňkách. To se provádí pomocí vlastnosti barva.
Určuje barvu ohraničení buněk. To se provádí pomocí vlastnosti barva ohraničení.

Dříve se pro změnu barvy používala stručnější forma popisu rámečku. Vypadala takto:

Ohraničení: 1px plná světle šedá

A poslední část byla zodpovědná za barvu zde - lightrgay.

Existovat různé cesty, což vám umožní nastavit význam barev v CSS. Ukážeme vám, jak se barva popisuje pomocí atributů.

Jak změnit barvu buňky

Podívejme se, jak kód vypadá CSS, který určuje barvu buňky.

Td ( barva pozadí: barva pozadí; )

Samozřejmě můžete měnit i barvy stůl, a td, a čt. Zkusme dát naší násobilce pevnější vzhled.

Pojďme přidat styly pro buňky záhlaví s tagem čt, stejně jako pro diagonální buňky obsahující druhé mocniny čísel:

Násobilka

Násobilka
*	2	3
2	4	6
3	6	9

Výsledek v prohlížeči:

Jak změnit barvu ohraničení v tabulce

Jak jste si již všimli v příkladu výše, v tabulce jsme změnili barvu ohraničení. K tomu jsme použili hraniční majetek. Nastavuje parametry v níže uvedeném pořadí:

typ čáry, v našem případě plná (plná)
tloušťka čáry, v našem případě 1px
barva čáry, v našem případě modrá

Připomeňme si ještě jednou, jak vypadá nastavení barvy ohraničení buňky:

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

Jak změnit barvu řádku v tabulce

Naučili jsme se tedy, jak změnit barvy buněk i buněk záhlaví pomocí Funkce CSS. Pokud zadáme styly pro značky jako čt nebo td, pak byste měli pochopit, že styly budou platit i pro ostatní značky.

Existují však situace, kdy potřebujete změnit barvu konkrétní buňky, několika buněk nebo celého řádku. Co dělat v v tomto případě? Zde byste měli používat třídy a také aplikovat jejich styly. V praxi to vypadá takto:

RowGreen (barva pozadí:zelená; )

A chcete-li změnit barvu určitých čar pomocí této třídy, musíte provést následující:

Tabulka se střídajícími se barvami v řádcích
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

A výsledek v prohlížeči:

Jak změnit barvu textu v tabulce

Chcete-li změnit barvu textu v tabulce, použijte vlastnost barva. Dá se aplikovat na většinu různé prvky: ke stolu, tr, th, td. V závislosti na tom se změní barva ve vybraném prvku. Například pro celý stůl, který jsme prostavili zelená barva písmo:

Stůl ( barva: zelená; ... )

Podobně můžete změnit barvu pro jednotlivé buňky. A na tomhle tuto lekci končí, nezapomeňte to udělat domácí práce. Ahoj všichni!

Stal se populární, webdesignéři používali hlavně metodu tabulkové uspořádání a dosáhl velmi dobrých výsledků.

Značky používané k vytvoření tabulky v html

stůl- požadovaný štítek, který otevírá a zavírá tabulku
titulek - volitelný štítek, s uvedením názvu tabulky
čt- volitelný tag, jehož úvodní a závěrečné tagy obsahují název sloupce. Obvykle se zobrazuje tučně
tr- povinná značka, která otevírá a zavírá řádek
td- povinná značka označující otevření a zavření buňky v řadě

Příklad kódu pro jednoduchou tabulku

HTML tabulka

Název tabulky
Stobets 1	Stobets 2
Text v první buňce	Text ve druhé buňce

Zobrazí se prohlížeč

Účel tabulek v html

Lekce o stolech je velmi důležitá! Díky tabulkám můžete uspořádat nejen text, ale i obrázky, odkazy a mnoho dalšího. V tabulce můžete specifikovat Pozadí(nebo jeho barva), odsazení, šířka, okraj A jiné parametry to jí dá krásnou vzhled. Tabulka – Váš první krok k pochopení webový design! Dříve bylo mnoho webů zcela rozvrženo jako tabulky, tedy vše, co uživatel viděl ( postranní panel, Horní menu, obsah) - byl obsah buněk velké tabulky.
V této poznámce přejděme přímo k atributům, díky kterým je stůl krásný...

Vlastnosti a parametry html tabulek: odsazení, šířka, barva pozadí, ohraničení (rámeček)

U značka stolu existují následující atributy:

šířka- šířka stolu. může být v pixelech nebo % šířky obrazovky.
bgcolor- barva pozadí buněk tabulky
Pozadí- vyplní pozadí tabulky vzorem
okraj- rám a okraje v tabulce. Tloušťka se udává v pixelech
vycpávka buněk- výplň v pixelech mezi obsahem buňky a jejím vnitřním okrajem
Stejně jako dříve píšeme hodnotu atributu v uvozovkách.

Podívejme se na použití těchto atributů na příkladu. Chcete-li to provést, vytvořte tabulku (ale již bez extrémně zřídka používaných popisků a značek th) a nastavte parametr na atribut okraj, šířka (šířka tabulky, řádku nebo buňky) A bgcolor (barva buňky)

HTML tabulka

V důsledku toho se v prohlížeči zobrazí následující tabulka:

rám- atribut označující rámec kolem tabulky. Existují následující hodnoty:

Prázdné - bez rámu,
nahoře - pouze horní rám,
dole - pouze spodní rám,
hsides - pouze horní a spodní rám,
vsides - pouze levý a pravý rám,
lhs - pouze levý rám,
rhs - pouze pravý rám,
krabice - všechny čtyři části rámu.

pravidla- atribut označující hranice v tabulce mezi buňkami. Existují následující hodnoty:

Žádné - mezi buňkami nejsou žádné hranice,
skupiny - hranice pouze mezi skupinami řádků a skupinami sloupců (bude diskutováno o něco později),
řádky - pouze hranice mezi řádky,
cols - hranice pouze mezi sloupci,
vše - zobrazí všechny okraje.

Podívejme se na příklad kódu

HTML tabulka

Stobets 1	Stobets 2

Výsledek

Nyní zkusme tvořit krásný stůl. Chcete-li to provést, začněme používat zarovnání stolu. K tomu jsou k dispozici následující již známé parametry:

zarovnat- zarovnání stolu. Může být umístěn vlevo (vlevo), vpravo (vpravo), uprostřed (uprostřed)
rozmístění buněk- vzdálenost mezi buňkami tabulky. Zadáno v pixelech (výchozí 0 pixelů)
vycpávka buněk- výplň v pixelech mezi obsahem buňky a jejím vnitřním okrajem (výchozí 0 pixelů)
Podívejme se na příklad

HTML tabulka

Stobets 1	Stobets 2
Text v první buňce prvního sloupce	Text ve druhé buňce druhého sloupce

Prohlížeč zobrazí vycentrovanou tabulku, která vypadá takto:

tr řádků a td buněk v tabulkách HTML

Znovu připomínám, že tabulky se tvoří řádek po řádku (tr). Řádky (tr) již obsahují buňky (td). Pokud zadáte parametr pro řetězec (tr), bude platný pro všechny buňky(td) v tomto řádku, pokud pro konkrétní buňku, pak pouze pro ni. Ve výše uvedených příkladech jsem specifikoval barvu pro řádek, tento parametr byl distribuován do všech buněk.

Pro značky tr a td existují následující

zarovnat- zarovnání textu uvnitř buňky. Levý okraj (vlevo), pravý okraj (vpravo), střed (uprostřed)
valign- vertikální zarovnání textu uvnitř buňky. Nahoru (nahoře), dolů (dole), uprostřed (uprostřed)
bgcolor- nastaví barvu čáry
šířka- šířka sloupce (všechny níže uvedené buňky zaberou tento parametr) se zadává v pixelech nebo v procentech, kde 100 % je šířka celé tabulky
výška- výška buňky (tento parametr přijmou všechny buňky v řádku)

Podívejme se na kód, kde je obsah buněk (td) zarovnán podél různých okrajů: v prvním doleva, ve druhém doprava:

HTML tabulka

Stobets 1	Stobets 2
Text v první buňce prvního sloupce	Text ve druhé buňce druhého sloupce
Stobets 1	Stobets 2

Výsledek

Pomocí tabulek můžete vytvořit velmi dobrou stránku. Nezapomeňte, že do buněk můžete vkládat nejen text, ale také obrázky, odkazy atd.!)

Děkuji za pozornost! Doufám, že materiál byl užitečný!

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

Stobets 1	Stobets 2
Text v první buňce prvního sloupce	Text ve druhé buňce druhého sloupce

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

Uvnitř štítku

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

nebo

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

Rám stolu

Podle výchozí HTML tabulka na webové stránce se zobrazí bez ohraničení pro přidání ohraničení do tabulky, stejně jako do všech ostatních prvků, použijte Vlastnost CSS okraj . Ale stojí za to věnovat pozornost skutečnosti, že pokud přidáte rám 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

Tabulka, th, td ( okraj: 1px plná černá; ) Zkuste »

Nyní tabulka i buňky mají ohraničení a každá buňka a tabulka mají své vlastní ohraničení. V důsledku toho se mezi rámečky objevil prázdný prostor; velikost tohoto prostoru lze ovládat pomocí vlastnosti border-spacing, která je nastavena pro celou tabulku. Jinými slovy, nemůžete jednotlivě ovládat rozestupy mezi různými buňkami.

I když odstraníte mezery mezi buňkami pomocí hodnoty vlastnosti border-spacing 0, okraje buněk se budou navzájem dotýkat, čímž se zdvojnásobí velikost. Chcete-li zkombinovat ohraničení buněk, použijte vlastnost border-collapse. Může mít dva významy:

oddělené: Toto je výchozí nastavení. Buňky jsou zobrazeny na na krátkou vzdálenost od sebe, každá buňka má svůj vlastní rámec.
sbalit: spojí sousední snímky do jednoho, všechny mezery mezi buňkami i mezi buňkami a rámečkem tabulky jsou ignorovány.

Název dokumentu

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

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

Snaž se "

Velikost stolu

Po přidání ohraničení k buňkám tabulky bylo patrné, že obsah buněk byl příliš blízko okrajů. Pro přidání volný prostor Můžete použít vlastnost padding mezi okraji buněk a jejich obsahem:

Th, td ( odsazení: 7px; ) Zkuste »

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 stolu lze změnit pomocí vlastností width a height zadáním požadované velikosti nebo samotná tabulka nebo buňky:

Tabulka (šířka: 70%; ) th (výška: 50px; ) Zkuste »

Zarovnání textu

Ve výchozím nastavení je text v buňkách záhlaví tabulky zarovnán na střed, zatímco text v běžných buňkách je zarovnán doleva pomocí vlastnosti zarovnání textu můžete ovládat vodorovné zarovnání textu.

Vlastnost CSS vertical-align umožňuje řídit vertikální zarovnání obsahu textu. Ve výchozím nastavení je text zarovnán svisle na střed buněk. Vertikální zarovnání lze přepsat pomocí jedné z hodnot vlastnosti vertikálního zarovnání:

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

Název dokumentu

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

Snaž se "

Střídání barvy pozadí řádků tabulky

Při prohlížení velké stoly obsahující mnoho řádků s velké množství informací, může být obtížné sledovat, kterých údajů se týkají konkrétní řádek. Abyste uživatelům usnadnili orientaci, můžete střídavě používat dvě různé barvy pozadí. Chcete-li vytvořit popsaný efekt, můžete použít selektor třídy 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řidat atribut třídy do každého druhého řádku je docela zdlouhavý úkol. Pseudo-class:nth-child bylo přidáno do CSS3, aby poskytlo alternativní řešení tohoto problému. Nyní lze dosáhnout výhradně efektu střídání pomocí CSS aniž by se změnilo označení HTML dokumentu. Pomocí pseudo-class:nth-child můžete vybrat všechny sudé nebo liché řádky tabulky pomocí jednoho z klíčová slova: sudý (sudý) nebo lichý (lichý):

Tr:nth-child(liché) ( barva pozadí: #EAF2D3; ) Zkuste »

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

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

Implementace takového efektu je velmi jednoduchá, abyste to udělali, musíte přidat pseudo-class:hover do selektoru řádku tabulky a nastavit požadovanou barvu Pozadí:

Tr:hover (barva pozadí: #E0E0FF; ) Zkuste »

Zarovnání stolu na střed

zarovnání HTML Centrování stolu je možné pouze v případě, že šířka stolu je menší než jeho šířka nadřazený prvek. Chcete-li zarovnat tabulku na střed, musíte použít vlastnost margin a dát jí alespoň dvě hodnoty: první hodnota bude zodpovědná za okraj tabulky nahoře a dole a druhá pro automatické zarovnání na střed:

Tabulka ( okraj: 10px automaticky; ) Zkuste »

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 vodorovné zarovnání a třetí za spodní okraj:

Tabulka ( okraj: 10px automaticky 30px; )

Pro jasné oddělení obsahu jedné buňky od druhé jsou k buňkám přidány okraje. Za jejich vytvoření je zodpovědný parametr border tag

, který určuje tloušťku rámu.

Příklad 1 ukazuje, jak vytvořit ohraničení kolem buněk.

Příklad 1: Přidání rámce do tabulky

Tloušťka okraje

Cheburashka

Krokodýl Gena

Shapoklyak

Takto vytvořené rámečky se vzhledově mírně liší různé prohlížeče.

Rýže. 1. Hranice získaná pomocí parametru border

Chcete-li získat jeden typ rámce, doporučuje se použít značku stylu ohraničení a aplikovat ji na buňky tabulky (tag

nebo

). I zde však na nás čekají úskalí. Vzhledem k tomu, že pro každou buňku je vytvořen rám, je v místě, kde se buňky dotýkají, získán okraj s dvojnásobnou tloušťkou. Existuje několik způsobů, jak tento problém vyřešit. Nejjednodušší je použít vlastnost border-collapse s hodnotou kolaps . Jeho úkolem je sledovat kontakt čar a místo dvojitého ohraničení znázornit hranici jednoduchou. Tento atribut dastatkov přidáme ke značce , a pak vše udělá sám (příklad 2).

Příklad 2: Použití border-collapse při vytváření ohraničení tabulky

Vytvoření rámu

0	X	X
0	0	X
X	X	0

Rozdíl mezi ohraničením tabulky s parametrem border-collapse a bez něj je na Obr. 2.

Rýže. 2. Zobrazení tabulky při použití atributu border-collapase

Na Obr. Obrázek 2a ukazuje výchozí rámeček tabulky. Vezměte prosím na vědomí, že uvnitř tabulky mají všechny čáry dvojnásobnou tloušťku. Přidáním parametru border-collapse se tato vlastnost odstraní a tloušťka všech čar bude stejná (obr. 2b).

Chcete-li vytvořit řádky stejného typu v tabulce, můžete jít jiným způsobem. Mělo by být přidáno pro selektor

rám, ale zrušte řádek vpravo a dole a nastavte odpovídající atributy na žádné . Při spojování buněk se pak jejich hranice nebudou vzájemně překrývat z toho důvodu, že bude pouze jedna čára. Při této metodě vytváření hranic však nejsou žádné čáry v dolní a pravé části tabulky samotné. Přidání parametrů border-right a border-bottom do selektoru , skončíme s požadovaným rámem (příklad 3). Pro jednotnost je třeba dbát na to, aby styl, tloušťka a barva okraje ve všech případech odpovídaly.

Příklad 3. Vytvoření rámce pro tabulku pomocí atributu border

Vytvoření rámu

0	X	X
0	0	X
X	X	0

Tato metoda může mít variace, například pro selektor

přidat ohraničení pouze vpravo a dole a , naopak přidáme atribut border, ale odstraníme čáru vpravo a dole. V každém případě bude prezentovaný výsledek stejný.

Jednoduché a originální vzhled tabulky lze získat, pokud je barva ohraničení přizpůsobena barvě pozadí. Ale aby byly čáry vidět, měli byste určitě vyplnit pozadí značky

Tato značka určuje, kde by se měly informace nacházet. V tomto příkladu budeme muset uspořádat informace od začátku tabulky.

Do buňky naší tabulky vložíme další tabulku.

nebo . Potom buňky tabulky vypadají, jako by byly seříznuty řezačkou (příklad 4).

Příklad 4: Použití neviditelné hranice ve stole

Vytváření hranic

0	X	X
0	0	X
X	X	0

V v tomto příkladu Barva pozadí webové stránky se zadává prostřednictvím vlastnosti pozadí přidané do selektoru BODY. Ačkoli bílá barva je standardně nastaven, je někdy žádoucí nastavit jej tak, aby uživatel neurčoval svou barvu pozadí přes nastavení prohlížeče. Měla by být stejná barva řádky tabulky, v tomto případě se výslovně nevydávají a pouze si buňky mezi sebou rozdělují.

Výsledek příkladu 4 je uveden níže.

Rýže. 3. Vzhled okrajů, které odpovídají barvě pozadí

21.01.06 5,9 tis

Jakýkoli webmaster, s ohledem na jeho odborná činnost, musíte vytvořit jedno nebo druhé komplexní prvky Online
(Například: obtékání textu kolem grafiky, vytváření sloupců s textem, oprava prvků webu).
Nicméně, html standard má malý počet standardní prvky design stránky a ne všechny prvky se v různých prohlížečích zobrazují stejně. Každá společnost se snaží vyvíjet vlastní vlastní html, někdy jdoucí daleko od základního konceptu html vyvinutého konsorciem WWW.
Proto musí webmaster experimentovat s prvky, které jsou společné všem prohlížečům.
Tabulky jsou nejvhodnější, protože je vhodné umístit informace do buněk tabulky.
Tabulky v html mají navíc atribut "border="0" - tento atribut s hodnotou "0" skryje okraje tabulky, tj. obsah buňky zůstane viditelný, ale samotný rámec není viditelný.
Podívejme se nyní na příklad vývoje návrhu stolu.

Barevné ohraničení rámu stolu.
Okamžitě si všimnu, že html má ve výchozím nastavení vestavěný atribut, který je zodpovědný za barvu rámu tabulky. (barva ohraničení). Nám to však nebude vyhovovat, protože tento atribut pouze podporováno internetový prohlížeč Badatel. Tento prvek nefunguje v jiných prohlížečích. Potřebujeme ale, aby se stránka zobrazovala stejně v jakémkoli prohlížeči. Na pomoc nám přicházejí stoly. Nejprve vytvoříme běžnou tabulku.

Atribut "border" musí být nastaven na "0". rozteč buněk se rovná "2" (než větší číslo, tím širší bude rám stolu).
Atribut "cellspacing" se používá k určení vzdálenosti mezi dvěma buňkami. V tomto případě bude udávat vzdálenost mezi dvěma tabulkami.
Vyplňte tabulku černou pomocí atributu „bgcolor“ Obecně si můžete vybrat jakoukoli jinou barvu, podle toho, jakou barvu bude mít váš rám.

Text

Určete barvu pozadí tabulky. V tomto případě budeme potřebovat bílé pozadí.

To je vše. Náš stůl je připraven. Nyní máme tabulku, jejíž rámec se bude zobrazovat stejně ve všech prohlížečích.

Nakonec vám poskytnu veškerý kód, který jsme vytvořili.

Text

Oblíbené v kategorii: