Ahojte všetci! Takže teraz viete, ako vytvoriť základné tabuľky pozostávajúce z toľkých riadkov a stĺpcov, koľko je potrebné. Nie zlé, nie zlé. Teraz si povieme niečo o dizajne týchto stolov.

V minulej lekcii boli tabuľky zobrazené bez okrajov. A vidíte, vyzerá to tak, že to ani nemôžete nazvať znakom. Ak chcete vytvoriť okraje tabuľky v HTML, pridajte do značky

atribút hranica, čím má inú hodnotu ako nulu.

Takže urobme okraje na stôl. Napríklad pre ten, ktorý už máme:

Ľavá horná bunka	Pravá horná bunka
Ľavá dolná bunka	Pravá dolná bunka

Výsledok v prehliadači:

Ako odstrániť okraje tabuľky

Na druhej strane, ak chcete odstrániť okraje tabuľky HTML, alebo inak môžete povedať, urobiť ich neviditeľnými, potrebujete atribút hranica nastavená hodnota 0 . Po týchto jednoduchých akciách sa rám odstráni.

Tento atribút vám umožňuje vytvárať, ale nie spravovať hranice. Umožňuje vám len zmeniť ich hrúbku.

Preto teraz budeme hovoriť o css, ktorých vlastnosti to umožňujú s hranica okolo stola ako celku vytvorte rôzne okraje, vo vnútri každej bunky aj vonku.

Pozrime sa, ako použiť CSS na vytvorenie vonkajších a vnútorných hraníc tabuľky.
Ak to chcete urobiť, odstráňte atribút border z našej tabuľky a pridajte štýly:

Ľavá horná bunka	Pravá horná bunka
Ľavá dolná bunka	Pravá dolná bunka

Výsledok v prehliadači:

Teraz pridajte okraje pre každú bunku. Ak to chcete urobiť, stačí pridať štýly:

Výsledok v prehliadači:

Ako odstrániť výplň medzi bunkami v tabuľke HTML

Súhlaste s tým, že hranica uvedená s pomocou CSS, taký nemá vzhľad ako by ste chceli. Z hľadiska estetiky je nepochybne na čom pracovať. Na stránke prehliadača môžete vidieť, že štandardne zobrazuje okraje tabuliek a buniek oddelene. Príklad to jasne ukazuje.

Je však celkom možné zbaviť sa takýchto hraníc, ktoré sa nazývajú dvojité, ak použijete CSS- hraničný majetok- kolaps. V praxi to vyzerá takto:

Tabuľka ( orámovanie: plná 1px modrá; border-collapse: zbalenie; ) ...

V dôsledku toho sa vzdialenosť medzi bunkami odstráni:

Hodnota zbalenia priradená atribútu border vám umožňuje odstrániť dvojité okraje. Ako vidíte, výsledkom je "zrútenie" susedných okrajov buniek, ako aj okrajov buniek a vonkajšieho okraja tabuľky. Pokiaľ ide o druhú, možno ju úplne odstrániť. A ak je potrebné ho zobraziť, je potrebné zväčšiť jeho šírku. Tým sme sa zbavili oddeľovačov v tabuľke. A v ďalšej lekcii si povieme, ako môžete nastaviť vertikálne a horizontálne hranice. Veľa šťastia všetkým!

Takže sme s vami študovali najjednoduchšie akcie, ktoré je možné vykonať s okrajmi tabuľky. A teraz stôl vyzerá oveľa estetickejšie. Výplň buniek však priamo spočíva na hraniciach. Dá sa to jednoducho opraviť jednoduchým odsadením buniek v tabuľke HTML. A potom bude text vo vnútri rámu, v bunke, čitateľnejší.

Ak chcete odsadiť bunku, použite atribút čalúnenie buniek pre značku

. Existuje však iná, preferovanejšia možnosť: css.

V tomto prípade sú zarážky nastavené pomocou vlastnosti vypchávka. S jeho pomocou nebude ťažké odsadiť tam, kde je to potrebné, to znamená zhora, doprava, zdola alebo doľava, a to pomocou jednej z týchto vlastností: vypchávkový vrch, čalúnenie vpravo, polstrovanie-dno a polstrovanie-vľavo.

Môžete presne nastaviť, koľko pixelov má byť odsadené. Uveďme príklad, v ktorom bude spodná zarážka 20 pixelov a všetko ostatné bude 10 . Takéto css-kód bude vyzerať takto:

Td ( padding: 10px; padding-bottom: 20px; )

A úplný kód štýlu v tejto fáze:

Tabuľka ( orámovanie: plný 1px modrý; border-collapse: zbalenie; ) td ( orámovanie: plný 1px modrý; výplň: 10px; padding-bottom: 20px; )

Výsledok v prehliadači:

Výplň medzi bunkami

Úlohy spojené s vytváraním tabuliek je možné spravidla riešiť pomocou značiek, atribútov a vlastností, ktoré vám umožňujú vytvárať rámce, zarážky v bunkách a tiež nastavovať farebné pozadie samotné bunky.

Zarážky v tabuľkách nie sú len vo vnútri buniek. Môžu byť prítomné aj medzi samotnými bunkami.

Existujú dve možnosti odsadenia buniek:

1. pomocou atribútu rozmiestnenie buniek pre značku

.

použitím css-vlastnosti ohraničenie.

Treba zdôrazniť, že ohraničenie sa píše za tabuľku ako celok, pričom majetok vypchávka sa zapisuje priamo do buniek.

Pozrime sa na príklad:

Tabuľka ( orámovanie: plný 1px modrý; orámovanie-zbalenie: oddelené; rozstup medzi okrajmi: 5px; ) td ( orámovanie: plný 1px modrý; výplň: 10px; výplň dole: 20px; )

A k výslednému výsledku:

Okamžite stanovíme, že nie je potrebné pokúšať sa robiť takéto zarážky pomocou border-collapse: kolaps. Pri použití tejto možnosti sa bunky skutočne „prilepia“ k sebe.

A aby ste ich udržali oddelene od seba, mali by ste použiť border-collapse: samostatné. Je dôležité pochopiť, že táto hodnota je predvolená hodnota. A používa sa len na vizuálne znázornenie toho, ako sa tento problém rieši. Ak tento riadok vymažeme, výsledok vo forme buniek umiestnených oddelene od seba sa uloží.

Uvažovali sme o mnohých spôsoboch úpravy takých prvkov na stránke, ako sú textové informácie, odkazy, obrázky, nadpisy, ale to všetko stále nestačí. Vo svojich článkoch často používam HTML prvky, ako sú tabuľky, pretože sú vo väčšine prípadov pomôcť pri systematizácii dôležitá informácia a zjednodušiť doručenie.

V tomto článku vám predstavím zložitosť stylingu HTML tabuľky a naučíte sa nové vlastnosti CSS navrhnuté na dosiahnutie týchto cieľov.

Hypertextový značkovací jazyk HTML nám poskytol veľké množstvo možností väzby CSS štýly k desiatim jedinečným značkám navrhnutým na prácu s tabuľkami navrhujem zopakovať ich pred ďalším štúdiom:

(„päta“ tabuľky) farba pozadia – koralový, pre prvok ("hlavička" tabuľky) nastavte farbu pozadia striebro.

Pre prvky

, ktoré sú vo vnútri prvku (telo tabuľky) nastavte farbu pozadia tak, aby sa zmenila pri umiestnení kurzora myši (pseudo class :vznášať sa) c biely podľa farby kaki(zvýrazní sa celý riadok).

Výsledok nášho príkladu:

Ryža. 153 Príklad štýlu riadkov v tabuľkách

Nasledujúci príklad sa zaoberá aplikáciou zaoblenia rohov na bunky tabuľky (vlastnosť).

) spodnú výplň nastavíme na 19 pixelov. Dúfam, že sa nepletú nepárne čísla :)

Výsledok nášho príkladu:

Medzera medzi bunkami

Po vyššie uvedenom príklade ste si mohli všimnúť, že medzi všetkými bunkami v tabuľke máme stále medzeru. Pozrime sa, ako odstrániť medzeru medzi bunkami tabuľky alebo ju zväčšiť.

Ak chcete nastaviť vzdialenosť medzi okrajmi susedných buniek, musíte použiť vlastnosť CSS - ohraničenie.

border-spacing: 30px 10px;

1	2	3
2
3

ohraničenie: 0;

1	2	3
2
3

rozstup okrajov: 0,2 em;

1	2	3
2
3

V tomto príklade:

• plavák:vľavo). Ak ste vynechali tému plávajúcich prvkov, vždy sa k nej môžete vrátiť v tomto návode - "".
• Okrem toho nastavíme pravý okraj tabuliek na 30px a nastavíme vertikálne zarovnanie tabuliek (horná časť prvku je zarovnaná s hornou časťou najvyššieho prvku). K podrobnej diskusii o tejto vlastnosti sa vrátime v tomto článku.

) je tučné.

Pre bunky tabuľky (záhlavie a dátové bunky) nastavíme pevný okraj 1 px s farbou #F50 a nastavíme výplň na 19 px na všetkých stranách.

Za prvý stôl s triedou .najprv nastavíme medzeru medzi bunkami tabuľky (vlastnosť ohraničenie) rovná 30px 10px pre druhú tabuľku s triedou .druhý rovná nule, pre tretiu tabuľku s triedou .tretie rovná 0,2 em .

Dávam do pozornosti, že ak v nehnuteľnosti ohraničenie je zadaná iba jedna hodnota dĺžky, potom označuje intervaly, horizontálne aj vertikálne, a ak sú špecifikované dve hodnoty dĺžky, potom prvá určuje horizontálnu vzdialenosť a druhá vertikálnu. Vzdialenosť medzi okrajmi susedných buniek môže byť špecifikovaná v jednotkách CSS (px, cm, em atď.). Záporné hodnoty nie sú povolené.

Výsledok nášho príkladu:

Zobraziť okraje okolo buniek tabuľky

Môžeš povedať: - takže sme pomocou vlastnosti odstránili medzeru medzi bunkami ohraničenie s hodnotou 0 , ale prečo máme teraz hranice buniek, ktoré sa pretínajú?

Dvojité orámovanie sa tvorí vďaka tomu, že spodný okraj jednej bunky sa pridáva k hornému okraju bunky pod ňou, podobná situácia nastáva aj po stranách buniek a je to logické z hľadiska zobrazenia tabuľky, ale našťastie tam je spôsob, ako povedať prehliadaču, že nechceme vidieť také drzé správanie okrajov buniek.

Na to musíte použiť Vlastnosť CSS border-collapse. Napodiv, ale pomocou majetku border-collapse s hodnotou kolapsu je najlepšia cesta ako môžem odstrániť medzeru medzi bunkami a zároveň medzi nimi nezískať dvojité okraje.

Zvážte porovnanie správania okrajov pri používaní vlastnosti ohraničenie s hodnotou 0 a vlastnosťami border-collapse s hodnotou kolapsu:

ohraničenie: 0;

1	2	3
2
3

border-collapse: kolaps;

1	2	3
2
3

V tomto príklade:

• Urobili sme naše stoly plávajúcimi a posunuli sme sa doľava ( plavák: left), nastavte ich pravý okraj na 30px.
• Nastavte pre názov tabuľky (tag

) je tučné.

Pre bunky tabuľky (záhlavie a dátové bunky) nastavíme 5px plné orámovanie s hex farbou #F50 a nastavíme pevnú šírku 50px a výšku 75px.

Za prvý stôl s triedou .najprv nastavíme medzery medzi bunkami tabuľky na nulu (border-spacing : 0 ;) a pre druhú tabuľku s triedou .druhý nastaviť vlastnosť border-collapse s hodnotou zbaliť , ktorá zlúči okraje buniek do jedného, ​​ak je to možné.

Výsledok nášho príkladu:

Správanie prázdnych buniek

Pomocou CSS môžete nastaviť, či sa majú zobraziť okraje a pozadie prázdnych buniek v tabuľke alebo nie. Za toto správanie je zodpovedný majetok. prázdne bunky, ktorý štandardne, ako ste si mohli všimnúť z predchádzajúcich príkladov, zobrazuje prázdne bunky.

Prejdime na príklad:

prázdne bunky: zobraziť;

1	2	3
2		☺
3	☺

prázdne bunky: skryť;

1	2	3
2		☺
3	☺

Pochopte, ako nehnuteľnosť funguje prázdne bunky z tohto príkladu je veľmi jednoduché, ak je nastavené na skrytie, prázdne bunky a pozadie v nich budú skryté, ak je nastavené na show (predvolené), budú zobrazené.

Umiestnenie hlavičky tabuľky

Pozrime sa na ďalšiu jednoduchú vlastnosť pre štylizáciu stola - strana s titulkami, ktorým sa nastavuje poloha hlavičky tabuľky (nad alebo pod tabuľkou). Predvolená vlastnosť strana s titulkami je top , čo umiestňuje názov nad tabuľku. Ak chcete umiestniť hlavičku pod tabuľku, musíte použiť vlastnosť s hodnotou bottom .

Pozrime sa na príklad použitia tejto vlastnosti:

Nadpis nad tabuľkou

názov	cena
Ryby	350 rubľov
Mäso	250 rubľov

Titul pod stolom

názov	cena
Ryby	350 rubľov
Mäso	250 rubľov

V tomto príklade sme vytvorili dve triedy, ktoré riadia umiestnenie hlavičky tabuľky. Prvá trieda ( .topCaption) umiestni hlavičku tabuľky nad ňu, aplikovali sme ju na prvú tabuľku a druhú triedu ( .bottomCaption) umiestni hlavičku tabuľky pod ňu, aplikovali sme ju na druhú tabuľku. Trieda .topCaption hodnotu nehnuteľnosti strana s titulkami predvolené a vytvorené na demonštračné účely.

Výsledok nášho príkladu:

Horizontálne a vertikálne zarovnanie

Vo väčšine prípadov pri práci s tabuľkami budete musieť upraviť zarovnanie obsahu v hlavičke a dátových bunkách. Nehnuteľnosť zarovnanie textužiada sa oň horizontálne zarovnanie podobný akokoľvek textové informácie. O použití tejto vlastnosti pre text sme uvažovali skôr v článku „“.

Ak chcete nastaviť zarovnanie obsahu v bunkách, musíte použiť špeciálne kľúčové slová s vlastnosťou zarovnanie textu. Zvážte aplikáciu Kľúčové slová túto vlastnosť v nasledujúcom príklade.

Význam	Popis
vľavo	Zarovná text bunky doľava. Toto je predvolená hodnota (ak je smer textu zľava doprava).
správny	Zarovná text bunky doprava. Toto je predvolená hodnota (ak je smer textu sprava doľava).
stred	Zarovná text bunky na stred.
ospravedlniť	Roztiahne riadky tak, aby mal každý riadok rovnakú šírku (roztiahne text bunky tak, aby sa zmestil na šírku).

V tomto príklade sme vytvorili štyri triedy, ktorý nastavil rôzne horizontálne zarovnania v bunkách a aplikoval ich v poradí na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti zarovnanie textu

Výsledok nášho príkladu:

Okrem horizontálneho zarovnania môžete pomocou vlastnosti definovať aj vertikálne zarovnanie v bunkách tabuľky vertikálne zarovnať.

Upozorňujeme, že pri práci s bunkami tabuľky platia iba nasledujúce * hodnoty tejto vlastnosti:

* - Hodnoty Sub , super , text-top , text-bottom , length a % ​​aplikované na bunku tabuľky sa budú správať ako pri použití základnej hodnoty.

Zoberme si príklad použitia:

Význam	Popis
základná línia	Zarovná základnú čiaru bunky so základnou čiarou nadradenej bunky. Toto je predvolená hodnota.
top	Zarovná obsah bunky zvisle nahor.
stredná	Zarovná obsah bunky vertikálne na stred.
dno	Zarovná obsah bunky zvisle nadol.

V tomto príklade sme vytvorili štyri triedy, ktorý nastavil rôzne vertikálne zarovnania v bunkách a použil ich na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti vertikálne zarovnať, ktorý bol aplikovaný na tento riadok.

Algoritmus na umiestnenie rozloženia tabuľky prehliadačom

CSS štandardne používa algoritmus automatického rozloženia tabuľky prehliadača. V tomto prípade šírka stĺpca sa nastavuje podľa najširšieho neprerušiteľného obsahu bunky. Tento algoritmus môže byť v niektorých prípadoch pomalý, pretože prehliadač si musí prečítať celý obsah tabuľky pred určením jej konečného rozloženia.

Ak chcete zmeniť typ rozloženia rozloženia tabuľky prehliadačom pomocou automatické na pevné, musíte použiť vlastnosť CSS rozloženie tabuľky s pevnou hodnotou.

V tomto prípade závisí iba horizontálne umiestnenie na šírku tabuľky a šírku stĺpcov, nie na obsah buniek. Prehliadač začne vykresľovať tabuľku hneď po prijatí prvého riadku. V dôsledku toho vám pevný algoritmus umožňuje vytvoriť rozloženie takejto tabuľky rýchlejšie ako pri použití automatickej možnosti. Pri práci s veľkými tabuľkami môžete na zvýšenie výkonu použiť pevný algoritmus.

Pozrime sa na použitie tejto vlastnosti na nasledujúcom príklade:

rozloženie tabuľky: auto;

názov	2009	2010	2011	2012	2013	2014	2015	2016
Pšenica	125	215	2540	33287	695878	1222222	125840000	125

rozloženie stola: pevné;

názov	2009	2010	2011	2012	2013	2014	2015	2016
Pšenica	125	215	2540	33287	695878	1222222	125840000	125

V tomto príklade:

Úprava štýlu riadkov a stĺpcov tabuľky

Vy a ja sme sa už čiastočne dotkli spôsobov úpravy riadkov a stĺpcov tabuľky v článku „“. V tomto článku sme sa zamerali na použitie skupinovej pseudotriedy, ktorá vám umožňuje vkladať štýly riadkov do tabuliek pomocou hodnôt dokonca (čestný) a zvláštny (zvláštny), alebo základnými matematický vzorec.

Vráťme sa k technikám, ktorým sme sa doteraz venovali, a preskúmajme nové spôsoby štýlovania riadkov a stĺpcov v tabuľkách. Prejdime na príklady.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

V tomto príklade:

Výsledok nášho príkladu:

Prejdime k ďalšiemu príkladu, v ktorom zvážime možnosti úpravy riadkov tabuľky.

servis	cena
Sum	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

V tomto príklade:

• Nastavte šírku tabuľky na 100 % šírky nadradený prvok, pre hlavičkové a dátové bunky nastavte pevný okraj so šírkou 1px .
• Sada pre prvok

Tag	Popis
. Definuje obsah tabuľky. Určuje názov tabuľky. Definuje bunku hlavičky tabuľky. Definuje riadok tabuľky. Definuje dátovú bunku tabuľky. Používa sa na zahrnutie hlavičky skupiny v tabuľke (hlavička tabuľky). Používa sa na uloženie „tela“ tabuľky. Používa sa na obsiahnutie „päty“ tabuľky (päty). Definuje vlastnosti daného stĺpca pre každý stĺpec v rámci značky Definuje skupinu stĺpcov v tabuľke. Práca s odrážkami v tabuľke Zarážky tabuľky 1 2 3 4 2 3 4 AT tento príklad my: Stôl sme umiestnili do stredu pomocou metódy horizontálneho centrovania s vonkajšími zárezmi ( marža: 0 automaticky). Pre názov tabuľky (tag

1	2	3	4	5

V tomto príklade:

• Tabuľku vycentrujte s vonkajšími okrajmi, nastavte šírku a výšku buniek hlavičky na 50 pixelov, zadané transparentný okraj 5 pixelov.
• Zistil som, že pri vznášaní sa (pseudotrieda :vznášať sa) v bunke hlavičky získa pozadie Modrá farby, Oranžová farba textu, orámovanie oranžová farby 5 pixelov a polomer zaoblenia 100 % .
• priehľadný okraj je potrebné na rezerváciu miesta pre hranicu, ktorá sa zobrazí pri umiestnení kurzora myši, ak sa tak nestane, tabuľka „preskočí“.

Výsledok nášho príkladu:

Nasledujúci príklad sa týka pomocou HTML prvkov a a ich styling.

Prihláška č.	servis	cena, rub.	Celkom
1	Spev	6 000	6 000
2	umývanie riadu	2 000	2 000
3	Upratovanie	1 000	1 000
4	Dotieravý	1 500	1 500
5	Čítanie	3 000	3 000

V tomto príklade:

Výsledok nášho príkladu:

A posledný príklad, ktorý je dosť náročný na pochopenie a vyžaduje pokročilé znalosti CSS, keďže sa dotýka budúcich tém plánovaných na podrobné štúdium v ​​rámci tohto kurzu.

V predchádzajúcom príklade sme si uvedomili, že element HTML môžete použiť iba jednu vlastnosť CSS - farbu pozadia ( farba pozadia), ale zároveň nastavte farbu pozadia na vznášanie sa (pseudotrieda :vznášať sa) nemožno priamo použiť na tento prvok. V tomto príklade sa pozrieme na to, ako zvýrazniť stĺpec tabuľky iba pomocou CSS.

Prihláška č.	servis	cena, rub.	Celkom
1	Spev	6 000	6 000
2	umývanie riadu	2 000	2 000
3	Upratovanie	1 000	1 000
4	Dotieravý	1 500	1 500
5	Čítanie	3 000	3 000

V tomto príklade:

• Nastavili sme, že naša tabuľka zaberá 100 % nadradeného prvku, bunky tabuľky zaberajú 25 % nadradeného prvku a majú plné zelené ohraničenie 1 pixel, výška hlavičky a dátových buniek je 45 px . Pomocou vlastnosti sme odstránili medzeru medzi bunkami border-collapse so zmyslom .
• A tak pomocou pseudoprvku ::po pridajte obsah po každom prvku vznášať sa. Pseudo prvok ::po musí byť užívaný spolu s nehnuteľnosťou obsahu, vďaka čomu vložíme prvok bloku, ktorý má farbu pozadia lesná zeleň a má absolútne umiestnenie.
• Absolútna poloha je tu potrebná na odsadenie prvku vzhľadom k danej hrane jeho predka, pričom predok musí mať hodnotu pozíciu odlišné od predvoleného - statické , inak bude počet relatívny k zadanému okraju okna prehliadača, z tohto dôvodu sme pre tabuľku nastavili relatívne umiestnenie(príbuzný).
• Nastavíme vlastnosť pre náš vygenerovaný blok top, ktorý určuje smer odsadenia umiestneného prvku od horného okraja a vlastnosť dno A, ktoré určuje smer, v ktorom je umiestnený prvok odsadený od spodného okraja. Obe vlastnosti boli nastavené na 0 , čiže blok úplne zaberie prvok zo spodnej a hornej časti tabuľky, šírka tohto bloku bola nastavená na 25%, táto hodnota zodpovedá hodnote šírky samotnej bunky.
• A posledná vlastnosť, ktorú sme nastavili pre tento blok: z-index s hodnotou "-1" určuje poradie, v ktorom sú umiestnené umiestnené prvky os Z. Táto vlastnosť je potrebná, aby bol text pred týmto blokom a nie za ním, ak nenastavíte hodnotu menšiu ako nula, blok text uzavrie.

Výsledok nášho príkladu:

Ak v tejto fáze štúdie nerozumiete procesu polohovania prvkov, nenechajte sa odradiť, je to ťažko pochopiteľná téma, ktorú sme tiež nezvažovali, ale určite sa ňou budeme zaoberať v ďalšom článku návod" Polohovacie prvky v CSS ".

Otázky a úlohy k téme

Skôr než prejdete na ďalšiu tému, dokončite praktickú úlohu:

Ak máte ťažkosti robiť praktická úloha, Príklad môžete vždy otvoriť v samostatnom okne a prezrieť si stránku, aby ste videli, aké CSS bolo použité.

2016-2020 Denis Bolshakov, môžete na stránku posielať pripomienky a návrhy na adresu [email protected]

Samotné tabuľky vyzerajú dosť "chudobne", okrem toho prehliadače zobrazujú niektoré vlastnosti tabuliek svojim vlastným spôsobom, najmä rámy. Tieto nedostatky sa však dajú ľahko napraviť pomocou sily štýlov. Zároveň sú výrazne rozšírené nástroje na navrhovanie tabuliek, čo vám umožňuje úspešne zapadnúť tabuľky do dizajnu lokality a prehľadnejšie prezentovať tabuľkové údaje.

Farba pozadia bunky

Farba pozadia všetkých buniek tabuľky súčasne sa nastavuje prostredníctvom vlastnosti pozadia, ktorá sa aplikuje na selektor TABUĽKA. Zároveň by ste si mali pamätať na pravidlá používania štýlov, najmä na dedenie vlastností prvkov. Hoci vlastnosť pozadia sa nededí, predvolená hodnota pozadia pre bunky je transparentná, t.j. priehľadnosť, takže efekt vyplnenia pozadia sa získa aj pre bunky. Ak zadáte farbu pre selektor TD alebo TH súčasne s TABLE, potom sa táto farba nastaví ako pozadie bunky (príklad 2.3).

Príklad 2.3. Farba pozadia

Nadpis 1	Nadpis 2
Bunka 3	Bunka 4

V tomto príklade získame modrú farbu pozadia buniek (tag ) a červenou farbou v názve (tag ). Je to preto, že štýl pre selektor TH nie je definovaný, takže pozadie rodiča, v tomto prípade selektora TABLE, je "prezreté". A farba pre volič TD je špecifikovaná explicitne, takže bunky sú „vyplnené“ modrou farbou.

Výsledok tohto príkladu je znázornený na obr. 2.4.

Ryža. 2.4. Zmena farby pozadia

Okraje vo vnútri buniek

Okraj je vzdialenosť medzi okrajom obsahu bunky a jej okrajom. Zvyčajne sa na tento účel používa atribút cellpadding značky.

. Definuje hodnotu okraja v pixeloch na všetkých stranách bunky. Vlastnosť štýlu výplne môžete použiť tak, že ju pridáte do selektora TD, ako je uvedené v príklade 2.4.

Príklad 2.4. Polia v tabuľkách

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Nadpis 1	Nadpis 2
Bunka 3	Bunka 4

V tomto príklade zoskupením selektorov sú polia nastavené súčasne pre selektor TD a TH . Výsledok príkladu je znázornený na obr. 2.5.

Ryža. 2.5. Polia v bunkách

Ak sa vlastnosť štýlu padding aplikuje na bunky tabuľky, potom sa prejaví účinok atribútu cellpadding značky

ignoroval.

Vzdialenosť medzi bunkami

Ak chcete zmeniť medzery medzi bunkami, použite atribút cellspacing značky

. Účinok tohto atribútu je jasne viditeľný pri použití okrajov okolo buniek alebo pri vypĺňaní buniek farbou, ktorá vyniká na pozadí stránky. Rozstup buniek je nahradený vlastnosťou štýlu border-spacing, ktorá nastavuje vzdialenosť medzi okrajmi buniek. Jedna hodnota nastavuje vertikálnu aj horizontálnu vzdialenosť medzi okrajmi buniek. Ak má táto vlastnosť dve hodnoty, potom prvá definuje horizontálnu vzdialenosť (t. j. vľavo a vpravo od bunky) a druhá určuje vertikálnu vzdialenosť (hore a dole).

Vlastnosť border-spacing má účinok iba vtedy, ak selektor TABLE nemá nastavené zbalenie okraja na zbalenie (príklad 2-5).

Príklad 2.5. Vzdialenosť medzi okrajmi buniek

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ýsledok tohto príkladu je znázornený na obr. 2.6.

Ryža. 2.6. Vzhľad tabuľky pri použití okrajov

internetový prehliadač Prieskumník do verzie 7 vrátane nepodporuje vlastnosť border-spacing, takže tento prehliadač použije predvolenú hodnotu cellspace pre tabuľky (zvyčajne 2px).

Keď do selektora TABLE pridáte vlastnosť border-collapse s hodnotou zbalenia, atribút cellspacing sa ignoruje a hodnota border-spacing sa nastaví na nulu.

Hranice a rámy

V predvolenom nastavení nie je v tabuľke na začiatku žiadne orámovanie a pridáva sa pomocou atribútu border značky

. Prehliadače zobrazujú takúto hranicu rôznymi spôsobmi, preto je lepšie tento atribút vôbec neurčovať a kresbu okrajov priradiť štýlom. Pozrime sa na dve metódy priamo súvisiace so štýlmi.

Použitie atribútu cellspacing

Je známe, že atribút cellspacing značky

nastavuje vzdialenosť medzi bunkami tabuľky. Ak pre tabuľku a bunky použijete inú farbu pozadia, potom sa medzi bunkami objaví mriežka čiar, ktorej farba zodpovedá farbe tabuľky a hrúbka sa rovná hodnote atribútu cellspacing v pixeloch. Príklad 2.3 vyššie ukazuje tento efekt, takže ho nebudem opakovať.

Upozorňujeme, že toto nie je veľmi pohodlný spôsob vytvárania hraníc, pretože má obmedzený rozsah. Takto môžete získať iba jednofarebnú mriežku, a nie vertikálnu resp vodorovné čiary na správnych miestach.

Použitie vlastnosti hranice

Vlastnosť štýlu okraja súčasne nastavuje farbu okraja, jeho štýl a šírku okolo prvku. Keď chcete vytvoriť samostatné riadky na rôzne strany, je lepšie použiť deriváty - border-left , border-right , border-top a border-bottom , tieto vlastnosti definujú hranicu vľavo, vpravo, hore a dole.

Aplikovaním vlastnosti border na selektor TABLE pridáme orámovanie okolo tabuľky ako celku a do selektora TD alebo TH pridáme orámovanie okolo buniek (príklad 2-6).

Príklad 2.6. Pridanie dvojitého okraja

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Nadpis 1	Nadpis 2
Bunka 3	Bunka 4

Tento príklad používa čierne dvojité orámovanie okolo samotnej tabuľky a plné biele orámovanie okolo každej bunky. Výsledok príkladu je znázornený na obr. 2.7.

Ryža. 2.7. Ohraničenie okolo stola a buniek

Všimnite si, že v mieste spojenia buniek sa vytvárajú dvojité čiary. Získavajú sa opäť vďaka pôsobeniu atribútu cellspacing tagu

. Hoci sa tento atribút nikde vo vzorovom kóde nevyskytuje, prehliadač ho štandardne používa. Ak nastavíte , potom dostaneme nie dvojité, ale jednoduché čiary, ale dvojnásobnej hrúbky. Ak chcete zmeniť túto funkciu, použite vlastnosť štýlu border-collapse s hodnotou zbaliť , ktorá sa pridá do selektora TABLE (príklad 2.7).

Príklad 2.7. Vytvorenie jedného rámu

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Nadpis 1	Nadpis 2
Bunka 3	Bunka 4

Tento príklad vytvorí plnú zelenú čiaru medzi bunkami a čiernu čiaru okolo tabuľky. Všetky okraje v tabuľke majú rovnakú hrúbku. Výsledok príkladu je znázornený na obr. 2.8.

Ryža. 2.8. Ohraničenie okolo stola

Zarovnanie obsahu bunky

V predvolenom nastavení je text v bunke tabuľky zarovnaný doľava. Výnimkou z tohto pravidla je značka , definuje nadpis, ktorý je zarovnaný na stred. Ak chcete zmeniť metódu zarovnania, použite štýl vlastnosť zarovnania textu(príklad 2.8).

Príklad 2.8. Zarovnajte obsah bunky vodorovne

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Nadpis 1	Bunka 1	Bunka 2
Nadpis 2	Bunka 3	Bunka 4

V tomto príklade obsah značky je zarovnaný doľava a obsah značky - v centre. Výsledok príkladu je uvedený nižšie (obrázok 2.9).

Ryža. 2.9. Zarovnanie textu v bunkách

Vertikálne zarovnanie v bunke je vždy vycentrované, pokiaľ nie je uvedené inak. To nie je vždy vhodné, najmä pre tabuľky, ktorých obsah buniek sa líši vo výške. V tomto prípade je zarovnanie nastavené na horný okraj bunky pomocou vlastnosti vertikálneho zarovnania, ako je znázornené v príklade 2-9.

Príklad 2.9. Zarovnajte obsah bunky vertikálne

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Nadpis 1	Nadpis 2
Bunka 1	Bunka 2

Tento príklad nastavuje výšku hlavičky ako 40 pixelov a zarovnanie textu je dole. Výsledok príkladu je znázornený na obr. 2.10.

Ryža. 2.10. Zarovnanie textu v bunkách

Prázdne bunky

Prehliadače inak zobrazujú bunku, ktorá vo vnútri nič nemá. „Nič“ v tomto prípade znamená, že do bunky nebol pridaný obrázok ani text a priestor sa neberie do úvahy. Prirodzene, vzhľad buniek sa líši iba vtedy, ak je okolo nich nastavený okraj. Pri použití neviditeľného okraja je vzhľad buniek rovnaký, bez ohľadu na to, či v nich niečo je alebo nie.

Staršie prehliadače nezobrazovali farbu pozadia prázdnych buniek zobrazenia , takže v prípade, keď bolo potrebné ponechať bunku bez obsahu, ale zobraziť farbu pozadia, bola do bunky pridaná neoddelená medzera (). Medzera nie je vždy vhodná, najmä ak potrebujete nastaviť výšku bunky na 1-2 pixely, a preto sa rozšírila priehľadná kresba s jedným pixelom. Skutočne, takýto obrázok možno zmenšiť podľa vlastného uváženia, ale na webovej stránke sa nijakým spôsobom nezobrazuje.

Našťastie éra jednopixelových kresieb a na nich založených všelijakých medzikusov pominula. Prehliadače celkom korektne pracujú s tabuľkami bez prítomnosti obsahu buniek.

Na ovládanie vzhľadu prázdnych buniek sa používa vlastnosť prázdnych buniek; pri nastavení na skrytie sa nezobrazuje orámovanie a pozadie v prázdnych bunkách. Ak sú všetky bunky v riadku prázdne, potom je celý riadok skrytý. Bunka sa považuje za prázdnu v nasledujúcich prípadoch:

• neexistujú vôbec žiadne symboly;
• bunka obsahuje iba nový riadok, znak tabulátora alebo medzeru;
• hodnota viditeľnosti je nastavená na skryté.

Pridanie neprerušiteľnej medzery sa považuje za viditeľný obsah, t.j. bunka už nebude prázdna (príklad 2.10).

Príklad 2.10. Prázdne bunky

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Pohľad na tabuľku v prehliadači Safari je na obr. 2.11a. Rovnaká tabuľka v IE7 je znázornená na obr. 2.11b.

a. V prehliadači Safari, Firefox, Opera, IE8, IE9

b. V prehliadači IE7

Ryža. 2.11. Zobrazenie tabuľky s prázdnymi bunkami