Tabuľka – množina údajov rozložených do riadkov a buniek. Väčšina buniek obsahuje tabuľkové údaje, zvyšok obsahuje hlavičky riadkov a stĺpcov, ktoré popisujú obsah.

Ak chcete vytvoriť tabuľku v dokumente HTML, použite značku

, je to kontajner, ktorý obsahuje celý obsah tabuľky.

Vytváranie tabuľky vždy začína riadkami, ktoré sú definované pomocou značky

, každý riadok zase pozostáva z buniek. Tag môže obsahovať iba značky na vytváranie buniek.

V HTML existujú dve rôzne značky na vytváranie buniek, prvá je

a

Najjednoduchší spôsob, ako pochopiť, ako možno použiť zoskupovanie riadkov a stĺpcov, je príklad tabuľky Sudoku.


Značka col nastavuje parametre pre každý stĺpec samostatne. Je úplne jedno ako píšeš zdrojový kód:

alebo

Príklad
, vytvára pravidelné bunky s údajmi. V predvolenom nastavení označuje obsah zarovnané doľava. Druhý tag na vytváranie buniek je tag , umožňuje definovať bunky, ktoré obsahujú hlavičky pre stĺpce alebo riadky, zobrazuje sa obsah takýchto buniek tučný text a zarovnané na stred. značky a môže obsahovať akékoľvek prvky HTML, ktoré sú dostupné na použitie v tele dokumentu.

Prvý titulDruhý titul
riadok 1, bunka 1riadok 1, bunka 2
riadok 2, bunka 1riadok 2, bunka 2
Skúste »

Tabuľka v tabuľke

HTML má schopnosť vytvárať vnorené tabuľky, teda tabuľky, ktoré sa nachádzajú vo vnútri iných tabuliek. Ak chcete vytvoriť vnorenú tabuľku, musíte do ľubovoľnej značky umiestniť kód tabuľky, ktorú chcete vnoriť

.

Vezmime si napríklad tabuľku, ktorú sme už vytvorili, a umiestnime tento kód do druhej bunky v druhom riadku:

Prvý titulDruhý titul
riadok 1, bunka 1riadok 1, bunka 2
riadok 2, bunka 1 riadok 2, bunka 2
Prvý titulDruhý titul
riadok 1, bunka 1riadok 1, bunka 2
riadok 2, bunka 1riadok 2, bunka 2

Stôl s rámami

názov Priezvisko
Larisa Isaeva
Dmitrij Kolesnikov

VÝSLEDOK:

Stôl bez okrajov

Stôl s rámami

Atribúty značky
a na zlúčenie buniek
Príklad
fretky
váha veľkosť
samcov 1,2 - 2,5 kg do 70 cm
ženy 0,7 – 1,0 kg do 40 cm

VÝSLEDOK:

fretky
váha veľkosť
samcov 1,2 - 2,5 kg do 70 cm
ženy 0,7 – 1,0 kg do 40 cm

Podľa štandardu HTML5 sú všetky doteraz používané atribúty tabuliek, ako napr hranica, rozmiestnenie buniek, čalúnenie buniek atď. už nie sú podporované a validátor ich použitie považuje za chyby v kóde. Na navrhovanie tabuliek je potrebné použiť CSS štýly, ktorými môžete nahradiť všetky zastarané atribúty tabuliek. Napríklad namiesto atribútu rozmiestnenie buniek vlastnosť sa používa na zmenu vzdialenosti medzi bunkami tabuľky ohraničenie a na zarovnanie obsahu v bunkách tabuľky - vlastnosti zarovnanie textu a vertikálne-aling. CSS štýly pre tabuľky

html značky zoskupenia riadkov tabuľky

Značky možno použiť na vytvorenie zložitejších tabuliek:

Príklad
konzumácia piva
CELÉ MENO. litrov
Celkom 250
Ivanov Ivan Ivanovič 133
Petrov Petr Petrovič 117

VÝSLEDOK:

značky zoskupenia stĺpcov tabuľky html

Atribút značiek
žltá červená

VÝSLEDOK:


Nesnažte sa nastaviť štýl zarovnanie textu pre značky a . Text umiestnený medzi značkami ..., nededí tento štýl, pretože tag nie je potomkom žiadnej značky , bez značky .

Horizontálne zarovnanie text v konkrétnom stĺpci tabuľky možno zmeniť zadaním štýlu zarovnanie textu pre pseudo triedu td:n-té dieťa(n), kde n je číslo stĺpca. Táto metóda však nebude fungovať, ak medzi bunkami tabuľky existuje atribút colspan.

Príklad
názov Cena, rub.)
Solárium za minútu platby (od 4 minút)15
50 minút solárium (14 rub/min, 1 mesiac)700
100 minút solária (13 rub/min, 2 mesiace)1300
200 minút solária (12 rub/min, 3 mesiace)2400

VÝSLEDOK:


Táto metóda však nebude fungovať, ak medzi bunkami tabuľky existuje atribút colspan.




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

Tabuľkové značky a atribúty

Tu sú hlavné prvky, ktoré sú potrebné na vytvorenie tabuliek:

  • - kontajner, v ktorom je umiestnený stôl (rovnako ako
      pre označené resp
        pre číslované zoznamy).
      1. hranica- atribút, ktorý určuje hrúbku rámikov. Namiesto toho je lepšie použiť hraničný majetok CSS.

    zdrojový kód tabuľky HTML c

    a
    nastavuje označenie tabuľky. Kontajner nemôžete použiť, ale ak sa stále rozhodnete ísť na čelo stola, umiestnite ho hneď za značku , mimo buniek a riadkov.
    • - párová značka obsahujúca riadok tabuľky (bunky umiestnené vodorovne na rovnakej úrovni).
    • , bude v ňom toľko buniek: jedna značka - jedna bunka.
    • umožňuje zoskupiť stĺpce, rýchlo a bez upchatia kódu na ich nastavenie Všeobecné charakteristiky. Pomocou kontajnera môžete od seba oddeliť logické časti tabuľky. Umiestnené za značkou

    Upozorňujeme, že po zlúčení buniek sa počet prvkov v riadku zmení. Napríklad, ak sú v tabuľke 3 stĺpce s bunkami a skombinujeme prvú a druhú bunku, potom všetko vnútri značky, ktorá definuje daný riadok budú 2 prvky , prvý bude obsahovať atribút colspan="2" .

    Príklad HTML tabuľky so zlučovaním buniek

    Zdrojový kód HTML tabuľky so zlúčenými bunkami

    - značka, ktorá vytvára bunku hlavičky tabuľky. Navonok je jeho obsah odlišný od obsahu v iných bunkách – zvyčajne text vo vnútri Prehliadač zvýrazní tučným písmom a umiestni sa do stredu.
    		• - nádoba, pomocou ktorej sa vytvorí jednoduchá bunka. Koľko takýchto značiek bude reťazec obsahovať (tag
    , ak nie, tak potom .
    • používané 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é umožňujú rozdeliť stôl na hornú (hlavičky), hlavnú (korpus) a dolnú (záverečnú) časť, resp. V tabuľke HTML je poradie týchto značiek rovnaké ako poradie kontajnerov , a
    v dokumente HTML.
  • colspan potrebné na zlúčenie buniek v rade. Hodnota atribútu obsahuje číslo, ktoré určuje počet buniek, ktoré sa majú zlúčiť.
  • rozpätie riadkov zreťazí bunky podľa 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
    ÚčelNástroj
    značkovanieHTMLXHTML
    Dekorcss
    rozvojPHPPython

    V prehliadači bude dokument vyzerať takto:

    Poďme zistiť, ktoré riadky kódu sú za čo zodpovedné.

    • - otvoril stôl a nastavil preň hrúbku rámov.
      • - s názvom.
      • - otvoril linku.
      • - vytvoril bunku s dizajnom hlavičky.
      • - vytvorila druhú bunku hlavičky v rade. Parameter colspan naznačoval, že táto bunka by mala zaberať dve horizontálne.
      • - zatvorte linku. Zvyšok riadkov bol vytvorený rovnakým spôsobom.
      • - pridaný druhý riadok tabuľky s bežnými bunkami, nie s hlavičkami. Podobne boli vložené nasledujúce riadky a bunky.
      • Nástroje na vytváranie webových stránok
      Účel Nástroj
      značkovanie HTML XHTML
      - zavrieť stôl.

    Jednoduchý zdrojový kód HTML tabuľky



















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

    hlavičky HTML tabuliek

    V HTML tabuľkách sú 2 typy buniek. Značka definuje bunku normálneho typu. Ak bunka funguje ako hlavička, identifikuje sa pomocou značky.

    Príklad HTML tabuľky s nadpisom th

    Volkswagen AG Daimler AG BMW Group
    Audi mercedes benz bmw
    Škoda Mercedes-AMG Mini
    Lamborghini Inteligentný Rolls Royce

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
























    Volkswagen AG Daimler AG BMW Group
    Audi mercedes benz bmw
    Škoda Mercedes-AMG Mini
    Lamborghini Inteligentný Rolls Royce

    Zlúčenie buniek v tabuľke HTML

    V HTML tabuľkách je možné zlúčiť bunky horizontálne a vertikálne.

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

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

    Bunky je možné zlúčiť horizontálne aj vertikálne súčasne. Ak to chcete urobiť, použite atribúty colspan aj rowspan pre požadovanú bunku:

    Text bunky





























    Nissan
    ModelVybavenieDostupnosť
    Nissan QashqaiVISIA+
    TEKNA+
    Nissan X-TrailACENTA+
    CONNECTA-

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

    HTML tabuľky možno rozdeliť do 3 oblastí: hlavička, telo, päta.

    A to tak, že sa riadky vybranej časti tabuľky obalia tagmi. definuje oblasť hlavičky, - oblasť päty, - telo tabuľky.

    V predvolenom nastavení nie sú hlavičky a päty štylizované (v prípade potreby sa to dá urobiť pomocou CSS), ale môžu ich používať prehliadače. Napríklad pri tlači viacstranovej tabuľky môžu byť hlavičky a päty duplikované na každej vytlačenej strane.

    Správne poradie značiek regiónu v kóde HTML tabuľky je nasledovné: najprv hlavička, potom päta, potom telo. V tomto prípade sa hlavná časť stránky zobrazí medzi hlavičkami a pätami.

    Voliteľne môžete k tabuľke pridať popis. Ak to chcete urobiť, použite značku.

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

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







































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

    Stĺpce a skupiny stĺpcov

    HTML tabuľku 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 s použitím minimálneho počtu CSS vlastnosti, čím sa zníži množstvo kódu tabuľky (namiesto definovania štýlov pre každú bunku stĺpca môžete nastaviť štýly pre jeden alebo viac stĺpcov naraz).

    Štítky a sú 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 HP)1,2 (115 HP)1,5 (90 HP)Výkon motora
    dieselbenzíndieselPalivo
    AKP6 (EDC)AKP6 (EDC)AKP6 (EDC)Prenos

    Tabuľky v rozložení stránky lokality

    Na moderných stránkach je dôležité správne zobrazenie stránok na počítačoch aj na nich mobilné zariadenia. Na vytvorenie rámca stránky HTML sa neodporúča používať tabuľky, pretože sa stráca schopnosť prispôsobiť obsah obrazovkám rôznych veľkostí (počítače, smartfóny, tablety).

    Značky skupín tabuliek sa najlepšie používajú v rámci stránky na zobrazenie obsahu formátu tabuľky.

    Dobrý deň, milí čitatelia blogu! Na webových stránkach je často potrebné okrem textu a obrázkov zobrazovať aj rôzne údaje vo forme tabuliek. Áno, je to pochopiteľné, tabuľka je najpohodlnejší spôsob prezentácie veľkého množstva informácií. Preto vzniká otázka Ako vložiť tabuľky do html?. V tomto článku odpoviem na túto otázku a uvediem veľa príkladov rôznych html tabuliek.

    Ako vytvoriť tabuľku pomocou HTML

    HTML tabuľky sa vytvárajú v štyroch krokoch.

    1. V prvom kroku v html kóde pomocou spárovaného tag

    povedzte prehliadaču, že na webovú stránku bola vložená tabuľka:
    . Element tabuľky je blokový prvok webovej stránky. Preto je výstup tabuľky vždy s Nový riadok vertikálne odsadené od susedné prvky, tak to netreba dávať do paragrafu.

    2. V druhom kroku vytvarujeme linky tabuľky umiestnením párových značiek vnútri

    . Každý prvok vytvorí samostatný riadok:





    3. Ďalej v treťom kroku formujeme bunky tabuľky so spárovanými značkami a , ktoré sú umiestnené vo vnútri prvku . Tag vytvára obvyklé bunka a bunka hlavička, t.j. hlavička príslušného stĺpca:











    4. V poslednom kroku to vložíme do prvkov a obsah bunky. HTML kód na vloženie tabuľky na webovú stránku vyzerá asi takto:











    Stĺpec 12. stĺpecStĺpec 3
    Bunka 1-1Bunka 1-2Bunka 1-3
    Bunka 2-1Bunka 2-2Bunka 2-3

    Pomôže doladiť zobrazenie okrajov. Pomocou môžete zmeniť hrúbku a farbu rámov, ako aj typ okrajov.

    Text, ktorý je potrebné umiestniť do buniek, je voliteľný, ale ak je text veľký, možno ho rozdeliť na odseky použitím značky

    Ak potrebujete nejakým spôsobom upraviť vložený text, môžete použiť .

    Okrem textu môžeme do buniek vkladať obrázky pomocou značky :

    Obsahom bunky môže byť dokonca iná tabuľka. V tomto prípade sa vytvorenie vnorenej tabuľky nelíši od vytvorenia bežnej tabuľky. Len medzi značkami a sú vložené značky

    a
    a vložia sa do nej riadky a bunky.

    Pri vytváraní tabuliek je potrebné mať na pamäti niekoľko pravidiel:

    • na vytvorenie tabuľky sa používa iba značka ;
    • tag
      • môže byť iba vo vnútri značky
      ;
    • značky
      • , akýkoľvek iný obsah značky ignorované prehliadačom;
    • obsah tabuľky (text alebo obrázky) môže byť iba v značkách
      • a môže byť iba vo vnútri značky
      a ;
    • bunky tabuľky musia mať aspoň nejaký obsah, v opačnom prípade ich prehliadač nemusí zobraziť vôbec, ale ak musí byť niektorá bunka prázdna, tak sa do nej zvyčajne vloží nezalomiteľná medzera (HTML literál);
    • tabuľka odkazuje na blokové prvky webovej stránky;
    • veľkosti tabuľky a jej buniek závisia od obsahu, t.j. stôl je natiahnutý na šírku a výšku tak, aby všetko pasovalo;
    • medzi okrajmi jednotlivých buniek a medzi okrajom každej bunky a jej obsahom sa urobí malá zarážka;
    • text buniek hlavičky (prvý prvok) je zobrazený tučným písmom a vycentrovaný;
    • okraje okolo tabuľky a jej buniek sa štandardne nekreslia.

      • Hlavička tabuľky

      Začnime s spárovaný štítok

      , čo dáva tabuľke názov. Text nadpisu je umiestnený vo vnútri tejto značky, ktorá musí byť vo vnútri značky . A bez ohľadu na to, kam v html kóde tabuľky umiestniť značku . Okrem toho je dovolené použiť nie viac ako jeden prvok v tej istej tabuľke a musí ísť do html kód hneď za značkou
      , prehliadač bude stále zobrazovať nadpis nad tabuľkou a vycentrovať ho. Ale zvyčajne značku umiestnené bezprostredne za otváraciu značku :









      Toto je stôl
      Bunka 1.1Bunka 1.2
      Bunka 2.1Bunka 2.2

      Displej:

      Časti tabuľky

      html tabuľku je možné logicky rozdeliť na časti - sekcie. Existujú tri typy sekcií:

      • hlavičkový oddiel, v ktorej sú umiestnené bunky hlavičky, ktoré tvoria hlavičku tabuľky;
      • časť tela, v ktorej sa nachádzajú bunky so základnými údajmi;
      • časť dokončenia, v ktorej sú umiestnené bunky s celkovými údajmi.

      Sekcia hlavičky tabuľky je vytvorená pomocou párového tagu

      .

      Časť tela je vytvorená pomocou párovej značky

      . Jedna html tabuľka môže obsahovať niekoľko častí tela, čo umožňuje vytvárať stavebné bloky na ktoré možno aplikovať jednotné štýly.

      Úplnú časť tvorí párová značka

      a v tej istej nádobe
      môže byť len jeden.

      Všetky tieto spárované značky musia obsahovať značky

      , ktoré tvoria riadky súvisiace s príslušnými sekciami:




















      Stĺpec 12. stĺpecStĺpec 3
      Bunka 1.1Bunka 1.2Bunka 1.3
      Bunka 2.1Bunka 2.2Bunka 2.3
      Výsledok 1Výsledok 2výsledok 3

      Zlúčenie buniek tabuľky

      Zostáva hovoriť o najdôležitejšej vlastnosti tabuliek - zlučovanie buniek. Atribúty sa používajú na spojenie viacerých buniek do jednej. colspan a rozpätie riadkov značky

      a . Atribút colspan nastavuje počet buniek kombinovaných horizontálne a rowspan - vertikálne:













      1.11.2-1.3
      2.12.22.3
      3.1-4.13.23.3
      4.24.3

      Príklad výsledku:

      1.1 1.2-1.3
      2.1 2.2 2.3
      3.1-4.1 3.2 3.3
      4.2 4.3

      Pri spájaní buniek je dôležité skontrolovať počet buniek v každom riadku, aby nedošlo k chybám. Áno, dizajn

      		nahrádza dve bunky, takže nasledujúci riadok by mal mať dve značky , alebo rovnaký dizajn! Ak sa počet buniek vo všetkých riadkoch nezhoduje, objavia sa prázdne bunky navyše.

      Príklad nesprávneho html kódu pri zlučovaní buniek:








      bunka 1.1bunka 1.2
      bunka 2.1bunka 2.2

      A výsledok zobrazený v prehliadači:

      Tie. ak analyzujete html kód, všimnete si, že prvý riadok má tri bunky, z ktorých dve sú zlúčené pomocou atribútu colspan, a druhý riadok má pridané iba dve bunky. Preto sa v druhom riadku zobrazí tretia prázdna bunka.

      Atribúty značky

      V tomto príspevku sme sa už stretli s jedným atribútom značky

      . S atribútom border, ktorý nastavuje šírku okraja v pixeloch. Predvolená hodnota je 0, a preto sa bunky štandardne zobrazujú bez orámovania.

      Okrem atribútu border existuje niekoľko ďalších dôležitých atribútov podporovaných značkou.

      . Poďme sa na ne pozrieť.

      Atribút zarovnať— súpravy zarovnanie tabuľky na stránke. Môže nadobudnúť hodnoty vľavo, na stred, vpravo, ktoré nastavujú zarovnanie vľavo, na stred a vpravo. Predvolená hodnota je ponechaná.

      Atribút pozadie, ktorý nastaví obrázok na pozadí k stolu. Ako hodnotu berie adresu obrazového súboru.

      bgcolor- nainštaluje farba pozadia tabuľky. Môže sa použiť v spojení s atribútom pozadia.

      Atribút farba okraja súpravy farba rámu tabuľky.

      čalúnenie buniek- definuje vzdialenosť medzi okrajom bunky a jej obsahom. Umožňuje zlepšiť čitateľnosť tabuľky. Hodnota môže byť ľubovoľné kladné číslo.

      Rozstup buniek— súpravy vzdialenosť medzi vonkajšími hranicami buniek.

      O tomto hovoriť ako vložiť tabuľku html stránku Končím, len zhrniem:

      • značky sa používajú na vloženie tabuľky
      - označenie tabuľky, - pridanie riadku a , časť dokončenia a časť tela ;
    • použite atribúty značiek na zlúčenie buniek
      • - vložiť bunku;
    • tabuľka je blokový prvok webovej stránky;
    • obsahom buniek môže byť nielen text, ale aj obrázky a iné tabuľky;
    • tabuľka môže obsahovať tri druhy sekcií: hlavička —
      • colspan a rowspan.

      To je všetko, v ďalšom príspevku budem hovoriť o navigačných nástrojoch na html stránke. Prihláste sa na odber aktualizácií môjho blogu, aby vám tento príspevok neušiel! Všetci, do skorého videnia!

      2022 bar812.ru. Len o komplexe. programy. Železo. internet. Windows