Ako odsadiť html tabuľku. Použitie prázdnych buniek

Ahojte všetci! Teraz teda viete, ako vytvoriť základné tabuľky, ktoré sa skladajú z toľko riadkov a stĺpcov, koľko potrebujete. Nie je to zlé, nie je to zlé. Teraz sa porozprávajme o dizajne týchto tabuliek.

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

atribút hranica tým, že mu dáte inú hodnotu ako nulu.

Urobme teda okraje pre stôl. Napríklad pre ten, ktorý už máme:

Ľavá horná bunkaVpravo hore bunka
Vľavo dole bunkaVpravo dole bunka

Výsledok v prehliadači:

Ako odstrániť orámovanie tabuľky

Na druhej strane, na odstránenie okrajov tabuľky HTML, alebo môžete tiež povedať, že sú neviditeľné, potrebujete atribút hranica nastavená hodnota 0 ... Po týchto jednoduchých akciách bude rám odstránený.

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

Preto teraz budeme hovoriť o CSS ktorého vlastnosti to umožňujú s hranica okolo stolu ako celku vytvorte rôzne hranice, a to vo vnútri každej bunky, ako aj mimo nej.

Pozrime sa, ako použiť CSS na vytvorenie vonkajších a vnútorných okrajov tabuľky.
Za týmto účelom odstráňte atribút border z našej tabuľky a pridajte štýly:

Príklad tabuľky

Ľavá horná bunka Vpravo hore bunka
Vľavo dole bunka Vpravo dole bunka

Výsledok v prehliadači:

Teraz pridáme hranice aj pre každú bunku. Ak to chcete urobiť, stačí pridať štýly:

Výsledok v prehliadači:

Ako odstrániť vypchávky medzi bunkami v tabuľke HTML

Súhlaste s tým, že je stanovená hranica pomocou CSS, má niečo iné vzhľad ako by sme chceli. Nepochybne, z hľadiska estetiky je na čom pracovať. Na stránke prehliadača vidíte, že v predvolenom nastavení zobrazuje okraje tabuliek a buniek oddelene. Jasne to ukazuje príklad.

Je však celkom možné zbaviť sa takýchto hraníc, ktoré sa nazývajú dvojité, ak použijeme vlastnosť CSS border-collapse. V praxi to vyzerá takto:

Tabuľka (orámovanie: plná 1 pixelov modrá; hraničné zbalenie: zbaliť;) ...

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

Hodnota zbalenia priradená k atribútu border odstráni dvojité ohraničenie. 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 ten druhý, dá sa úplne odstrániť. A ak je potrebné ho zobraziť, musíte 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ť zvislé a vodorovné ohraničenie. Veľa šťastia všetkým!

Uvažovali sme o mnohých metódach štýlu prvkov na stránke, ako sú textové informácie, odkazy, obrázky, nadpisy, ale to všetko ešte nestačí. Vo svojich článkoch často používam prvky HTML, ako sú tabuľky, pretože vo väčšine prípadov sú pomôcť systematizovať dôležitá informácia a uľahčiť obsluhu.

V tomto článku vás zoznámim so zložitosťou úpravy tabuliek HTML 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 príležitostí na väzbu štýlov CSS na desať jedinečných značiek navrhnutých na prácu s tabuľkami, preto ich odporúčam pred ďalšou štúdiou zopakovať:

("Päta" tabuľky) farba pozadia - koralový, pre prvok („Hlavička“ tabuľky) nastavte farbu pozadia striebro.
  • Na položky
    • ktoré sú vo vnútri prvku (telo tabuľky) nastaviť zmenu farby pozadia pri vznášaní (pseudotrieda: hover) c biely podľa farby khaki(celý riadok je zvýraznený).

    Výsledok nášho príkladu:

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

    Nasledujúci príklad ukazuje, ako použiť zaokrúhľovanie rohov na bunky tabuľky (vlastnosť).

    Príklad zaoblenia rohov bunky
    OznačiťPopis
    .
    Definuje obsah tabuľky.
    Určuje názov tabuľky.
    Definuje bunku hlavičky tabuľky.
    Definuje riadok v tabuľke.
    Definuje údajovú bunku tabuľky.
    Používa sa na zahrnutie záhlavia skupiny v tabuľke (nadpis tabuľky).
    Slúži na obsiahnutie „tela“ tabuľky.
    Používa sa na zahrnutie „päty“ tabuľky (päty).
    Definuje zadané vlastnosti stĺpcov pre každý stĺpec v rámci značky
    Definuje skupinu stĺpcov v tabuľke.

    Práca so zarážkami tabuľky

    Použitie vypchávky v tabuľke
    Odsadenie tabuľky
    1 2 3 4
    2
    3
    4

    V. tento príklad my:

    • Stôl umiestnite do stredu pomocou techniky horizontálneho zarovnania okraje(okraj: 0 auto).
    • Názov tabuľky (tag
    ) nastavíme spodné vypchávky na 19 pixelov. Dúfam, že nie ste zmätení nerovnomernými číslami :)

    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 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 - medzery medzi okrajmi.

    Zmeňte medzery medzi tabuľkami
    medzery medzi okrajmi: 30 pixelov 10 pixelov;
    1 2 3
    2
    3
    medzery medzi okrajmi: 0;
    1 2 3
    2
    3
    medzery medzi okrajmi: 0,2 em;
    1 2 3
    2
    3

    V tomto prípade sme:

    • plavák: vľavo). Ak vám téma plávajúcich prvkov unikla, v tomto návode sa k nej môžete kedykoľvek vrátiť - „“.
    • Navyše nastavíme čalúnenie stola vpravo na 30 pixelov a nastavíme zvislé zarovnanie tabuliek (horná časť prvku je zarovnaná s hornou časťou najvyššieho prvku). V tomto článku sa k tejto vlastnosti podrobne vrátime.
    ) - tučné.
  • Pre bunky tabuľky (bunky záhlavia a údajov) sme nastavili 1 pixelové pevné ohraničenie s hexadecimálnym číslom # F50 a výplň nastavili na 19 pixelov pre všetky strany.
  • Na prvú tabuľku s triedou .najprv medzery medzi bunkami tabuľky (vlastnosť medzier) nastavíme na 30 pixelov 10 pixelov, pre druhú tabuľku s triedou .sekunda rovná nule, pre tretiu tabuľku s triedou . tretie rovná sa 0,2em.

    • Upozorňujeme vás na skutočnosť, že ak je vo vlastnosti border-spacing uvedená iba jedna hodnota dĺžky, potom označuje rozstupy, horizontálne aj vertikálne, a ak sú zadané dve hodnoty dĺžky, potom prvá určuje horizontálnu vzdialenosť. , a druhá vertikála. Vzdialenosť medzi okrajmi susedných buniek je možné zadať v jednotkách CSS (px, cm, em, atď.). Záporné hodnoty nie sú povolené.

    Výsledok nášho príkladu:

    Zobrazenie okrajov okolo buniek tabuľky

    Môžeš povedať: - takže sme odstránili medzery medzi bunkami pomocou vlastnosti border-spacing s hodnotou 0, ale prečo máme teraz hranice buniek krížiace sa?

    Dvojité okraje sa vytvárajú kvôli tomu, že spodný okraj jednej bunky je pridaný k hornému okraju bunky, ktorá je pod ňou, k podobnej situácii dochádza na stranách buniek a je to logické z hľadiska zobrazovania. tabuľka, ale našťastie existuje spôsob, ako prehliadaču povedať, že sme. Nechceme vidieť také drzé správanie hraníc buniek.

    Na to musíte použiť Vlastnosť CSS hraničný kolaps. Je zvláštne, že použitie vlastnosti border-collaps s hodnotou kolapsu je najlepší spôsob, ako odstrániť medzeru medzi bunkami bez toho, aby ste dostali dvojité hranice medzi nimi.

    Zvážte porovnanie správania pri ohraničení pri použití vlastnosti medzery medzi hranicami s hodnotou 0 a vlastnosti zrútenia okraja s hodnotou zbalenia:

    Príklad zobrazenia okrajov okolo buniek tabuľky
    medzery medzi okrajmi: 0;
    1 2 3
    2
    3
    hraničný kolaps: kolaps;
    1 2 3
    2
    3

    V tomto prípade sme:

    • Naše stoly boli nastavené tak, aby boli zarovnané doľava a zarovnané doľava (plávajúce: vľavo), pričom ich pravý okraj bol nastavený na 30 pixelov.
    • Nastaviť pre názov tabuľky (tag
    ) - tučné.
  • Pre bunky tabuľky (bunky záhlavia a údajov) sme nastavili 5px plné orámovanie s # F50 hex a nastavili pevnú šírku 50px a výšku 75px.
  • Na prvú tabuľku s triedou .najprv medzery medzi bunkami tabuľky nastavíme na nulu (medzery medzi okrajmi: 0;) a pre druhú tabuľku s triedou .sekunda nastavte vlastnosť border-collaps na zbalenie, ktorá podľa možnosti zlúči ohraničenie buniek do jedného.

    • Výsledok nášho príkladu:

    Správanie prázdnych buniek

    Pomocou CSS môžete nastaviť, či sa majú prázdne bunky v tabuľke zobrazovať ohraničenia a pozadia alebo nie. Za toto správanie je zodpovedná vlastnosť prázdnych buniek, ktorá v predvolenom nastavení, ako ste si mohli všimnúť z predchádzajúcich príkladov, zobrazuje prázdne bunky.

    Prejdeme k príkladu:

    Príklad zobrazenia prázdnych buniek tabuľky
    prázdne bunky: show;
    1 2 3
    2 ☺
    3 ☺
    prázdne bunky: skryť;
    1 2 3
    2 ☺
    3 ☺

    Pochopenie fungovania vlastnosti prázdnych buniek z tohto príkladu je veľmi jednoduché. Ak je nastavený na skrytie, prázdne bunky a pozadie v nich budú skryté, ak sú nastavené na zobrazenie (predvolené), zobrazia sa.

    Umiestnenie hlavičky tabuľky

    Pozrime sa na ďalšiu jednoduchú vlastnosť štýlov tabuliek - stranu s titulkami, ktorá nastavuje pozíciu titulku tabuľky (nad alebo pod tabuľkou). Predvolene je vlastnosť na strane titulkov nastavená na začiatok, čím sa nadpis umiestni nad tabuľku. Ak chcete umiestniť názov pod tabuľku, musíte použiť vlastnosť s najnižšou hodnotou.

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

    Príklad použitia vlastnosti na strane titulkov
    Nadpis nad tabuľkou
    názovcena
    Ryba350 rubľov
    Mäso250 rubľov

    Nadpis pod tabuľkou
    názovcena
    Ryba350 rubľov
    Mäso250 rubľov

    V tomto prípade sme vytvorili dve triedy ktoré riadia polohu hlavičky tabuľky. Prvá trieda ( .topCaption) umiestni nad ňu názov tabuľky, použili sme ju na prvú tabuľku a druhú triedu ( .bottomCaption) umiestni pod ňu názov tabuľky, použili sme ju na druhú tabuľku. Trieda .topCaption má predvolenú vlastnosť na strane titulkov a bol vytvorený na demonštračné účely.

    Výsledok nášho príkladu:

    Horizontálne a vertikálne zarovnanie

    Pri práci s tabuľkami budete vo väčšine prípadov musieť upraviť zarovnanie obsahu v bunkách hlavičky a údajov. Vlastnosť zarovnania textu sa používa na horizontálne zarovnanie podobné akýmkoľvek textovým informáciám. O použití tejto vlastnosti pre text sme diskutovali skôr v článku „“.

    Ak chcete nastaviť zarovnanie pre obsah v bunkách, musíte použiť špeciálne kľúčové slová s vlastnosťou zarovnania textu. Uvažujme o použití kľúčových slov tejto vlastnosti v nasledujúcom príklade.

    Príklad horizontálneho zarovnania v tabuľke
    VýznamPopis
    vľavoZarovná text bunky doľava. Toto je predvolené nastavenie (ak je smer textu zľava doprava).
    správnyZarovná text bunky doprava. Toto je predvolené nastavenie (ak je smer textu sprava doľava).
    centrumZarovná text bunky so stredom.
    ospravedlniťRoztiahne riadky tak, aby každý riadok mal rovnakú šírku (roztiahne text bunky tak, aby zodpovedal šírke).

    V tomto prípade sme vytvorili štyri triedy, ktoré nastavili rôzne horizontálne zarovnania v bunkách a použili ich v poradí na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti zarovnania textu

    Výsledok nášho príkladu:

    Okrem vodorovného zarovnania môžete v bunkách tabuľky definovať aj zvislé zarovnanie pomocou vlastnosti zvislé zarovnanie.

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

    * -Hodnoty sub, super, text hore, text dole, dĺžka a% aplikované na bunku tabuľky sa budú správať, ako keby používali východiskovú hodnotu.

    Pozrime sa na príklad použitia:

    Príklad zvislého zarovnania v tabuľke
    VýznamPopis
    základná líniaZarovnáva základnú líniu bunky so základnou líniou rodiča. Toto je predvolené nastavenie.
    horeZarovnáva obsah bunky vertikálne k hornej časti.
    strednýZarovnáva obsah bunky vertikálne v strede.
    dnoZarovnáva obsah bunky vertikálne nadol.

    V tomto prípade sme vytvorili štyri triedy, ktoré nastavili rôzne zvislé zarovnania v bunkách a použili ich v poradí na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti zvislého zarovnania, ktorá bola použitá na daný riadok.

    Algoritmus pre umiestnenie rozloženia tabuľky v prehliadači

    CSS predvolene používa algoritmus automatického rozloženia tabuľky v prehliadači. V tomto prípade šírka stĺpca je stanovená najširším neporušeným obsahom bunky. Tento algoritmus môže byť v niektorých prípadoch pomalý, pretože prehliadač musí pred určením konečného rozloženia prečítať všetok obsah v tabuľke.

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

    V tomto prípade závisí horizontálne umiestnenie iba od zo šírky tabuľky a šírky stĺpcov, a nie z obsahu buniek. Prehliadač začne zobrazovať tabuľku bezprostredne po prijatí prvého riadka. V dôsledku toho vám pevný algoritmus umožňuje vytvoriť rozloženie takejto tabuľky rýchlejšie ako pomocou automatickej verzie. Pri práci s veľkými tabuľkami môžete na zvýšenie výkonu použiť pevný algoritmus.

    Pozrime sa na aplikáciu tejto vlastnosti pomocou nasledujúceho príkladu:

    Príklad použitia vlastnosti table-layout
    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ípade sme:

    Úprava riadkov a stĺpcov tabuľky

    V článku „“ sme sa už čiastočne dotkli spôsobov štylizovania riadkov a stĺpcov tabuľky. V tomto článku sme sa zamerali na používanie skupinovej pseudotriedy, ktorá vám umožňuje striedať štýly riadkov v tabuľkách pomocou hodnôt dokonca (úprimný) a zvláštny (zvláštny) alebo elementárne matematický vzorec.

    Zopakujme si predchádzajúce techniky a preskúmajme nové spôsoby, ako štylizovať riadky a stĺpce v tabuľkách. Prejdeme k príkladom.

    Príklad použitia: n-podtriedy pseudotriedy s tabuľkami
    1 2 3 4 5 6 7 8 9 10 11 12 13 14
    2
    3
    4

    V tomto prípade sme:

    Výsledok nášho príkladu:

    Prejdeme k ďalšiemu príkladu, v ktorom sa pozrieme na možnosti úpravy riadkov tabuľky.

    Príklad štýlu riadkov v tabuľkách
    Službacena
    Sum 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000

    V tomto prípade sme:

    • Nastavte šírku stola na 100% šírky rodičovský prvok, nastavte 1px plné ohraničenie pre hlavičkové a dátové bunky.
    • Nainštalované pre položku
    1 2 3 4 5

    V tomto prípade sme:

    • Vycentrujte tabuľku pomocou čalúnenia, nastavte šírku a výšku buniek hlavičky na 50 pixelov, ako je uvedené priehľadné orámovanie 5 pixelov.
    • Zistilo sa, že pri umiestnení kurzora (pseudo-class: hover) nad bunku hlavičky získa pozadie Modrá farby, Oranžová farba textu, orámovanie oranžová farby 5 pixelov a polomer 100%.
    • Priehľadný okraj je nevyhnutné, aby sa vyhradil priestor pre hranicu, ktorá sa zobrazí pri vznášaní, ak sa tak nestane, tabuľka „vyskočí“.

    Výsledok nášho príkladu:

    Nasledujúci príklad sa dotýka pomocou HTML prvky a a ich štýl.

    Príklad zvýraznenia stĺpcov tabuľky
    Číslo aplikácieSlužbacena, rub.Celkom
    1Spev 6 000 6 000
    2umývanie riadu 2 000 2 000
    3Čistenie 1 000 1 000
    4Tŕpnutie 1 500 1 500
    5Čítanie 3 000 3 000

    V tomto prípade sme:

    Výsledok nášho príkladu:

    No a posledný príklad, ktorý je dosť ťažko pochopiteľný a vyžaduje pokročilé znalosti CSS, pretož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 to uvedomili tým, že HTML element môžete použiť iba jednu vlastnosť CSS, farbu pozadia, ale nemôžete pri tomto prvku priamo nastaviť farbu pozadia pri vznášaní (pseudotrieda: hover). V tomto prípade sa pozrieme na to, ako zvýrazniť stĺpec tabuľky iba pomocou CSS.

    Príklad zvýraznenia stĺpcov a riadkov tabuľky pri umiestnení kurzora myši
    Číslo aplikácieSlužbacena, rub.Celkom
    1Spev 6 000 6 000
    2umývanie riadu 2 000 2 000
    3Čistenie 1 000 1 000
    4Tŕpnutie 1 500 1 500
    5Čítanie 3 000 3 000

    V tomto prípade sme:

    • Tabuľku sme nastavili tak, aby zaberala 100% nadradeného prvku, bunky tabuľky zaberali 25% nadradeného prvku a mali 1 pixelové zelené ohraničenie, hlavičky a dátové bunky boli vysoké 45 pixelov. Medzeru medzi bunkami sme odstránili pomocou vlastnosti border-collaps s hodnotou .
    • A tak pomocou pseudoprvku :: after pridajte obsah za každý prvok. pri vznášaní sa. Pseudoprvok :: after sa nevyhnutne používa v spojení s vlastnosťou content, vďaka ktorej vložíme blokový prvok, ktorý má farbu pozadia lesná zeleň a má absolútne polohovanie.
    • Absolútne umiestnenie je tu nevyhnutné na odsadenie prvku vzhľadom na zadaný okraj jeho predka, pričom predok musí mať inú hodnotu polohy ako predvolenú statickú hodnotu, inak bude počet z tohto dôvodu relatívny k zadanému okraju okna prehliadača. pripravili sme pre stôl relatívne umiestnenie(príbuzný).
    • Pre náš vygenerovaný blok nastavíme hornú vlastnosť, ktorá udáva smer odsadenia umiestneného prvku od horného okraja, a dolnú vlastnosť, ktorá udáva smer odsadenia umiestneného prvku od dolného okraja. Pre obe vlastnosti bola zadaná hodnota 0, takže blok úplne zaberie prvok zo spodnej a vrchnej časti tabuľky, šírka tohto bloku bola nastavená na 25%, táto hodnota zodpovedá šírke samotnej bunky.
    • A konečná vlastnosť, ktorú sme pre tento blok nastavili: z-index s hodnotou „-1“ určuje poradie umiestnených prvkov podľa 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, potom blok text zatvorí.

    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, nad ktorou sme tiež neuvažovali, ale určite sa ňou budeme zaoberať v nasledujúcom článku návod „Polohovacie prvky v CSS“.

    Otázky a úlohy k téme

    Dokončite cvičnú aktivitu a potom sa presuňte na ďalšiu tému:


    Ak máte problémy s dokončením cvičenia, môžete príklad vždy otvoriť v samostatnom okne a na stránke skontrolovať, či bol použitý CSS.


    2016-2020 Denis Bolshakov, môžete zasielať pripomienky a návrhy k fungovaniu stránky na [email protected]

    Preto 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. Môžete to jednoducho opraviť odsadením buniek v tabuľke HTML. A potom bude text vnútri rámca, v bunke, čitateľnejší.

    Na vytvorenie zarážok v bunke použite atribút mobilná výplň pre značku

    ... Existuje však ešte jedna, výhodnejšia možnosť: CSS.

    V tomto prípade sa zarážky nastavujú pomocou vlastnosti vypchávka... S jeho pomocou nebude ťažké odsadiť tam, kde je to potrebné, to znamená hore, vpravo, dole alebo vľavo, pomocou jednej z týchto vlastností: polstrovanie, polstrovanie-pravé, polstrovanie-dno a polstrovanie-vľavo.

    Môžete nastaviť, koľko pixelov má byť odsadených. Tu je príklad, kde bude spodný okraj 20 pixelov a všetko ostatné bude 10 ... Taký CSS-kód bude vyzerať takto:

    Td (polstrovanie: 10 pixelov; spodné polstrovanie: 20 pixelov;)

    A kompletný kód štýlov v tejto fáze:

    Tabuľka (orámovanie: plná 1 px modrá; zbalenie orámovania: zbaliť;) td (orámovanie: plná 1 px modrá; výplň: 10 pixelov; spodná výplň: 20 pixelov;)

    Výsledok v prehliadači:

    Odsadenie medzi bunkami

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

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

    Existujú dva spôsoby, ako oddeliť bunky:

    1. pomocou atribútu medzery medzi bunkami pre značku
    .
  • použitím CSS-vlastnosti medzery medzi okrajmi.

    • Je potrebné zdôrazniť, že medzery medzi okrajmi je napísaný pre tabuľku ako celok, pričom vlastnosť vypchávka predpisuje priamo pre bunky.

    Pozrime sa na príklad:

    Tabuľka (orámovanie: plná 1 pixelov modrá; zbaliť orámovanie: samostatné; medzery medzi okrajmi: 5 pixelov;) td (orámovanie: plná 1 pixelov modrá; výplň: 10 pixelov; dno výplne: 20 pixelov;)

    A výsledný výsledok:

    Hneď stanovme, že by ste sa nemali pokúšať vytvárať také zarážky pomocou hraničný kolaps: kolaps... Bunky sa pri použití tejto možnosti skutočne „prilepia“ k sebe.

    A aby ste ich od seba oddelili, mali by ste použiť hraničný kolaps: oddelený... Je dôležité tomu porozumieť danú hodnotu je predvolené. A slúži iba na to, aby jasne ukázal, ako sa tento problém rieši. Ak tento riadok vymažeme, potom sa uloží výsledok vo forme buniek umiestnených oddelene od seba.

    informuje prehliadač o vyplnení tabuľky.

    Akákoľvek tabuľka pozostáva zo stĺpcov a riadkov.

    Označiť

    vytvorí reťazec a značku
    bunka v rade. Podľa toho, koľko buniek je zahrnutých v riadku, bude v tabuľke toľko stĺpcov.

    Označiť

    		tiež vytvára bunku. Jeho rozdiel od značky v tom, že bunka vytvorená značkou je bunka - nadpis: jej obsah je vycentrovaný a ak ide o text, prehliadač ho zobrazí tučným písmom.

    Obsah bunky vytvorený značkou

    		štandardne sa nachádza v jeho ľavej časti.

    Označiť

    vytvorí hlavičku tabuľky, ktorá sa nachádza vo vnútri tagu - bezprostredne za otváraciu značku. Predvolený názov je vyššie a je vycentrovaný na stôl.















    Hlavička tabuľky
    1. bunka 1. riadok 2. bunka 1. riadok
    1. bunka 2. radu 2. bunka 2. radu

    Zarovnanie stola. Zarovnanie obsahu buniek

    Atribút align značky sa používa na zarovnanie tabuľky

    .

    Pomocou atribútu align môžete tabuľku umiestniť na ľavú alebo pravú (align = "left" a align = "right") časť okna prehliadača ( rodičovský prvok) alebo v jeho strede (zarovnanie = „stred“).

    Zarovnanie obsahu riadkov ( tag

    ) a bunky ( tag ktorý vytvorí riadok tabuľky, nemá žiadne atribúty hieght a width. Výška radu zodpovedá výške buniek, ktoré sú v ňom umiestnené. A šírka riadka sa rovná šírke tabuľky.

    Hodnoty výšky a šírky sú uvedené v pixeloch alebo ako percento voľného miesta. Ak chcete nastaviť hodnoty:

    Je uvedené kladné celé číslo. V tomto prípade bude veľkosť nastavená v pixeloch;

    Je zadané kladné celé číslo, za ktorým nasleduje symbol%.

    Ak obsah tabuľky alebo bunky presiahne uvedené veľkosti, prehliadač ich bude ignorovať a nové veľkosti sa automaticky zmestia podľa veľkosti obsahu.

    ) horizontálne sa vykonáva aj pomocou atribútu zarovnania a vertikálne pomocou atribútu valign:

    Atribút align preberá hodnoty left, right, center a justify, ktoré nastavujú zarovnanie obsahu riadkov a buniek na ich ľavú, pravú, strednú a šírku;

    Atribút valign, ktorý preberá hodnoty hore, dole a v strede, nastavuje zarovnanie obsahu riadkov a buniek na ich horné, dolné a stredné hodnoty.

    Atribút align slúži aj na zarovnanie názvu ( tag

    ) horizontálne a určujúc jeho umiestnenie - nad alebo pod tabuľkou.

    V predvolenom nastavení je obsah bunky zarovnaný vľavo horizontálne a vertikálne v strede.

    Výška a šírka stola a buniek

    Predvolené veľkosti ( výška a šírka) tabuľky aj bunky sa menia v závislosti od veľkosti ich obsahu.

    Výšku a šírku tabuľky a jej jednotlivých buniek je však možné nastaviť explicitne - pomocou atribútov hieght a width.

    Označiť














    >

    Ako vidíte na príklade: zadaním šírky jednej z buniek stĺpca tým nastavíte šírku celého stĺpca; a zadaním výšky jednej z buniek v riadku nastavíte výšku celého riadka.

    Okraje tabuľky a bunky

    Tabuľka a každá z jej buniek má svoje vlastné okraje, ktoré nie sú predvolene viditeľné.

    Atribút border značky

    umožňuje zviditeľniť okraje a nastaviť ich hrúbku. Zobrazí sa ohraničenie okolo tabuľky a okolo každej bunky.

    Hrúbka okraja ( alebo rámec) je nastavený v pixeloch. Hodnota atribútu border je kladné celé číslo. Ak je zadaný okraj bez hodnoty, bude mať hrúbku 1 pixel.

    Hrúbka okraja je nastavená iba pre tabuľku. Šírka okraja okolo buniek je vždy 1 pixel ( buď chýba).

    V predvolenom nastavení je okraj vykreslený v 3D a je čierny.

    Atribút bordercolor nastaví farbu orámovania a odstráni 3D efekt. Atribút možno použiť na nastavenie farby okraja tabuľky ( tag

    ), riadky ( tag ) alebo bunky ( tag
    ).

    Atribút bordercolor nepodporujú všetky prehliadače, a preto sa neodporúča. Na nastavenie farby orámovania je lepšie použiť štýly ( už je to v CSS).










    Atribút border nie je určený. Preto neexistujú žiadne hranice.











    Hranica tabuľky je hrubá 3 pixely. Bunky majú ohraničenie 1 pixel!

    Čiastočné zobrazenie okrajov

    Hranicu tabuľky a rámček okolo buniek je možné čiastočne zobraziť.

    Atribút značky rámca

    označuje, kde sa má nakresliť okraj tabuľky. Atribút rules určuje, ako sa majú zobrazovať ohraničenia buniek.

    Rámček „500 pixelov“ ="hsides" rules = "cols">










    Nainštalované horizontálne okraje stola
    A zobrazia sa okraje medzi reproduktormi

    Odsadenie vo vnútri a mimo buniek

    Pri formátovaní tabuliek v HTML môže byť užitočné použiť zarážky vo vnútri a mimo buniek na vizualizáciu niektorých informácií a uľahčenie ich čítania.

    Vnútorné polstrovanie - od okrajov bunky po ich obsah, nastavené atribútom cellpadding značky

    .

    Externé polstrovanie - vzdialenosť medzi okrajmi susedných buniek a vzdialenosťou od okrajov buniek k okraju tabuľky, nastavená atribútom medzery medzi bunkami značky

    .

    Hodnoty atribútu sú kladné celé čísla, ktoré určujú vzdialenosť v pixeloch.










    Vzdialenosť od obsahu bunky k ich okrajom je 10 pixelov
    Vzdialenosť medzi bunkami a od buniek k okraju tabuľky je 25 pixelov

    Zlúčenie buniek

    Pri úprave a formátovaní tabuliek v HTML je často potrebné skombinovať susedné bunky. A ak takáto potreba nastala, mali by ste použiť atribúty colspan a rowspan značky

    		.

    Atribút colspan určuje počet buniek, ktoré sa majú zlúčiť horizontálne, a atribút rowspan určuje počet buniek, ktoré sa majú zlúčiť zvisle.

    Oba atribúty majú význam, ak má tabuľka viacero riadkov.










    1 2
    3 4

    1 2
    3 4

    Pozadie na stôl. Bunky tabuľky na pozadí

    V HTML je možné nastaviť všeobecné pozadie pre celú tabuľku, ako aj pozadie pre samostatne vybranú bunku.

    Atribút pozadia značky

    určuje obrázok, ktorý bude obrázkom pozadia tabuľky. Ako hodnota atribútu je uvedená adresa súboru s obrázkom - absolútna alebo relatívna cesta k súboru ().

    Atribút značky Bgcolor

    nastaví farbu pozadia tabuľky. Farbu je možné nastaviť dvoma spôsobmi ()

    Nastavte rovnaké atribúty obrázok na pozadí a farba pozadia pre ľubovoľnú bunku tabuľky ( tag

    , a .

    Ktorýkoľvek z nich je možné použiť na zmenu niektorých vlastností jedného alebo viacerých riadkov tabuľky: toto je opäť zarovnanie obsahu buniek v riadkoch horizontálne a vertikálne - pomocou atribútov align a valign; a úlohu farba pozadia bunky pomocou atribútu bgcolor.

    Pri používaní týchto značiek, ktoré definujú rozdiely medzi nimi, je potrebné si uvedomiť niekoľko nuancií.

    Tagy:

    a musí byť umiestnený pred značku , bezprostredne za úvodnú značku tabuľky
    ).










    Farba pozadia stola je tmavo ružová.
    Obrázok na pozadí jednej bunky je obloha!

    Pripomeňme si tiež o existencii atribútu cols značky

    ktorý hovorí prehliadaču o počte stĺpcov v tabuľke.

    Použitie atribútu cols umožňuje prehliadaču zobrazovať obsah tabuľky rýchlejšie.

    Úprava tabuľky

    V tejto časti sa pozrieme na značky, ktoré sa používajú pri úprave viacerých prvkov tabuľky naraz. Tieto štítky je možné rozdeliť do dvoch skupín.

    Prvá skupina obsahuje značky

    a ... Sú takmer identické a slúžia na nastavenie niektorých vlastností a zmenu charakteristík jedného alebo viacerých stĺpcov tabuľky.

    Jeden z týchto štítkov je umiestnený bezprostredne za štítok

    ... Povedzme, že toto je značka .

    Použitie atribútu span značky

    uveďte počet stĺpcov, na ktoré sa použijú atribúty zarovnania, valignu alebo šírky ( zarovnanie obsahu buniek stĺpca horizontálne, vertikálne alebo nastavenie šírky stĺpcov).

    Ak je v značke atribút span

    chýba, potom sa zmení charakteristika jedného - prvého stĺpca tabuľky. Pri druhom použití štítku vlastnosti sú nastavené pre nasledujúce ( ďalej - ak chýba atribút span) stĺpce tabuľky atď.



    "2" šírka ="70 pixelov">







    1 2 3 4 5

    1 2 3 4 5

    Druhá skupina značiek tiež obsahuje značky, ktoré sú navzájom takmer identické.

    ... Struny zabalené v štítku sú uvedené v hornej časti tabuľky a riadky uzavreté v značke sa bude nachádzať v spodnej časti tabuľky. Obe značky je možné použiť iba raz v rámci tej istej tabuľky.

    Označiť

    je možné použiť viackrát vo vnútri značky
    .









    "vpravo" bgcolor = "# 00FF33">

    1 2
    3 4
    5 6
    7 8
    9 10
    1 2
    3 4
    5 6
    7 8
    9 10

    Okraje tabuľky html je možné ľahko zmeniť pomocou nástrojov css. Ich zobrazenie je nakonfigurované pomocou vlastností: zbaliť a medzery.

    Ak chcete upraviť vzhľad tabuľky, použite skupinu vlastností ohraničenia. Umožňuje vám prispôsobiť šírku, farbu, prítomnosť / neprítomnosť okrajov, ich štýl a ďalšie funkcie zobrazenia.

    Základy

    Tabuľka bez štýlov sa zobrazí ako štruktúrovaný text bez okrajov. Tabuľka v html je zostavená vďaka značkám:

    • tr pre struny;
    • th pre hlavičky;
    • td pre stĺpce.
    Hlava Hlava Hlava
    Bunka Bunka Bunka
    Bunka Bunka Bunka

    Veľkosť a písmo textu, pozadia, okraje od okraja okna prehliadača sa nastavujú v css v hlavnom kontajneri.

    Body (rodina písma: Helvetica, Sans-serif; veľkosť písma: 5vw; farba: čierna; farba pozadia: rgba (228, 228, 245); výplň: 20vh;)

    Na navrhnutie vzhľadu matice sa používajú štýly. Vlastnosť border vám umožňuje nastaviť hodnotu hrúbky, vzhľadu a farby okraja html tabuľky.

    (šírka orámovania: 2vw; štýl orámovania: bodkovaný; farba orámovania: skyblue;)

    Skrátené pomocou šablóny štýlu štýl ohraničenia: šírka.

    (orámovanie: 1px plné # 4c6ea1;)

    Pre konkrétnu stranu sa nastavuje pomocou vzoru s horným okrajom ( / vpravo / dole / vľavo) ( / farba / šírka / polomer).

    (border-top-color: darkblue;)

    Padding nastaví výplň vnútri bunky od textu k okraju, text-align nastaví zarovnanie.

    Na navrhnutie vzhľadu stola sa používajú štýly. Vlastnosť border vám umožňuje nastaviť hodnotu pre hrúbku, štýl a farbu orámovania. Padding nastaví výplň textu, zarovnanie textu nastaví zarovnanie.

    Th, td (border: 1vw solid # 4c6ea1; padding: 1vw; text-align: left;)

    Žiadne rámy

    Nie je potrebné používať rámček alebo zvlášť predpisovať farbu okraja, šírku a štýl, pretože html tabuľku môžete vytvoriť bez okrajov s plnohodnotným dizajnom. Nasledujúci kód napríklad nastavuje pozadie, vypchávky a zaoblené rohy (posledná matica bez vnútorných a vonkajších čiar).

    Tabuľka (zarovnanie textu: vľavo; farba pozadia: rgba (228, 228, 245); polomer horného ľavého ľavého rohu: 15em 1em; polomer okrajového dolného pravého dolného rohu: 15em 1em;) td, th (výplň: 1,5vw;)

    Vďaka možnosti nastaviť pozadie pre každú bunku môže tabuľka bez okrajov vyzerať, ako by ich mala.

    Tabuľka (zarovnanie textu: vľavo; farba pozadia: rgba (228, 228, 245); šírka: 70vw; medzery medzi okrajmi: 2vh 2vh;) td, th (výplň: 1,5vh;) td (farba pozadia: rgba (247, 247, 255);)

    Okraje tabuľky html môžete odstrániť a ponechať vnútorné. Na tento účel napríklad predpíšu vlastnosť border pre bunky (tr), nastavia spoločné ohraničenie na priľahlých stranách (zbaliť) a zakážu kreslenie čiar okolo matice (skryté). Posledná akcia skryje riadky buniek, ktoré keď je povolené zbalenie, budú na rovnakom mieste ako vonkajšie okraje tabuľky.

    Tabuľka (zarovnanie textu: stred; zbalenie orámovania: zbaliť; farba pozadia: rgba (228, 228, 245); polomer ohraničenia: 50%; šírka: 29vh; výška: 10vh; štýl ohraničenia: skrytý;) td (polstrovanie: 1,5vh; okraj: 0,5vh plná čierna;)

    Zbaliť a oddeliť

    Jedna z hlavných vlastností tabuľky v html, border-collapse, určuje, ako sa zobrazia okraje buniek. Vlastníctvo môže mať jednu z troch hodnôt: zbaliť, oddeliť, zdediť.

    tabuľka (border-collapse: collapse;)

    Predvolená hodnota je oddelená, takže každá bunka bude mať svoje vlastné ohraničenie. Vďaka zrúteniu môžete zlúčiť riadky buniek tak, aby bol ich obsah oddelený jedným rámcom. Na obrázku sú uvedené tri hraničné stavy popísané vyššie: žiadne štýly; s predvoleným orámovaním hraníc; s hodnotou zrútenia hraníc, ktorá ponecháva spoločnú čiaru medzi bunkami.

    Dvojité rámy

    Vlastnosť zbalenia vám umožňuje dosiahnuť, aby boli okraje buniek v html tabuľke navzájom nezávislé a spoločné. Často sa s ním používa vlastnosť hraničných medzier, ktorá riadi vzdialenosť medzi okrajmi buniek. Môžete zadať horizontálne aj vertikálne medzery.

    Tabuľka (rozstup okrajov: 0,5vw 1vw;)

    Prvá hodnota určuje horizontálnu vzdialenosť medzi bunkami, druhá - vertikálne. Ak je rámec nastavený pre samotnú tabuľku, potom je vzdialenosť od nej k bunkám tiež tvorená spazujúcou vlastnosťou, ale môže byť tiež ovplyvnená výplňou matice. V prípadoch, keď má matica pozadie, uvoľnený priestor medzi bunkami sa vyplní.

    Tabuľka (medzery: 0,5vw 1vw; orámovanie: 1vw plné # 4c6ea1; výplň: 1vw; farba pozadia: čierna;) td, th (orámovanie: 1vw plné # 4c6ea1; polstrovanie: 0,3vw; zarovnanie textu: vľavo; farba pozadia: biela;)

    Prázdne bunky

    Ak nie sú okraje tabuliek zlúčené pre tabuľku, vlastnosť prázdnych buniek zobrazí ich riadky a pozadie, ktoré sú považované za prázdne (označené ako viditeľné alebo bez symbolov). Ak chcete zobraziť orámovanie a pozadie každej bunky, vlastnosť je nastavená na zobrazenie.

    tabuľka (prázdne bunky: zobraziť;)

    Hodnota skryť skryje okraje a pozadie prázdnych políčok. Ak sú všetky bunky v riadku prázdne, potom má riadok nulovú výšku a iba jednu zvislú čiaru.

    Tabuľka (riadkovanie: 0,5vw 1vw; orámovanie: 0,1vw plné # 4c6ea1; výplň: 0,5vw; farba pozadia: rgba (33, 31, 171, 0,12); prázdne bunky: skryť;) td, th (orámovanie : 0,3vw plná # 4c6ea1; výplň: 0,5vw; zarovnanie textu: vľavo; farba pozadia: biela;)

    Pripisovať

    Existuje atribút rules na zvýraznenie okrajov pre skupiny prvkov (bunky, stĺpce, riadky, skupiny riadkov alebo stĺpcov). Jeho hodnota je zapísaná priamo do html v značke tabuľky.

    Umožňuje vám selektívne nakresliť hranice prvkov. Stačí zadať atribút v html, vytvorí to vnútorné čiary medzi bunkami. Okraj tabuľky html bude potrebné zadať ručne v css.

    Hlava Hlava Hlava
    Bunka Bunka Bunka
    Bunka Bunka Bunka
    tabuľka (border-top: 1vw solid # 486743; size-font: 5vw;) th, td (padding: 2vw;)

    Prvý obrázok teda ukazuje čistú prácu atribútu bez dodatočnej dekorácie okrajov prostredníctvom tabuľky. Na druhom obrázku je nakreslený horný riadok, ktorý je nastavený pomocou inštrukcie.

    Tabuľka (horný okraj: 1vw bodkovaný # 486743;)

    Atribút môže mať viacero hodnôt. Všetko vytvára hranice medzi bunkami s okrajom 1 px. Cols vytvára riadky medzi stĺpcami, riadky vytvárajú medzi riadkami, žiadne nevymaže okraje. Na obrázku sú príklady tabuľky s hodnotami všetko a riadky.

    Farbu ohraničenia bunky a šírku orámovania môžete zmeniť pomocou atribútu pravidlá pomocou ohraničenia a ohraničenia.

    Štýlové konflikty

    Bunky, riadky, stĺpce a skupiny položiek môžu mať svoje vlastné hodnoty orámovania. Môžu sa však líšiť v troch parametroch: štýl, hrúbka a farba.

    V zbalenom režime dochádza ku konfliktom návrhu. Vzhľadom na skutočnosť, že na jednu hranicu môže platiť pravidlo dvoch rôznych buniek, vzniká problém s výberom štýlu, ktorý bude mať prioritu. Ako píše E. Malchuk, víťazí (okrem skrytého) „najchytľavejšie“.

    1. Ak má jeden z prvkov vo vlastnosti border-style hodnotu skrytého pre sporný okraj, tento štýl víťazí. Skryté má najvyššiu prioritu.
    2. Najmenšia hmotnosť je žiadna. Tiež určuje, aby sa riadky nezobrazovali, ale aby bola indikácia splnená, všetky prvky pre tento riadok musia mať toto (žiadne) pravidlo.
    3. Medzi tenkými a hrubými okrajmi majú prednosť hrubé.
    4. Pri rovnakých rámoch, ale rôznych štýloch, vždy víťazí dvojité teleso, za ktorým nasledujú plné, čiarkované a bodkované.
    5. Ak sú rozdiely iba vo farbách, potom je vzhľad najmenšej zložky vždy vyšší (dizajn buniek má vyššiu prioritu ako riadky a riadky sú vyššie ako tabuľky).

    Ilustrácia konfliktu

    Konflikt štýlov je možné jednoducho ilustrovať pomocou už diskutovanej tabuľky. Stačí do buniek pridať niekoľko tried a zaregistrovať pre ne dizajn. Html má formu:

    Hlava Hlava Hlava
    Bunka Bunka Bunka
    Bunka Bunka Bunka

    Príslušná css.

    Text (rodina písem: Helvetica, bez pätky; veľkosť písma: 5vw; farba: čierna; okraj: 0; šírka: 80vw; farba pozadia: biela; výplň: 3vw;) tabuľka (farba pozadia: rgba (33 , 31, 171, 0,12); odsadenie: 0,5vw; zvinutie okraja: zbaliť; medzery medzi okrajmi: 0,5vw 1vw; štýl ohraničenia: skrytý;) th (odsadenie: 1vw; zarovnanie textu: vľavo; orámovanie: 0,1vw plná # 4c6ea1;) td (výplň: 1vw; orámovanie: 0,2vw bodkované # 4c6ea1;) .sekundová_článok (ohraničenie: 0,01vw plná # 4c6ea1;). tretia_článok (ohraničenie: 0,01vw dvojitá červená;)

    Štýly rámov

    Okrajovú výzdobu je možné nastaviť pre každú stranu bunky samostatne. Na to stačí zadať nie jednu hodnotu v štýle ohraničenia, ale uviesť štyri, zodpovedajúce bokom bunky.

    Th, td (polstrovanie: 1vw; zarovnanie textu: vľavo; šírka orámovania: 0,5vw; farba orámovania: tmavá : plné; šírka-orámovanie: 2vw; štýl orámovania-dole: prerušovaný; štýl orámovania-ľava: skrytý;)

    Údaje môžete zadať do jedného riadka zadaním jednej až štyroch rôznych hodnôt. Každý sa tradične stane pokynom pre jednu zo strán.

    • Ak zadáte dve hodnoty, prvá bude zodpovedná za dolné a horné hranice, druhá za ľavú a pravú.
    • Z troch je prvý zodpovedný za horný, druhý za ľavú a pravú stranu a tretí za spodný riadok.
    • Štyri hodnoty jednoznačne identifikujú každý z riadkov, zhora v smere hodinových ručičiek doľava.

    Môžete tiež určiť dizajn okrajov buniek jednoduchým definovaním údajov pre každú stranu, ako je uvedené vyššie.

    Štýlov rámov je celkom desať. Všetci zmenia riadok alebo ho odstránia:

    • žiadny - žiadna hranica;
    • skrytý - prísnejší žiadny, blokuje vzhľad čiary (v konfliktnej situácii);
    • bodkované - z bodiek;
    • čiarkované - bodkované;
    • tuhá látka - tuhá látka;
    • dvojitý - dvojitý pevný;
    • drážka - zdá sa, že rám je vtlačený do povrchu;
    • hrebeň - konvexná čiara;
    • vložka - v skutočnosti sa pre jednu stranu prvku správa ako hrebeň, ak je aplikovaný na celý prvok, potom sú hore a vľavo tieňované a zvýraznené sú spodné a pravé;
    • začiatok - pri aplikácii na jednu stranu prvku sa správa ako drážka, pričom tieň spodnej a pravej, hornej a ľavej strany je svetlejší.

    Jeden zo štýlov sa aplikuje na každú z buniek (na hornú a ľavú stranu). Aby medzi sebou nesúťažili, „najslabší“ dostávajú najvyššie hodnoty.

    Tabuľka (farba pozadia: rgba (33, 31, 171, 0,12); polstrovanie: 0,5 vw; ohraničenie: zbalenie; orámovanie: 0,3 vw plná čierna;) th, td (odsadenie: 1 v; zarovnanie textu: vľavo; ) .jeden (horný okraj: skrytý; ľavý okraj: skrytý;). dve (horný okraj: 0,4vw dvojitý # 4c6ea1; ľavý okraj: 0,4vw dvojitý # 4c6ea1;). tri (horný okraj: 0,5vw plná # 4c6ea1; hranica vľavo: 0,5vw plná # 4c6ea1;). štyri (horná hranica: 0,7vw prerušovaná # 4c6ea1; hraničná ľavá: 0,7vw prerušovaná # 4c6ea1;). päť (horná časť: 0,8vw bodkovaná # 4c6ea1; border-left: 0,8vw tečkované # 4c6ea1;). Šesť (border-top: 0,9vw ridge # 4c6ea1; border-left: 0,9vw ridge # 4c6ea1;) .seven (border-top: 1vw outset # 4c6ea1; border -vľavo: 1vw začiatok # 4c6ea1;). výška (border-top: 1,1vw groove # 4c6ea1; border-left: 1,1vw groove # 4c6ea1;) .nine (border-top: 1,2vw inset # 4c6ea1; border-left: Vložka 1,2vw # 4c6ea1;)

    Štruktúrovanie materiálu

    Povaha údajov reprezentovaných v matici často vyžaduje úpravu okrajov samotnej tabuľky, okrajov jej buniek, riadkov alebo stĺpcov. Na tento účel môžete použiť:

    • nulovacie čiary (pre šírku okraja uveďte hodnotu 0 pixelov);
    • skrytý.

    Výhodou skrytého je sila jeho priority. Ak sa na okraj vzťahuje pravidlo dvoch prvkov naraz a jeden z nich má skrytú hodnotu štýlu ohraničenia, riadok sa nezobrazí. To znamená, že môžete bezpečne vytvoriť celý stôl a potom selektívne odstrániť nepotrebné rámce.

    Použitie skrytých na bunkách znemožňuje obnovu okraja inými metódami (okrem ťažkej váhy! Dôležité). Preto, ak potrebujete odstrániť niektoré zo strán buniek, je lepšie použiť žiadne.

    Povedzme, že existuje stôl. Cieľom je odstrániť zvislé okraje v prvom riadku. Je označený samostatným tagom (názvom), takže nie je potrebné zavádzať ďalšiu triedu. Ak použijete skrytú na celú značku a nastavíte ju na okraj vľavo, spolu s vnútornými okrajmi bude odstránená aj jedna časť bočného okraja tabuľky, čo podmienka nevyžaduje. Ak použijeme žiadny a maticový riadok, potom budú existovať dve nekonfliktné pravidlá pre vnútorné črty a na vonkajšom okraji žiadne nebude v rozpore s pravidlom, ktoré je v tabuľke nastavené, a bočná strana zostane v miesto.

    Odstránenie jednotlivých riadkov buniek sa vykonáva pomocou tried, ktoré sú priradené k zodpovedajúcim prvkom, pretože sa ukázalo, že sa individuálne nastavuje štýl, šírka a farba.

    Zatiaľ čo je jednoduchšie odstrániť bočné ohraničenie v html tabuľke odkazom na vonkajšie rámce matice, ktoré sú uvedené v tabuľke. Stačí do css napísať údaj o konkrétnom riadku.

    Tabuľka (štýl ohraničenia vľavo: skrytý;)

    Odstránenie okrajov v reťazcoch sa dá ľahko implementovať pomocou vlastnosti border nastavenej na skrytú v tr. Nielen zmiznúť horizontálne čiary stoly, ale aj vedľajšie. Matrica degeneruje do zvislých stĺpcov.

    Tr (štýl ohraničenia: skrytý;)

    V krajnom prípade sa obráťte na! Dôležité! Ak ho pridáte po pokyne, bude mať dodatočnú prioritu.

    Okraje tabuľky html sú flexibilné a dajú sa ľahko prispôsobiť. Skupina vlastností ohraničenia vám umožňuje skryť prvky, zmeniť farbu, šírku alebo štýl. Nevýhodou tabuliek je, že výsledok kombinácie pravidiel aplikovaných na jednotlivý prvok nie je vždy jednoznačne predvídateľný. Vzhľadom na to sa odporúča buď znížiť počet možných štýlov orámovania, alebo ich aplikovať bodovo.

    Copyright © 2021 win-keys.ru - Všetko o operačnom systéme Windows