Html tabuľka je vytvorená pomocou. Príklad: Použitie vlastnosti border-collaps

Tabuľka je mriežka buniek, ktoré tvoria riadky a stĺpce. Príklady tabuliek zahŕňajú rôzne finančné výkazy, športové výsledky, kalendáre, plány atď. Jednotlivý blok mriežky sa nazýva tabuľková bunka. Bunky tabuľky môžu obsahovať najrozmanitejšie informácie vrátane čísel, textu a dokonca aj video a audio objektov. Tabuľky sa pomocou jazyka HTML píšu po riadkoch.

Element

slúži ako kontajner pre prvky, ktoré definujú obsah tabuľky. Ak chcete vytvoriť riadok tabuľky, musíte do prvku pridať
spárovaná bloková značka (skrátene z angličtiny „taye row“ - riadok tabuľky). Koľko značiek sčítate, koľko riadkov v tabuľke bude a bude. Otváracia značka označuje začiatok nového riadka v tabuľke. Prvky sú umiestnené za ním .

Element

dodal , napriek tomu sa nachádza na konci tabuľky. Vyplýva to zo skutočnosti, že môže obsahovať veľa riadkov. Pred získaním všetkých (potenciálne početných) riadkov údajov však musí prehliadač vykresliť spodnú časť tabuľky. Preto v kóde je napísaný pred prvok .

Úlohy

  • Odstráňte dvojité orámovanie tabuľky

    V predvolenom nastavení má okraj tabuľky efekt dvojitého ohraničenia, zmeňte kód tak, aby sa všetky riadky tohto okraja stali jednoduchými.

Tabuľky sú jedným z najdôležitejších, ale komplexných prvkov, ktoré musia byť na webových stránkach prítomné. S ich pomocou je vhodné predložiť dôležité a užitočné informácie v pomerne výstižnej forme. Väčšina editorov v šablónach pracujúcich na rôznych strojoch vám samozrejme umožňuje automatické vloženie tabuľky na stránku webu alebo do samostatnej publikácie, ale čo keď je návrh webového zdroja a jeho stránky vytvorené úplne od začiatku? Potom môže začínajúci čarodejník čeliť problému: ako na to. Poďme zistiť, ako tento prvok správne a rýchlo vytvoriť.

Výber redaktora

Na začiatku vytvárania tabuľky by ste sa mali rozhodnúť pre editor, v ktorom budete pracovať. Najjednoduchším spôsobom je samozrejme vybrať si program, v ktorom vytvoríte hlavný kód stránky. Na tieto účely je však najlepšie použiť starý dobrý notebook.

Môžete sa opýtať, prečo si komplikovať život, pretože ak robíte všetko naraz v editore, potom je výsledok tiež okamžite viditeľný a môžete tiež použiť rady programu.

Áno, je to pravda, ale vytvorením tabuľky od začiatku budete môcť nielen dôkladne preštudovať samotný princíp jej vytvorenia, ale tiež zabrániť nepríjemným preklepom a chybám v hlavnom kóde. Niekedy sa stane, že sa kurzor omylom posunie nadol a pri písaní sa do kódu vkradne chyba, ktorú je niekedy ťažké nájsť. Keď vytvoríte tabuľku v poznámkovom bloku, môžete skopírovať jej šifru a prilepiť ju na požadované miesto.

Algoritmus na vytvorenie tabuľky

Najprv si dáme dohromady krátky algoritmus na to, ako vytvoriť tabuľku v HTML. Je to tak, aby ste porozumeli postupnosti každého kroku. Potom budeme presne analyzovať, ako vykonať každý z bodov.

Začnime s prípravnými krokmi.

1. Nakreslite schematický obrázok tabuľky na list papiera.

2. Spočítame počet riadkov a buniek. Ak je ich počet odlišný, počítame pre každý riadok zvlášť.

3. Určte počet buniek hlavičky v riadku (napríklad bunky „Nie“, „Názov“ atď.).

4. Zapíšte si hlavné parametre tabuľky - farbu, výšku a šírku, zarovnanie textu - vo všeobecnosti čokoľvek, čo považujete za nevyhnutné.

1. Vložte štítky tabuľky.

2. Vložte riadkové značky podľa požadovaného čísla.

3. Do riadkov vložte značky buniek (pravidelné a veľké), tiež podľa čísla, ktoré ste napísali na papier.

4. Nastavte parametre pre tabuľku ako celok.

5. V prípade potreby nastavte indikátory pre jednotlivé bunky.

6. Naše bunky vyplníme textom.

Vytvorte tabuľku

Vybrali ste si editor, teraz sa pozrime na to, ako vytvoriť tabuľku v HTML. Značka, pomocou ktorej je tabuľka vložená do kódu stránky (

(skrátene z angličtiny „taye data“ - údaje tabuľky), z ktorých každá určuje v tomto riadku samostatnú bunku. Vnútorný prvok vložíte svoj obsah (text, čísla, obrázky atď.) zobrazený do tejto bunky. Koniec riadka je označený koncovou značkou
(skrátené z anglického „taYe Heading“ - nadpis tabuľky) - voliteľný prvok tabuľky, ktorý sa používa rovnako ako prvok jeho účelom je však vytvoriť hlavičku riadka alebo stĺpca. Typicky prvok umiestnené v prvom riadku tabuľky. Prehliadače zobrazujú text v prvku tučne a vycentrujte ho vzhľadom na bunku. Použitie prvku v kóde pomáha ľuďom, ktorí používajú čítačky obrazovky, a tiež zlepšuje výkon indexovania tabuliek vyhľadávacích nástrojov.

Uvažujme jednoduchú tabuľku, ktorá má tri riadky a tri stĺpce, pričom bunky v prvom riadku sú nadpismi zodpovedajúcich stĺpcov. Tabuľky sa predvolene zobrazujú bez orámovania:

Príklad: Jednoduchá tabuľka HTML

  • Skúste to sami “

Nadpis 1Nadpis 2Nadpis 3
Bunka 2x1Bunka 2x2Bunka 2x3
Bunka 3x1Bunka 3x2Bunka 3x3

Okraj tabuľky

Už vieme, že tabuľky sa predvolene zobrazujú bez orámovania. Ak chcete okolo tabuľky pridať orámovanie, musíte v dokumente určiť niekoľko jednoduchých pravidiel pre štýl. Nehnuteľnosť hranica ovláda zobrazenie riadkov mriežky tabuľky a tiež nastavuje šírku okraja okolo tabuľky v pixeloch. Okolo stola a medzi bunkami sa objaví ohraničenie. Nastavením vlastnosti pridajte rámček široký jeden pixel do už vytvorenej tabuľky hranica pre všetky prvky tabuľky napríklad takto:

Príklad: Použitie vlastnosti hranica

  • Skúste to sami “




Rám okolo stola

Nadpis 1Nadpis 2Nadpis 3
Bunka 2x1Bunka 2x2Bunka 2x3
Bunka 3x1Bunka 3x2Bunka 3x3

Rám jedného stola

V predvolenom nastavení budú mať susedné bunky tabuľky vlastný okraj. Výsledkom je akýsi „dvojitý okraj“, ako je vidieť na vyššie uvedenom príklade. Ak sa chcete zbaviť „dvojitého ohraničenia“, pridajte vlastnosť CSS hraničný kolaps do vašej šablóny štýlov:

Príklad: Použitie vlastnosti hraničný kolaps

  • Skúste to sami “




Rám okolo stola

Nadpis 1Nadpis 2Nadpis 3
Bunka 2x1Bunka 2x2Bunka 2x3
Bunka 3x1Bunka 3x2Bunka 3x3

Polia tabuľky a medzery

Bunky tabuľky sú v predvolenom nastavení dimenzované tak, aby zodpovedali ich obsahu, ale niekedy je potrebné ponechať okolo údajov tabuľky určité odsadenie. Pretože medzery a okraje súvisia s prvkami prezentácie údajov, tento priestor je možné prispôsobiť pomocou štýlov CSS. Bunkové pole ( vypchávka) Je vzdialenosť medzi obsahom bunky a jej okrajom. Ak ho chcete pridať, použite vlastnosť vypchávka k živlu

alebo ... Medzery medzi bunkami ( medzery medzi okrajmi) Je vzdialenosť medzi nimi ( alebo ). Najprv priraďte hodnotu oddelene nehnuteľnosť hraničný kolaps element a potom nastavte medzery medzi bunkami zmenou hodnoty parametra medzery medzi okrajmi... Atribúty boli predtým zodpovedné za polia a medzery medzi bunkami. mobilná výplň a medzery medzi bunkami element
ale v špecifikácii HTML5 boli zastarané.

Príklad použitia vypchávka a medzery medzi okrajmi:

Príklad: Použitie vlastností vypchávka a medzery medzi okrajmi

  • Skúste to sami “




polstrovanie a medzery medzi okrajmi

Bunka 1Bunka 2
Bunka 3Bunka 4

Šírka stola

Šírku obsadenú tabuľkou v okne prehliadača je možné určiť pomocou vlastnosti šírka CSS, v pixeloch alebo percentách. Zadanie šírky tabuľky v pixeloch vám umožní určiť jej presnú šírku. Percento vám umožňuje urobiť tabuľku flexibilnou, t.j. „natiahne“ sa alebo „zmenší“ v závislosti od toho, aké ďalšie prvky sú na stránke a aké veľké je okno prehliadača.
Tu je príklad použitia vlastnosti šírka:

Stôl (šírka: 100%;)

Príklad: Použitie vlastnosti šírka

  • Skúste to sami “
Bunka 1Bunka 2
Bunka 3Bunka 4




šírka: 100%

Bunka 1Bunka 2
Bunka 3Bunka 4

Reťaziace bunky (colspan a rowspan)

Jednou z hlavných vlastností štruktúry tabuľky je zreťazenie buniek, ktoré zahŕňa roztiahnutie bunky tak, aby pokrývala viacero riadkov alebo stĺpcov. To umožňuje komplexné štruktúry tabuliek: hlavičky

alebo bunky sa kombinujú pridaním atribútov colspan alebo rowspan... Pripisovať colspan určuje počet buniek, ktoré daná bunka vodorovne rozprestiera, a rowspan- vertikálne.

Spojte stĺpce

Reťazenie stĺpcov sa dosahuje pomocou atribútu colspan v prvkoch

alebo - bunka je natiahnutá doprava, aby zakryla nasledujúce stĺpce. V nasledujúcom príklade hodnota atribútu colspan sa rovná 2, čo znamená, že bunka by mala pokrývať dva stĺpce.

Príklad: Použitie atribútu colspan

  • Skúste to sami “




Atribút Colspan

colspan= "2"> Bunka s dvoma stĺpcami
Bunka 1Bunka 2
Bunka 3Bunka 4

Reťaziace reťazce

Reťazce zreťazené pomocou atribútu rowspan sa správajú rovnako ako zlúčené stĺpce, iba s tým rozdielom, že rozsah buniek je zhora nadol a pokrýva viacero riadkov.
Tento príklad roztiahne prvú bunku tabuľky o dva riadky nadol:

Príklad: Použitie atribútu rowspan

  • Skúste to sami “
Bunka v dvoch riadkoch Bunka 1Bunka 2
Bunka 3Bunka 4




Atribút Rowspan

rowspan= "2"> Bunka v dvoch riadkoch Bunka 1Bunka 2
Bunka 3Bunka 4

Hlavička tabuľky

Párová značka sa používa na vytvorenie nadpisu alebo titulku tabuľky

(z anglického titulku - podpis). Element slúži na usporiadanie hlavičky tabuľky. Nachádza sa bezprostredne za značkou , ale mimo popisu riadka alebo bunky.

Príklad: Použitie značky

, a ... Rovnako ako webová stránka môže obsahovať hlavičku, telo a pätu, tabuľka môže obsahovať hlavičku, telo a pätu. Ak chcete logicky zoskupiť riadky v hornej časti tabuľky (tj. Vytvoriť hornú hlavu tabuľky), použite značku ... Hlavičky tabuliek musia byť umiestnené v prvku , napríklad:

Hlavný obsah (telo) tabuľky musí byť vo vnútri prvku

(v tabuľke môže byť niekoľko takýchto blokov). Ak chcete logicky zoskupiť riadky v spodnej časti tabuľky (tj. Vytvoriť „pätu“ tabuľky), použite značku (v jednej tabuľke nie je povolený viac ako jeden štítok) ). V zdrojovom kóde značka umiestnené pred značkou ... Okrem logického zoskupenia jeden z dôvodov používania prvkov a je, že ak je vaša tabuľka príliš dlhá na to, aby sa mohla naraz zobraziť na obrazovke (alebo aby sa dala vytlačiť), prehliadač zobrazí názov ( ) a posledný riadok ( ), keď sa používateľ posúva vašou tabuľkou.

Príklad: značky

, a
  • Skúste to sami “




Štítky na hlavu, trup a tfoot

  • Skúste to sami “




Prvok titulkov

Toto je hlavička tabuľky
Bunka v dvoch riadkoch Bunka 1Bunka 2
Bunka 3Bunka 4

Zoskupovanie značiek pre položky tabuľky

Na zoskupenie prvkov tabuľky použite značky

Nadpis 1Nadpis 2< /th>
Toto je hlavička tabuľky
Toto je päta tabuľky
Bunka 1Bunka 2Bunka 3Bunka 4

Napriek tomu, že sme vpredu

), je spárovaný, to znamená, že naša konštrukcia začína touto značkou a končí na
.

Po vložení značiek tabuľky pokračujeme k vytváraniu riadkov a buniek.

Ihneď si všimneme, že tieto prvky sú tiež spárované. Označiť určuje reťazce a - bunky.

V prípade buniek hlavičky použite spárovaný prvok .

Ako už bolo spomenuté, prvým krokom je nakresliť riadky a potom do nich napísať bunky. Aby ste sa nenechali zmiasť, odporúčame vám buď oddeliť jednotlivé bloky v jednom alebo dvoch riadkoch, alebo napísať nový blok prvkov pomocou klávesu „Tab“.

Ako by to mohlo vyzerať Ako to:

  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • P / p č.Priezvisko
    1;
  		• Ivanov
    .

Ako vidíte, nie je na tom nič zložité. Hlavnou vecou nie je zamieňať sa v počte riadkov a buniek. V opačnom prípade sa stôl môže zošikmiť.

Diskutovali sme o vytvorení tabuľky v HTML, teraz môžeme pristúpiť k parametrom samotnej matice a jej riadkov a buniek.

Parametre tabuľky

Pri písaní kódu by ste mali venovať pozornosť nasledujúcim bodom: zarovnanie okrajov, pozadia, textu atď.

Parametre tabuľky sú nastavené v tagu

... Tie obsahujú:

1. Border - šírka okrajov. Nastavuje sa ako celé číslo. V predvolenom nastavení sú okraje akejkoľvek tabuľky nulové.

2. Bordercolor - farba orámovania. Je možné ho nastaviť ako hexadecimálny kód farby (# 00008B) a jeho názov v angličtine (DarkBlue). Štandardne je vždy sivá.

3. Bgcolor - Nastavuje sa tiež kódom alebo názvom.

4. Zarovnať - zarovnanie textu za tabuľkou. Predvolená hodnota je zarovnaná doľava. Pre tento parameter existujú nasledujúce možnosti:

  • vľavo - zabaľte doprava;
  • vpravo -zalamovanie doľava;
  • stred - zobrazí tabuľku v strede bez zalomenia.

5. Šírka a výška - šírka a výška stola. Dá sa nastaviť v pixeloch aj v percentách (vzhľadom na veľkosť okna prehliadača).

Pri predpisovaní tohto alebo toho indikátora by ste mali venovať osobitnú pozornosť dizajnu. Za parametrom musí nasledovať znak „rovnajúci sa“ a za ním zadaná hodnota v úvodzovkách.

Pokiaľ ide o farbu textu, je štylizovaný rovnako ako normálny text vo formáte HTML.

Príklad dizajnu stola:

;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • P / p č.Priezvisko
    1;
  		• Ivanov
    .

    Reťazcové parametre

    Už sme teda zistili, ako vytvoriť tabuľku v HTML a zaregistrovať jej hlavné parametre. Ale čo keď potrebujeme zvýrazniť riadok? Má byť štylizovaný odlišne od hlavného textu tabuľky?

    V značke sú zapísané reťazcové parametre úplne rovnaké ako údaje tabuľky. Pre reťazec je možné nastaviť nasledujúce premenné:

    1. Hranica, bordercolor a bgcolor vám už sú známe.

    2. Zarovnať - zarovnanie textu v riadku. Môže nadobúdať hodnoty vľavo, v strede a vpravo.

    3. Valign - táto značka zarovná text vertikálne. Na to sú potrebné nasledujúce hodnoty:

    • hore - text je zarovnaný s horným okrajom;
    • stred - v strede;
    • dno - pozdĺž spodného okraja.

    Príklad formátovania riadkov:

    • ;
    • P / p č.;
    • Priezvisko;
    • .

    Parametre bunky

    A posledná vec, ktorú stojí za to venovať pozornosť tým, ktorí chcú vedieť, ako vytvoriť tabuľku v HTML, sú parametre jednotlivých buniek, bežných aj veľkých písmen. V skutočnosti sa všetko robí rovnakým spôsobom ako pre stôl alebo riadok. Jediná vec je, že sú pridané ďalšie dva dôležité prvky:

    1. Colspan - tento parameter určuje počet stĺpcov, ktoré môže bunka obsiahnuť.

    2. Rowspan - už udáva počet riadkov, ktoré táto bunka zaberá.

    Pretože sa dizajn nelíši od písania riadka, neuvádzame príklad kódu.

    závery

    Výroba stola nie je taká náročná, ako by sa na prvý pohľad mohlo zdať. Hlavnou vecou pri písaní jej kódu je vytrvalosť a pozornosť.

    Pokiaľ ide o vloženie tabuľky do HTML, stačí skopírovať a prilepiť jej šifru na presné miesto na stránke, kde by sa podľa vás mala nachádzať.

    Nebojte sa experimentovať a čoskoro si techniku ​​vytvárania tabuliek osvojíte k dokonalosti. Veľa štastia!

    Tabuľky HTML sú také funkčné, že ich môžete použiť na sadzbu celých stránok (na čítanie). Teraz budeme hovoriť o vkladaní jednoduchých tabuliek HTML na webovú stránku, pričom budeme analyzovať iba značky, ale nedotýkame sa dizajnu, pretože je lepšie zdobiť tabuľky štýlmi CSS.

    Tabuľkové značky a atribúty

    Tu sú základné prvky, ktoré potrebujete na vytvorenie tabuliek:

    • - kontajner, v ktorom je umiestnený stôl (rovnaký ako
        pre označené alebo
          pre číslované zoznamy).
        1. hranica- atribút, ktorý určuje hrúbku rámov. Je lepšie použiť vlastnosť border CSS.
      určuje podpis tabuľky. Kontajner nemusíte používať, ale ak sa napriek tomu rozhodnete pomenovať tabuľku, vložte ju hneď za značku , mimo buniek a čiar.
      • - spárovaná značka obsahujúca riadok tabuľky (bunky umiestnené horizontálne na rovnakej úrovni).
      • , bude v ňom toľko buniek: jedna značka - jedna bunka.
      • umožňuje zoskupovať stĺpce, rýchlo a bez preplnenia kódu, a nastaviť im tak spoločné charakteristiky. Pomocou kontajnera môžete od seba oddeliť logické časti tabuľky. Nachádza sa za značkou vytvorí nový riadok. Ďalej v hniezde

      Zdroj HTML tabuľky c

      a
      - značka, ktorá vytvára bunku hlavičky tabuľky. Navonok sa jeho obsah líši od obsahu v iných bunkách - spravidla ide o text vo vnútri prehliadač je tučný a vycentrovaný.
      		• - kontajner, pomocou ktorého sa vytvorí jednoduchá bunka. Koľko takýchto značiek bude reťazec obsahovať (tag
      , ak nie, tak potom .
      • používa sa na rovnaký účel ako . môže obsahovať ale nie naopak.
    • rozpätie- atribút, ktorý určuje počet stĺpcov, na ktoré sa použijú vlastnosti kontajnera
      • .
      • , a - kontajnery, ktoré vám umožňujú rozdeliť stôl na hornú (hlavičky), hlavnú (telo) a dolnú (konečnú) časť. V tabuľke HTML je postupnosť týchto značiek rovnaká ako postupnosť kontajnerov , a
      v dokumente HTML.
    • colspan potrebné na kombináciu buniek v rade. Hodnota atribútu obsahuje číslo, ktoré určuje počet buniek, ktoré sa majú zlúčiť.
    • rowspan zlúči bunky do stĺpcov.

      • Príklad vytvorenia tabuľky

      Vytvorte dokument HTML a skopírujte doň nasledujúci kód:

      Príklad tabuľky

      Nástroje na vytváranie webových stránok
      VymenovanieNástroj
      MarkupHtmlXHTML
      RegistráciaCSS
      VývojPHPPython

      V prehliadači bude dokument vyzerať takto:

      Analyzujme, ktoré riadky kódu sú za čo zodpovedné.

      • - otvoril stôl nastavením hrúbky rámov.
        • - pomenoval to.
        • - otvoril riadok.
        • - vytvoril bunku s dizajnom názvu.
        • - vytvorila druhú bunku hlavičky v riadku. Parameter colspan naznačoval, že táto bunka by mala zaberať dve horizontálne.
        • - uzavrel linku. Ostatné riadky boli vytvorené rovnakým spôsobom.
        • - pridal druhý riadok tabuľky s obvyklými, nie hlavičkovými bunkami. Nasledujúce riadky a bunky boli vložené podobne.
        • Nástroje na vytváranie webových stránok
        Vymenovanie Nástroj
        Markup Html XHTML
        - zatvoril stôl.
      je telo stola. Telo je tvorené riadkami a stĺpcami. Tabuľka sa plní riadok po riadku.

      Každá značka

      vytvoria sa stĺpce. Je možné vytvoriť viac stĺpcov. V takom prípade musíte sledovať počet stĺpcov v každom riadku. Ak mal napríklad prvý riadok 5 stĺpcov, potom ďalšie riadky by mali mať tiež 5 stĺpcov. V opačnom prípade sa stôl bude vznášať. Bunky je možné kombinovať.

      Ako vytvoriť tabuľku v html

      Uveďme príklad, html kód:

      Príklad tabuľky
      Stĺpec 1 Stĺpec 2

      Dávajte pozor na bunku

      		... Na horizontálne kombinovanie buniek používame špeciálny atribút colspan. Jeho číselná hodnota udáva počet stĺpcov, ktoré sa majú kombinovať. Existuje tiež analóg tohto atribútu: tag (záhlavie tabuľky), kde tiež musíte napísať colspan. Výsledok bude rovnaký. Ale často sa používa obvyklý td.

      Teraz sa pozrime bližšie na všetky atribúty značky.

      .

      Atribúty a vlastnosti značiek

      Na úvodnú značku

      môžete písať rôzne atribúty.

      1. Property align = "parameter" - nastavuje zarovnanie tabuľky. Môže mať nasledujúce hodnoty:

      V uvedenom príklade sme zarovnali tabuľku do stredu align = "center".

      Tento atribút je možné použiť nielen na tabuľku, ale aj na jednotlivé bunky tabuľky.

      ... Zarovnanie bude teda v rôznych bunkách odlišné.

      Napríklad

      , , , alebo
    • cols - riadok sa zobrazuje medzi stĺpcami
    • žiadny - všetky hranice sú skryté
    • riadky - ohraničenie sa nakreslí medzi riadky tabuľky vytvorené prostredníctvom značky

      • 12. Property width = "number" - nastavuje šírku tabuľky: buď v pixeloch alebo v percentách.

      13. Property class = "názov_triedy" - môžete zadať názov triedy, do ktorej tabuľka patrí.

      14. Property style = "styles" - štýly je možné nastaviť individuálne pre každú tabuľku.

      Teraz je načase ponoriť sa do tabuľky a pozrieť sa na atribúty buniek tabuľky. Tieto atribúty musia byť zapísané v úvodnej značke.

      a sú k dispozícii rovnaké možnosti ako pre bude hierarchicky aplikovaný na všetkých

      Všimnite si toho, že pri zlúčení buniek sa zmení počet položiek v riadku. Ak má napríklad tabuľka 3 stĺpce s bunkami a skombinujeme prvú a druhú bunku, potom v značke definujúcej tento riadok budú 2 prvky, prvý z nich bude obsahovať atribút colspan = "2".

      Príklad tabuľky HTML so zreťazením buniek

      Zdroj tabuľky HTML so zlúčenými bunkami

      alebo struny
      ... ... ...

      2. Vlastnosť background = "URL" - nastaví obrázok na pozadí. Namiesto adresy URL je potrebné napísať adresu obrázku na pozadí.

      Príklad

      Príklad tabuľky
      Stĺpec 1 Stĺpec 2

      Na stránke prevedené na nasledujúce:

      V uvedenom príklade sa náš obrázok na pozadí nachádza v priečinku img (ktorý sa nachádza v rovnakom adresári ako stránka html) a obrázok sa nazýva fon.gif. Všimnite si toho, že do značky sme pridali style = "color: white;" ... Keďže je pozadie takmer čierne, aby sa text nezlučoval s pozadím, urobili sme text bielym.

      3. Vlastnosť bgcolor = "farba" - nastaví farbu pozadia tabuľky. Ako farbu si môžete vybrať ktorúkoľvek z celej palety (pozri kódy a názvy farieb html)

      4. Hranica vlastnosti = "číslo" - nastavuje hrúbku okraja tabuľky. V predchádzajúcich príkladoch sme určili border = "1", čo znamená, že šírka orámovania je 1 pixel.

      5. Vlastnosť bordercolor = "farba" - nastaví farbu orámovania. Ak border = "0", potom nebude žiadne ohraničenie a farba orámovania nebude mať zmysel.

      6. Vlastnosť cellpadding = "číslo" - odsadenie od rámca k obsahu bunky v pixeloch.

      7. Vlastnosť cellspacing = "číslo" - vzdialenosť medzi bunkami v pixeloch.

      8. Vlastnosť cols = "číslo" - počet stĺpcov. Ak to nezadáte, prehliadač určí počet stĺpcov sám. Jediným rozdielom je, že zadanie tohto parametra pravdepodobne urýchli načítanie tabuľky.

      9. Rámec vlastností = "parameter" - ako zobraziť okraje okolo tabuľky. Môže mať nasledujúce hodnoty:

      • neplatné - nekreslite hranice
      • border - hranica okolo stola
      • nad - okraj v hornej časti tabuľky
      • nižšie - okraj v spodnej časti tabuľky
      • hsides - pridať iba horizontálne okraje (horná a dolná časť tabuľky)
      • vsides - nakreslite iba zvislé okraje (vľavo a vpravo od tabuľky)
      • rhs - ohraničenie iba na pravej strane tabuľky
      • lhs - ohraničenie iba na ľavej strane tabuľky

      10. Výška vlastnosti = "číslo" - nastavuje výšku tabuľky: buď v pixeloch, alebo v percentách.

      11. Vlastné pravidlá = "parameter" - kde sa majú zobrazovať hranice medzi bunkami. Môže mať nasledujúce hodnoty:

      • všetko - okolo každej bunky v tabuľke sa nakreslí čiara
      • skupiny - riadok sa zobrazuje medzi skupinami, ktoré sú tvorené tagmi
      .

      Atribúty a vlastnosti

      1. Property align = "parameter" - nastaví zarovnanie jednotlivých buniek v tabuľke. Môže mať nasledujúce hodnoty:

      • zarovnanie vľavo - vľavo
      • zarovnanie stred - stred
      • zarovnanie doprava - doprava

      2. Vlastnosť background = "URL" - nastaví obrázok na pozadí bunky. Namiesto adresy URL je potrebné napísať adresu obrázku na pozadí.

      3. Vlastnosť bgcolor = "farba" - nastaví farbu pozadia bunky.

      4. Vlastnosť bordercolor = "farba" - nastavuje farbu orámovania bunky.

      5. Vlastnosť char = "písmeno" - nastavuje písmeno, od ktorého sa má vykonať zarovnanie. Hodnota atribútu align musí byť nastavená na char.

      6. Vlastnosť colspan = "číslo" - nastavuje počet horizontálnych buniek, ktoré sa majú kombinovať.

      7. Výška vlastnosti = "číslo" - nastavuje výšku tabuľky: buď v pixeloch, alebo v percentách%.

      8. Property width = "number" - nastavuje šírku tabuľky: buď v pixeloch alebo v percentách%.

      9. Vlastnosť rowspan = "číslo" - nastavuje počet zlúčených zvislých buniek.

      10. Vlastnosť valign = "parameter" - zvislé zarovnanie obsahu bunky.

      • hore - zarovná obsah bunky na začiatok riadku
      • zarovnanie stred - stred
      • dno - zarovnajte na dno
      • základná línia - zarovnanie základnej čiary
      Poznámka 1

      Pre značku

      ... Parametre pre jednu značku
      vo vnútri

      Ako zabrániť zlepeniu buniek tabuľky

      V prípade použitia ohraničenia (ohraničenia buniek) a nulového polstrovania medzi bunkami sú stále zlepené a vznikne dvojité orámovanie. Aby ste tomu zabránili, musíte zaregistrovať tabuľku border-collapse: collapse v hárku štýlov:

      ...

      Vážený čitateľ, teraz ste sa dozvedeli oveľa viac o značke tabuľky html. Teraz vám radím, aby ste prešli na ďalšiu lekciu.

      Zdrojový kód jednoduchej HTML tabuľky



















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

      Hlavičky tabuliek HTML

      V tabuľkách HTML sú 2 typy buniek. Značka definuje bunku obvyklého typu. Ak bunka funguje ako nadpis, je označená značkou.

      Príklad tabuľky HTML s nadpisom

      Volkswagen AG Daimler AG BMW Group
      Audi Mercedes-Benz Bmw
      Škoda Mercedes-AMG Mini
      Lamborghini Múdry Rolls-Royce

      Zdrojový kód tabuľky HTML s hlavičkami
























      Volkswagen AG Daimler AG BMW Group
      Audi Mercedes-Benz Bmw
      Škoda Mercedes-AMG Mini
      Lamborghini Múdry Rolls-Royce

      Spojte bunky v tabuľke HTML

      Tabuľky HTML majú schopnosť kombinovať bunky horizontálne a vertikálne.

      Komu bunky zlúčiť vodorovne použite atribút colspan = " NS“, v cele alebo kde X

      Komu bunky vertikálne zlúčiť použite atribút rowspan = " NS“, v cele alebo kde X- počet buniek, ktoré sa majú spojiť.

      Bunky je možné zlúčiť horizontálne aj vertikálne súčasne. Na tento účel použite pre požadovanú bunku atribúty colspan aj rowspan:

      		Text bunky





























      Nissan
      Model Zariadenie Dostupnosť
      Nissan Qashqai VISIA +
      TEKNA +
      Nissan x-trail ACENTA +
      CONNECTA -

      Hlavičky a päty a podpis v tabuľkách HTML

      Tabuľky HTML je možné rozdeliť do 3 oblastí: hlavička, telo, päta.

      To sa robí tak, že sa riadky vybranej časti tabuľky zalomia značkami. definuje oblasť hlavičky, - oblasť päty, - telo tabuľky.

      Hlavičky a päty nie sú predvolene štylizované (v prípade potreby je to možné vykonať pomocou CSS), ale môžu ich používať prehliadače. Napríklad pri tlači viacstránkovej tabuľky môžu byť hlavičky a päty duplikované na každej vytlačenej stránke.

      Správne poradie umiestnenia značiek oblastí v kóde tabuľky HTML je nasledujúce: najskôr hlavička, potom päta a potom hlavné telo. V takom prípade sa hlavná časť stránky zobrazí medzi hlavičkami a pätami.

      Podľa potreby môžete do tabuľky pridať podpis. Ak to chcete urobiť, použite značku.

      Príklad tabuľky HTML s hlavičkami a pätami a podpisom

      Zdrojový kód tabuľky s hlavičkami a pätami a podpisom







































      Kompletná sada Renault Sandero Stepway
      Charakteristické SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
      Dostupnosť + + +
      Výkon motora 0,9 (90 k) 0,9 (90 k) 1,5 (90 k)
      Palivo benzín benzín nafta
      Miera toxicity 6 eur 6 eur 5 eur

      Stĺpce a skupiny stĺpcov

      Tabuľku HTML je možné rozdeliť na stĺpce a skupiny stĺpcov pomocou značiek a.

      Toto oddelenie vám umožňuje nastaviť štýly pre tabuľku pomocou minimálneho počtu vlastností CSS, čím sa zníži množstvo kódu tabuľky (namiesto definovania štýlov pre každú bunku v stĺpci môžete nastaviť štýly pre jeden alebo viac stĺpcov naraz).

      Štítky a umiestnené vo vnútri štítku pred štítkami, AKP6 (EDC)

      		Prenos
































      ZEN 2E2C AL AZEN 2E2C J5 AINTENSE 2E3C AL ACharakteristické
      1,5 (90 k)1,2 (115 k)1,5 (90 k)Výkon motora
      naftabenzínnaftaPalivo
      AKP6 (EDC)AKP6 (EDC)AKP6 (EDC)Prenos

      Tabuľky v rozložení stránky

      Na moderných weboch je dôležité správne zobrazovať stránky na počítačoch aj na mobilných zariadeniach. Nie je vhodné používať tabuľky na vytváranie kostry stránky HTML, pretože sa stráca schopnosť prispôsobovať obsah obrazovkám rôznych veľkostí (počítače, smartfóny, tablety).

      Značky skupín tabuliek sa najlepšie používajú na stránke na zobrazenie obsahu vo formáte tabuľky.

      PODOBNÉ ČLÁNKY

      Odporúčané

      Copyright 2021 - Oprava počítačov a notebookov. Grafické karty, pevné disky, internet, monitory.