Striedavá farba pozadia bunky html tabuľky. Displej prehliadača

Pri veľkom počte riadkov v tabuľke môže byť ťažké navzájom porovnávať údaje z rôznych stĺpcov. To si vyžaduje vizuálne oddeliť jeden riadok tabuľky od druhého, buď pomocou čiar alebo pridaním farby pozadia.

Najprv sa pozrime na možnosť použitia vodorovných čiar. Na obr. 1 je znázornený jeden z možných spôsobov, ako zamerať pozornosť na riadky tabuľky. Každý riadok v hornej a dolnej časti je orámovaný líniou, vďaka čomu po nich pohľad návštevníka kĺže a nepreskočí na ďalší riadok. V tomto prípade sú údaje umiestnené v stĺpcoch tiež navzájom prepojené, ale kvôli súčasnému zarovnaniu vľavo a prázdnemu priestoru medzi stĺpcami.

Nastavenie čiar medzi čiarami je pomerne jednoduché, ak to chcete urobiť, pridajte do selektora TD atribút štýlu border-bottom. Ak je okolo stola okraj, spodný okraj bude mať dvojnásobnú hrúbku. V tomto prípade môžete odstrániť spodný riadok z posledného riadku alebo skryť spodný okraj z tabuľky (príklad 1).

Príklad 1: Oddelenie riadkov tabuľky čiarami

	2004	2005	2006
Rubíny	43	51	79
Smaragdy	28	34	48
Zafíry	29	57	36

V tomto príklade sú zvislé čiary medzi bunkami hlavičky pridané pomocou parametra border, ktorý sa používa pre selektor TH. Tým sa vytvorí jednopixelový prázdny priestor medzi okrajom tabuľky a oblasťou hlavičky pozadia.

Použitie farby rozširuje možnosti zmeny vzhľadu stola. Napríklad farba pozadia párnych a nepárnych riadkov môže byť odlišná.

Ak chcete zmeniť farbu pozadia požadovaných riadkov, zavedieme ďalšiu triedu, nazveme ju párne a začneme ju pridávať do párnych riadkov tabuľky, konkrétne do značky . Upozorňujeme, že selektor TR môže nastaviť farbu pozadia iba prostredníctvom vlastnosti pozadia. Žiadne riadky, ktoré sú nastavené pre volič TR, sa nezobrazia. Preto nakreslíme spodný okraj bunky použitím vlastnosti border-bottom na selektor TD (príklad 2).

Farba pozadia nepárnych riadkov je určená zmenou farby celej tabuľky. Ale keďže je pre selektívne riadky (pre ktoré je pridaný parameter class="even") nastavená individuálna farba, „prekrýva“ farbu pozadia tabuľky. Vďaka tomu sa získajú striedavé farebné čiary.

Príklad 2. Zvýraznenie riadkov tabuľky farbou

	2004	2005	2006
Rubíny	43	51	79
Smaragdy	28	34	48
Zafíry	29	57	36
Ametysty	23	64	97

V tomto príklade dvojitá čiara v spodnej časti tabuľky nevyplýva z použitia vlastnosti border-collapse s hodnotou zbaliť na selektor TABLE. Táto možnosť zistí výskyt dvojitých čiar v miestach, kde sa bunky dotýkajú, a nahradí ich jednoduchými čiarami. Upozorňujeme, že v rôznych prehliadačoch môžu existovať rozdiely vo farbe zostávajúcich riadkov, ak sa farba okraja okolo tabuľky nezhoduje s farbou čiar pod riadkami.

Dobrý deň, milí čitatelia blogu. Rozhodol som sa napísať krátky príspevok na tému využitia CSS na zlepšenie zážitku návštevníkov stránky.

Z ničoho nič mi napadla myšlienka, že ak položky v pravom menu môjho blogu oživte to striedaním farieb pozadia(vyrobte rôzne farby pre párne a nepárne čiary), môže to zlepšiť použiteľnosť. Tu vkladám svoje nádeje do ľahkého vnímania veľkého množstva informácií, keď sú rozdelené do blokov (ako sa to stáva napríklad pri použití odsekov v texte).

Táto prax sa veľmi často využíva pri stylingu tabuliek, keď chcú zvýšiť viditeľnosť informácií v nich zobrazených. Pri hľadaní riešenia sa ukázalo, že tento problém sa dá celkom jednoducho vyriešiť pomocou samotného CSS.

Nie je potrebné označovať párne a nepárne prvky zoznamu triedami (pravé menu funguje na mojom základe). Stačí pridať pár riadkov kódu pomocou pseudotriedy n-tého potomka v súbore CSS, ktorý je zodpovedný za styling stránky. N-té dieťa má však množstvo iných využití, ktoré tiež v príspevku nespomeniem.

Možnosti pseudotriedy n-tého dieťaťa a jej využitie na stránke

Vlastne po ohlásení pseudotriedy n-tého dieťaťa by som mohol príspevok ukončiť, pretože si o ňom môžete vygoogliť veľa informácií. Ale toto nie je naša cesta, takže budeme pokračovať. Najprv teda opíšem svoje kroky, ako zmeniť správne menu na „pruhované“. Stačilo zistiť pomocou vývojárskych nástrojov zabudovaných v prehliadačoch (vyvolaných z kontextového menu požadovaného prvku na webovej stránke výberom položky ako „Zobraziť kód prvku“), kde sa v súbore štýlu zobrazuje vzhľad riadkov tohto zoznam je nastavený.

Princíp práce s vývojárskymi nástrojmi je podobný tomu, ktorý som opísal v článku o . Kliknite pravým tlačidlom myši na ľubovoľnú položku v ľavom menu môjho blogu a pozrite sa na výsledný prehľad na paneli, ktorý sa otvorí:

Vľavo uvidíte Html kód tohto prvku (nás zaujíma prvok s LI tagmi - riadok zoznamu) a v pravom stĺpci sú pravidlá CSS, ktoré prehliadač používa na jeho štýl. Okamžite zistíte, kde sa súbor so štýlom nachádza, presunutím kurzora myši na jeho názov.

V mojom prípade to bude súbor, ktorý sa dá otvoriť pripojením na stránku cez FTP a následnou cestou (neodporúčal by som upravovať súbory šablón z oblasti správy WordPress, pretože neexistuje spôsob, ako urobiť krok späť, ako je to možné, napr.).

/wp-content/themes

V skutočnosti na paneli nástrojov pre vývojárov v oblasti štýlov CSS dokonca nájdete riadok, na ktorom je v súbore štýlu napísané požadované pravidlo. V mojom prípade je to 281 riadkov. Preto po otvorení style.css v programe Poznámkový blok (mám ho priradený ako predvolený editor pre všetky súbory, ktoré sa objavujú v engine stránky), som sa okamžite presunul na tento riadok.

A hneď pod ním som pridal niekoľko ďalších pravidiel s (toto pravidlo je zodpovedné za zmenu farby pozadia pravého panela ponuky, keď je kurzor myši priamo nad ním - vďaka tomu je ponuka „živšia“ alebo niečo také) a s n-tým -detská pseudotrieda uvedená vyššie. Ak sme už hovorili o hovver (pozri odkaz vyššie), potom teraz budeme hovoriť o n-tom dieťati. Ak ste si všimli, že parameter 2n je pre túto pseudotriedu napísaný v zátvorkách.

N-té dieťa (2n)

Všeobecne hodnotu tohto pseudotriedneho n-tého dieťaťa sa uvádza pomocou výrazu: an+b, kde a a b sú celé čísla a n je počítadlo, ktoré nadobúda celočíselné hodnoty od 0 a viac: 0,1,2,3... V našom prípade pri zmene počítadla n dostaneme čísla 0 , 2, 4, 6 atď. To znamená, že vlastnosť špecifikovaná pre túto pseudotriedu (v našom prípade je to pravidlo pre nastavenie pozadia riadku zoznamu pomocou ) je v zozname na #E4F2FA.

Táto šestnástková sústava je najbežnejšia. Na nájdenie vhodných farieb som použil program Contrast Analyzer 2.0 popísaný v uvedenom odkaze. Umožňuje vám zachytiť farbu z obrazovky a prispôsobiť jej svetlejšie tóny, čo je presne to, čo som urobil.

Pre pozadie panela s ponukami som si pri prejdení kurzorom myši (pseudotrieda) zvolil ešte svetlejší odtieň z rovnakého radu.

Ďalšie príklady použitia n-tého dieťaťa

Ak chcete zmeniť pozadie alebo inak ovplyvniť vzhľad (napríklad pridať výplň, zväčšiť písmo alebo urobiť niečo iné neslušnejšie), použite výraz. Môžete skontrolovať, že nahradením celých čísel začínajúcich od nuly za n dostanete vo výsledku iba nepárne čísla. Môžete použiť obe možnosti naraz (pre párne a nepárne riadky zoznamov, tabuliek alebo čohokoľvek iného).

Viac niekoľko príkladov použitia n-tého dieťaťa na zvýraznenie rôznych riadkov zoznamov, tabuliek a podobných prvkov:

1. Na zosmiešňovanie nepárnych prvkov môžete použiť n-té dieťa (nepárne) namiesto výrazu uvedeného vyššie a n-té dieťa (párne) pre párne prvky.
2. Čo ak chcete zmeniť iba štvrtý riadok? potom pridajte do pravidla CSS pseudotriedu n-tého potomka (4) oddelenú dvojbodkou.
3. Chcete zmeniť vzhľad riadkov počnúc deviatou? Žiadny problém - n-té dieťa (n+9).
4. Ak chcete, naopak, vybrať iba prvých deväť prvkov, potom použite konštrukciu n-tého potomka (-n+9).
5. Ak chcete vybrať prvky od deviateho do osemnásteho, pridajte zloženú pseudotriedu:n-té dieťa (n+9):nté dieťa (-n+18). Čistá logika.
6. Chcete urobiť to isté ako v predchádzajúcom odseku, ale zvýrazniť iba párne riadky v tomto rozsahu? Žiadny problém - :n-té dieťa (n+9):n-té dieťa (-n+18):n-té dieťa (párne).

No a tam to je. Tá vec sa môže ukázať ako celkom užitočná. V každom prípade to bolo pre mňa užitočné.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Mohlo by vás to zaujímať

Selektory pseudotried a pseudoprvkov v CSS (hover, first-child, first-line a iné), vzťahy medzi značkami HTML kódu
Display (block, none, inline) in CSS – nastavte typ zobrazenia Html prvkov na web stránke
Vlastnosti CSS text-decoration, vertical-align, text-align, text-indent pre zdobenie textu v Html
Štýl zoznamu (typ, obrázok, pozícia) – CSS pravidlá pre prispôsobenie vzhľadu zoznamov v Html kóde
Ako nájsť a odstrániť nepoužívané riadky štýlu (extra selektory) v súbore CSS vašej stránky
Pozícia (absolútna, relatívna a pevná) – spôsoby umiestnenia prvkov Html v CSS (pravidlá vľavo, vpravo, hore a dole) Rôzne štýly pre interné a externé odkazy cez CSS
Priority v Css a ich zvýšenie z dôvodu Dôležité, kombinácie a zoskupenia selektorov, používateľských a autorských štýlov
Pravidlá pre písmo (hmotnosť, rodina, veľkosť, štýl) a výška riadku pre štylizáciu písma v CSS
Float and clear in CSS - block layout tools
Na čo slúži CSS, ako prepojiť kaskádové štýly s Html dokumentom a základná syntax tohto jazyka
Selektory značiek, tried, Id a univerzálne selektory, ako aj selektory atribútov v modernom CSS

Nezdá sa vám, že čiernobiely stôl vyzerá trochu nudne? To si myslíme aj my! Preto si v tomto návode povieme, ako zmeniť farbu tabuľky v HTML. Existujú tri možnosti pridania farby, pričom každá má svoju vlastnú vlastnosť.

1. Určenie farby pozadia buniek. To sa vykonáva pomocou nehnuteľnosti farba pozadia.
2. Určenie farby textu v bunkách. To sa vykonáva pomocou nehnuteľnosti farba.
3. Určuje farbu okrajov buniek. To sa vykonáva pomocou nehnuteľnosti border-color.

Predtým sa na zmenu farby používala stručnejšia forma popisu rámu. Vyzerala takto:

Orámovanie: 1px plná svetlosivá

A posledná časť bola zodpovedná za farbu tu - lightrgay.

Existujú rôzne spôsoby, ako nastaviť význam farieb CSS. Ukážeme vám, ako sa farba popisuje pomocou atribútov.

Ako zmeniť farbu buniek

Pozrime sa, ako kód vyzerá CSS, ktorý určuje farbu bunky.

Td ( farba pozadia: farba pozadia; )

Samozrejme môžete meniť aj farby tabuľky, a td, a th. Skúsme dať našej násobilke pevnejší vzhľad.

Pridajme štýly pre bunky hlavičky so značkou th, ako aj pre diagonálne bunky obsahujúce druhé mocniny čísel:

Násobiteľská tabuľka

*	2	3
2	4	6
3	6	9

Výsledok v prehliadači:

Ako zmeniť farbu okraja v tabuľke

Ako ste si už všimli v príklade vyššie, v tabuľke sme zmenili farbu orámovania. Na to sme použili vlastnosť border. Nastavuje parametre v poradí uvedenom nižšie:

1. typ čiary, v našom prípade plná (plná)
2. hrúbka čiary, v našom prípade 1px
3. farba čiary, v našom prípade modrá

Pripomeňme si ešte raz, ako vyzerá nastavenie farby okraja bunky:

Td ( orámovanie: 1px plná modrá; )

Ako zmeniť farbu riadku v tabuľke

Takže sme sa naučili, ako zmeniť farby buniek, ako aj buniek hlavičky pomocou funkcií CSS. Ak špecifikujeme štýly pre značky ako th alebo td, potom by ste mali pochopiť, že štýly sa budú vzťahovať aj na iné značky.

Sú však situácie, keď potrebujete zmeniť farbu konkrétnej bunky, niekoľkých buniek alebo celého riadku. Čo robiť v tomto prípade? Tu by ste mali používať triedy, ako aj ich štýly. V praxi to vyzerá takto:

RowGreen (farba pozadia:zelená; )

A ak chcete zmeniť farbu určitých čiar pomocou tejto triedy, musíte urobiť nasledovné:

Tabuľka so striedajúcimi sa farbami v riadkoch

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

A výsledok v prehliadači:

Ako zmeniť farbu textu v tabuľke

Ak chcete zmeniť farbu textu v tabuľke, použite vlastnosť farba. Môžete ho použiť na rôzne prvky: table, tr, th, td. V závislosti od toho sa zmení farba vo vybranom prvku. Napríklad pre celú tabuľku nastavíme farbu písma na zelenú:

Tabuľka ( farba: zelená; ... )

Podobne môžete zmeniť farbu pre jednotlivé bunky. A toto končí túto lekciu, nezabudnite si urobiť domácu úlohu. Ahojte všetci!

Stalo sa populárnym, webdizajnéri používali hlavne metódu rozloženia tabuľky a dosiahli veľmi dobré výsledky.

Značky používané na zostavenie tabuľky v html

tabuľky- povinná značka, ktorá otvára a zatvára stôl
titulok- voliteľná značka označujúca názov tabuľky
th- voliteľný tag, ktorého úvodný a záverečný tag obsahuje názov stĺpca. Zvyčajne sa zobrazuje tučne
tr- povinná značka, ktorá otvára a zatvára riadok
td- povinná značka označujúca otvorenie a zatvorenie bunky v rade

Príklad kódu pre jednoduchú tabuľku

Názov tabuľky

Stobets 1	Stobets 2
Text v prvej bunke	Text v druhej bunke

Zobrazí sa prehliadač

Účel tabuliek v html

Lekcia o stoloch je veľmi dôležitá! Vďaka tabuľkám môžete usporiadať nielen text, ale aj obrázky, odkazy a mnoho iného. V tabuľke môžete špecifikovať pozadie(alebo jeho farba), odsadenie, šírka, hranica A iné parametre, ktorý mu dodá krásny vzhľad. Tabuľka – Váš prvý krok k pochopeniu vzhľad stránky! Predtým boli mnohé stránky úplne usporiadané ako tabuľky, to znamená, že všetko, čo používateľ videl (bočné menu, horné menu, obsah), bolo obsahom buniek veľkej tabuľky.
Pri tejto poznámke prejdime priamo k atribútom, vďaka ktorým je stôl krásny...

Vlastnosti a parametre html tabuliek: odsadenie, šírka, farba pozadia, orámovanie (rámček)

U tabuľkový štítok existujú nasledujúce atribúty:

šírka- šírka stola. môže byť v pixeloch alebo % šírky obrazovky.
bgcolor- farba pozadia buniek tabuľky
pozadie- vyplní pozadie tabuľky vzorom
hranica- rám a okraje v tabuľke. Hrúbka je uvedená v pixeloch
výplň buniek- výplň v pixeloch medzi obsahom bunky a jej vnútorným okrajom
Rovnako ako predtým píšeme hodnotu atribútu v úvodzovkách.

Pozrime sa na použitie týchto atribútov na príklade. Ak to chcete urobiť, vytvorte tabuľku (ale už bez extrémne zriedka používaných titulkov a značiek th) a nastavte parameter na atribút hranica, šírka (šírka tabuľky, riadku alebo bunky) A bgcolor (farba bunky)

V dôsledku toho sa v prehliadači zobrazí nasledujúca tabuľka:

rám- atribút označujúci rám okolo stola. Existujú nasledujúce hodnoty:

Prázdno - bez rámu,
hore - iba horný rám,
dole - iba spodný rám,
hsides - iba horný a spodný rám,
vsides - iba ľavý a pravý rám,
lhs - iba ľavý rám,
rhs - iba pravý rám,
box - všetky štyri časti rámu.

pravidlá- atribút označujúci hranice v rámci tabuľky medzi bunkami. Existujú nasledujúce hodnoty:

Žiadne - medzi bunkami nie sú žiadne hranice,
skupiny - hranice iba medzi skupinami riadkov a skupinami stĺpcov (budú diskutované o niečo neskôr),
riadky - len hranice medzi riadkami,
cols - hranice iba medzi stĺpcami,
všetko - zobrazí všetky okraje.

Pozrime sa na príklad kódu

Stobets 1	Stobets 2

Výsledok

Teraz sa pokúsime vytvoriť krásny stôl. Ak to chcete urobiť, začnime používať zarovnanie tabuľky. Na tento účel existujú nasledujúce už známe parametre:

zarovnať- zarovnanie stola. Môže byť umiestnený vľavo (vľavo), vpravo (vpravo), v strede (v strede)
rozmiestnenie buniek- vzdialenosť medzi bunkami tabuľky. Určené v pixeloch (predvolene 0 pixelov)
výplň buniek- výplň v pixeloch medzi obsahom bunky a jej vnútorným okrajom (predvolené 0 pixelov)
Pozrime sa na príklad

Stobets 1	Stobets 2
Text v prvej bunke prvého stĺpca	Text v druhej bunke druhého stĺpca

Prehliadač zobrazí vycentrovanú tabuľku, ktorá vyzerá takto:

tr riadkov a td buniek v HTML tabuľkách

Ešte raz pripomeniem, že tabuľky sa tvoria riadok po riadku (tr). Riadky (tr) už obsahujú bunky (td). Ak zadáte parameter pre reťazec (tr), bude platný pre všetky bunky(td) v tomto riadku, ak pre konkrétnu bunku, tak len pre ňu. Vo vyššie uvedených príkladoch som špecifikoval farbu riadku; tento parameter bol podľa toho distribuovaný do všetkých buniek.

Pre značky tr a td existujú nasledujúce

zarovnať- zarovnanie textu vo vnútri bunky. Ľavý okraj (vľavo), pravý okraj (vpravo), stred (v strede)
valign- vertikálne zarovnanie textu vo vnútri bunky. Hore (hore), dole (dole), v strede (uprostred)
bgcolor- nastavuje farbu čiary
šírka- šírka stĺpca (všetky bunky nižšie akceptujú tento parameter) je uvedená v pixeloch alebo v percentách, kde 100% je šírka celej tabuľky
výška- výška bunky (všetky bunky v riadku akceptujú tento parameter)

Pozrime sa na kód, kde je obsah buniek (td) zarovnaný pozdĺž rôznych okrajov: v prvom vľavo, v druhom vpravo:

Stobets 1	Stobets 2
Text v prvej bunke prvého stĺpca	Text v druhej bunke druhého stĺpca
Stobets 1	Stobets 2

Výsledok

Pomocou tabuliek môžete vytvoriť veľmi dobrú stránku. Nezabudnite, že do buniek môžete vkladať nielen text, ale aj obrázky, odkazy atď.!)

Ďakujem za tvoju pozornosť! Dúfam, že materiál bol užitočný!

Stobets 1	Stobets 2
Text v prvej bunke prvého stĺpca	Text v druhej bunke druhého stĺpca