Ako vytvoriť tabuľku pomocou html. Štátna pedagogická univerzita Ural

Kapitola 4

HTML tabuľky

Jeden z najsilnejších a najpoužívanejších nástrojov v HTML sú tabuľky. Koncept tabuľkovej prezentácie údajov nepotrebuje ďalšie vysvetlenie. V. HTML tabuľky sa používajú nielen tradične ako spôsob prezentácie údajov, ale aj ako prostriedok formátovania webových stránok. Tu sú príklady dokumentov z reálneho života, v ktorých je tabuľkové zobrazenie vhodným spôsobom, ako vytvoriť dokument. Na obr. 4.1 ukazuje typický príklad použitia tabuliek na reprezentáciu číselných údajov rozdelených do riadkov a stĺpcov. Na obr. 4.2 použitie tabuľky slúži iba na účely formátovania dokumentu, nastavenie relatívnej polohy prvkov stránky. Pri prezeraní takého dokumentu nie je okamžite zrejmé, že na jeho zostavenie bola použitá tabuľka, pretože rámčeky okolo jeho buniek nie sú nakreslené.

Prvá verzia jazyka HTML neposkytovala špeciálne prostriedky na zobrazenie tabuliek, pretože bol určený hlavne na písanie jednoduchého textu. S rozvojom oblastí použitia dokumentov HTML sa stala naliehavá úloha prezentácie údajov, pre ktoré je typická prítomnosť radu riadkov a stĺpcov. Najprv sa tvorba dokumentov obsahujúcich údaje zarovnané so stĺpcami uskutočňovala pomocou vopred naformátovaného textu, v rámci ktorého sa zabezpečilo potrebné zarovnanie zavedením správne množstvo medzery. Pripomeňme, že text je v páre značiek 

A
sa zobrazuje monospacálnym písmom a všetky medzery a karty sú dôležité. Zarovnávacie práce pre takýto text boli vykonávané ručne, čo výrazne spomalilo vytváranie dokumentov. Podpora tabuľkových údajov sa stala de facto štandardom, pretože bola pôvodne implementovaná vo všetkých hlavných prehliadačoch a až po značnom čase bola opravená v špecifikácii HTML 3.2.

Špeciálne nástroje na vytváranie tabuliek však nepopierajú možnosť použitia predformátovaného textu. Použitie tabuliek nie je obmedzené na údaje pozostávajúce z riadkov a stĺpcov. Jedným z použití je usporiadanie umiestnenia rôznych údajov na stránke, ktoré môžu pozostávať z obyčajného textu, obrázkov, iných tabuliek atď. Táto kapitola je venovaná pravidlám vytvárania tabuliek a príkladom ich použitia.

Ryža . 4.1. Typický príklad tabuľky HTML


Ryža . 4.2. Príklad tabuľky bez okrajov

Vytváranie najjednoduchších tabuliek HTML

Uvažujme najskôr o minimálnej množine značiek a ich parametroch, potrebných a postačujúcich na vytváranie jednoduchých tabuliek, a potom pristúpime k ich podrobnému popisu.

Popis tabuliek by mal byť umiestnený v časti dokumentu ... Dokument môže obsahovať ľubovoľný počet tabuliek a tabuľky je možné navzájom vkladať. Každá tabuľka musí začínať štítkom

a končiť visačkou
... Vnútri tejto dvojice značiek je popis obsahu tabuľky. Akákoľvek tabuľka pozostáva z jedného alebo viacerých riadkov, z ktorých každý určuje údaje pre jednotlivé bunky.

Každý riadok začína značkou (Riadok tabuľky) a končí značkou... Jedna bunka v rade je orámovaná dvojicou značiek a(Údaje tabuľky) alebo a(Hlavička tabuľky). Označiť sa zvyčajne používa pre bunky hlavičky tabuľky a - pre dátové bunky. Rozdiel v použití spočíva iba v type písma, ktoré sa predvolene používa na zobrazenie obsahu buniek, ako aj v umiestnení údajov v bunke. Obsah buniek typu zobrazené tučne a na stred (ALIGN = CENTER, VALIGN = MIDDLE). Bunky definované značkou štandardne zobrazuje údaje zarovnané doľava (ALIGN = VĽAVO) a v strede (VALIGN = MIDDLE) vo zvislom smere.

Značky a sa nemôže objaviť mimo popisu riadka tabuľky ... Koncové kódy, a možno vynechať. V tomto prípade je koniec popisu riadka alebo bunky začiatok nasledujúceho riadka alebo bunky alebo koniec tabuľky. Značka koncovej tabuľky nemožno vynechať.

Počet riadkov v tabuľke je určený počtom otváracích značiek a počet stĺpcov je maximálny počet alebo medzi všetkými riadkami. Niektoré bunky nemusia obsahovať žiadne údaje. Tieto bunky sú popísané dvojicou nasledujúcich značiek v rade - , ... Ak jedna alebo viac buniek na konci riadka neobsahuje údaje, je možné ich popis vynechať a prehliadač automaticky pridá požadovaný počet prázdnych buniek. Z toho vyplýva, že konštrukcia tabuliek, v ktorých je v rôznych riadkoch umiestnený rôzny počet stĺpcov rovnakej veľkosti, nie je povolená.

Tabuľka môže mať názov, ktorý je uzavretý v niekoľkých značkách a... Popis hlavičky tabuľky musí byť umiestnený vnútri značiek

a
kdekoľvek, ale mimo rozsahu pôsobnosti ktorejkoľvek zo značiek , alebo ... Podľa špecifikácie jazyka HTML je umiestnenie popisu názvu prísnejšie regulované: musí byť umiestnené bezprostredne za značkou a pred prvým ... Odporúčame vám dodržať toto pravidlo.

V predvolenom nastavení je text hlavičky tabuľky umiestnený nad ňou (ALIGN = HORNE) a horizontálne zarovnaný na stred.

Uvedené značky môžu mať parametre, ktorých počet a hodnoty sa líšia. V najjednoduchšom prípade sa však značky používajú bez parametrov, ktoré nadobúdajú predvolené hodnoty.

Tieto informácie sú dostatočné na zostavenie základných tabuliek. Uveďme príklad najjednoduchšia tabuľka, pozostávajúci z dvoch riadkov a dvoch stĺpcov, ktorých zobrazenie je znázornené na obr. 4.3.

Príklad najjednoduchšej tabuľky

Bunka 1 v riadku 1 Bunka 2, riadok 1
Bunka 1 v riadku 2 Bunka 2, riadok 2


Ryža. 4.Z. Príklad najjednoduchšej tabuľky

Zobraziť tabuľky na stránke

Pozrime sa na účel rôznych parametrov, ktoré je možné použiť v tagoch ​​popisujúcich tabuľky.

Hlavička tabuľky

Značka hlavičky tabuľky má jediný platný parameter ALIGN, ktorý môže byť TOP (hlavička nad tabuľkou) alebo BOTTOM (hlavička pod tabuľkou). Parameter ALIGN je možné vynechať, čo zodpovedá hodnote ALIGN = TOP. V horizontálnom smere je názov tabuľky vždy vycentrovaný. Tabuľka nemusí mať názov. Ako nadpis tabuľky je vo väčšine prípadov použitý obyčajný text, ktorý je upravený špecifikáciou HTML, ale v skutočnosti medzi tagmi a je dovolené písať akékoľvek prvky HTML použité v sekcii ... Tu je príklad záznamu v záhlaví tabuľky:

Nadpis sa nachádza v spodnej časti tabuľky

Ak je k vyššie uvedenému príkladu pridaný tento popis hlavičky, potom sa tabuľka zobrazí tak, ako je to znázornené na obr. 4.4.

Ryža. 4.4. Tabuľka s názvom

Prehliadač Microsoft internet Explorer poskytuje pridané vlastnosti vyberte umiestnenie titulu. Parameter ALIGN akceptuje hodnoty LEFT, CENTER a RIGHT na horizontálne zarovnanie spolu s hodnotami popísanými vyššie. Všimnite si toho, že toto je jeden zo zriedkavých prípadov, keď je široko používaný parameter ALIGN možné použiť na horizontálne aj vertikálne zarovnanie. Napríklad ALIGN = RIGHT zabezpečí, že hlavička bude umiestnená vpravo a nad tabuľkou. Ak napíšete ALIGN = BOTTOM, potom rovnako ako vo vyššie uvedenom príklade bude názov umiestnený pod tabuľkou. Parameter ALIGN však nemožno použiť dvakrát v tej istej hlavičke. Preto bol navyše predstavený špeciálny parameter pre zvislé zarovnanie - VALIGN, ktorý naberá hodnoty HORNE alebo SPODNE. Napríklad pre nadpis v spodnej časti tabuľky, zarovnaný doľava, popis vyzerá takto:

Vľavo zarovnaný dolný nadpis

Tabuľka s týmto popisom názvu v programe Microsoft Internet Explorer sa zobrazí nasledovne (obr. 4.5). Ak je tento príklad zobrazený v programe Netscape, hlavička bude predvolene umiestnená, tj. Nad tabuľkou a v strede horizontálne.

Ryža. 4.5. Horizontálne zarovnanie hlavičky tabuľky v programe Microsoft Internet Explorer

Funkcie horizontálneho zarovnania hlavičky tabuľky sú rozšírením špecifikácie HTML, nie sú podporované prehliadačom Netscape Navigator, a preto by sa mali používať iba vtedy, ak je to nevyhnutné.

Parametre značky

Hlavnou značkou používanou pri vytváraní tabuliek je značka

... Môže byť použitý s radom parametrov, z ktorých každý môže byť vynechaný. Platné možnosti sa líšia v závislosti od prehliadača. Podľa špecifikácie HTML v značke
je možné použiť nasledujúce parametre: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Prehliadače NetScape a Microsoft Internet Explorer umožňujú okrem piatich vyššie uvedených parametrov použiť aj parametre HEIGHT a BGCOLOR. Niektoré prehliadače umožňujú nastaviť aj ďalšie parametre. Zoberme si účel bežne používaných parametrov značiek
.

BORDER parameter

Parameter BORDER riadi vykreslenie okraja okolo každej bunky, čo v zásade dáva čiary mriežky tabuľky a okolo celej tabuľky. V predvolenom nastavení nie sú nakreslené žiadne rámčeky a používateľovi sa na obrazovke zobrazí iba rovnomerne rozložený text buniek tabuľky. Existuje mnoho situácií, kde je použitie tabuliek bez okrajov celkom opodstatnené, napríklad pre viacstĺpcové zoznamy implementované pomocou tabuliek alebo zadanie presnej relatívnej polohy obrázkov a textu. Vo väčšine prípadov je však pre tradičné používanie tabuliek užitočné oddeliť bunky od seba čiarami, čo uľahčuje vnímanie a porozumenie informáciám obsiahnutým v tabuľke.

Ak chcete do tabuľky pridať rámčeky, musíte zahrnúť do kódu

parameter BORDER, čo môže byť číselná hodnota.

Napríklad,

alebo
.

Číselná hodnota parametra určuje hrúbku okraja v pixeloch nakresleného okolo celej tabuľky, táto hodnota však neovplyvňuje hrúbku okrajov okolo každej bunky. Pri absencii číselnej hodnoty sa zvyčajne predpokladá, že sa rovná minimálnej hodnote (1), aj keď sa štýl zobrazovania rámcov môže v rôznych prehliadačoch líšiť. Schopnosť nezávisle ovládať zobrazenie okraja okolo celej tabuľky a okrajov okolo buniek nie je k dispozícii.

Príklad tabuľky s 10-pixelovým okrajom je znázornený na obr. 4.6.


Ryža. 4.6. Tabuľka s 10-pixelovým okrajom

Špecifikácia HTML 3.0 neobsahovala hodnotu pre parameter BORDER. To sa robí iba v HTML 3.2. Napríklad staršie verzie programu Microsoft Internet Explorer neumožňovali zadanie číselnej hodnoty.

Všimnite si toho, že pri absencii parametra BORDER sa rámce nenakreslia, ale zostane pre ne priestor (to platí len pre Netscape). Celková veľkosť tabuľky pri absencii alebo prítomnosti parametra BORDER sa nemení (výnimkou je prípad, keď je zadaný BORDER = 0). Minimálna vzdialenosť medzi dvoma susednými bunkami sa teda v týchto prípadoch bude rovnať dvojnásobku hrúbky rámca, tj. Dvoch pixelov. Bunky je možné usporiadať čo najbližšie k sebe nastavením BORDER = 0, čo znamená, že neexistujú žiadne rámce. Niektoré prehliadače nemusia podporovať nastavenie číselnej hodnoty parametra BORDER, potom bude hodnota rovnajúca sa nule ignorovaná a tabuľka bude nakreslená s okrajmi.

Tu je niekoľko príkladov:

Všetky tri uvedené príklady vykreslí prehliadač Netscape odlišne. Všimnite si toho, že tu existuje pomerne jedinečný prípad, v ktorom nemožno hovoriť o predvolenej hodnote. Tretí príklad, kde je parameter BORDER vynechaný, sa líši od akéhokoľvek príkladu, kde je tento parameter prítomný. V programe Microsoft Internet Explorer sú druhý a tretí príklad identické, takže predvolená hodnota parametra BORDER je pre tento prehliadač nulová.

Parameter CELLSPACING

Forma zápisu parametra: CELLSPACING = num, kde num je číselná hodnota parametra v pixeloch, ktorú nemožno vynechať. Hodnota num určuje vzdialenosť medzi susednými bunkami (presnejšie medzi rámcami buniek), horizontálne aj vertikálne. Štandardne sa predpokladá, že hodnota je dve. Všimnite si toho, že v publikačných systémoch majú susedné bunky tabuľky spoločné ohraničenie. V tabuľkách HTML je medzi nimi v predvolenom nastavení ponechaný priestor, ako je zrejmé z vyššie uvedeného obrázku (obrázok 4.6). Keď nastavíte CELLSPACING = 0, okraje susedných buniek sa spoja a vytvoria dojem jednej mriežky tabuľky (obr. 4.7).


Ryža. 4.7. Tabuľka s CELLSPACING = 0

Parameter CELLPADDING

Zápis parametrov je podobný výrazu CELLSPACING. Hodnota num určuje množstvo voľného miesta (výplň) medzi okrajom bunky a údajmi vo vnútri bunky. Štandardne sa predpokladá, že hodnota je jedna. Nastavenie parametra CELLPADDING na nulu môže spôsobiť, že sa niektoré časti textu bunky dotknú jeho okraja, čo nevyzerá veľmi esteticky.

Na obr. 4.8 ukazuje príklad tabuľky s CELLPADDING = 10.


Ryža. 4.8. Tabuľka s CELLPADDING = 10

Parametre CELLPADDING a CELLSPACING sú si navzájom veľmi podobné. V prípade tabuľky bez okrajov vedie zmena jedného alebo druhého parametra k rovnakému výsledku. Oba parametre ovplyvňujú zodpovedajúce okraje horizontálne aj vertikálne. Žiaľ, oddelená správa horizontálnych a vertikálnych okrajov sa vykonáva napríklad pre okraje z obrázkov (parametre HSPACE a VSPACE značky ), neboli poskytnuté.

Všetky tri parametre - BORDER, CELLPADDING a CELLSPACING pôsobia nezávisle od seba, ak je niektorý z nich vynechaný, použije sa jeho predvolená hodnota. Ak sú vynechané všetky vyššie uvedené parametre, minimálna vzdialenosť medzi údajmi zo susedných buniek bude 6 pixelov (pre Netscape). Táto hodnota sa skladá z dvoch pixelov pre CELLSPACING, jedného pixela pre CELLPADDING a jedného pixelu pre orámovanie každej bunky. Najkompaktnejšia tabuľka sa získa zadaním nasledujúceho popisu:

Bunky budú iba v tejto verzii umiestnené blízko seba. Príkladom použitia je tabuľka, ktorej všetky bunky obsahujú obrázky rovnakej veľkosti, ktoré je potrebné umiestniť vedľa seba.

Parametre ŠÍRKA a VÝŠKA

Pri zobrazovaní tabuliek prehliadač automaticky vypočítava ich šírku a výšku a závisí od mnohých faktorov: hodnôt parametrov uvedených v popise celého dokumentu, tejto tabuľky, jej jednotlivých riadkov a buniek, obsahu buniek , ako aj parametre nastavené pri prezeraní dokumentu v konkrétnom prehliadači, napríklad typ a veľkosť písma, veľkosť zobrazovacej oblasti atď. Pri zobrazení sa veľkosti tabuliek vypočítavajú automaticky s prihliadnutím na tieto faktory, pričom sa pokúša prezentovať stôl v najpohodlnejšej forme - usporiadať stôl tak, aby sa zmestil do výrezu. Všeobecná schéma prezerania veľkých dokumentov sa spravidla obmedzuje na lineárne posúvanie obsahu dokumentu vertikálne a čítanie textu, popretkávaného rôznymi tabuľkami, obrázkami atď. Platí to pre dokumenty HTML aj pre bežné dokumenty vytvorené v ľubovoľnom textové editory ... Väčšinou ako textové editory (napr. Microsoft Word), ako aj prehliadače HTML automaticky formátujú text tak (ak je to možné) tak, aby dĺžka riadkov nepresahovala šírku výrezu. Vyhnete sa tak potrebe horizontálneho posúvania dokumentu. Podobné akcie vykonávajú aj prehliadače s tabuľkami - ak je to možné, naformátujte ich tak, aby šírka tabuľky nepresahovala šírku výrezu. Možno dospieť k záveru, že šírka tabuliek je dôležitejšia ako primárny parameter, ktorého výpočet sa vykonáva predovšetkým v porovnaní s výškou.

Dynamická zmena veľkosti tabuľky má vo väčšine prípadov za následok esteticky proporčný obraz s efektívnym využitím skutočnej oblasti výrezu. Môže však byť potrebné vynútiť šírku alebo výšku stola. Na tento účel sa používajú parametre WIDTH (šírka tabuľky) a HEIGHT (výška tabuľky) značky

... Forma zápisu: WIDTH = num alebo WIDTH = num%, kde num je číselná hodnota šírky celej tabuľky v pixeloch alebo ako percento z celkovej veľkosti okna. Uvedomte si, že je dovolené špecifikovať hodnoty vyššie ako 100%, aj keď je ťažké si predstaviť prípad, keď je to nevyhnutné. Príklad:

.

Podobné parametre je možné nastaviť pre jednotlivé bunky. Uvedomte si, že zadanie konkrétnej hodnoty pre parameter, napríklad WIDTH = 200, neznamená, že tabuľka bude mať v každom prípade uvedenú šírku, ale určuje iba odporúčanú šírku, ktorá bude zachovaná vždy, keď je to možné. Vysvetlíme to na príkladoch. Nech existuje tabuľka, ktorá by za daných podmienok mala štandardne šírku menšiu ako je zadaná. V takom prípade prehliadač zvýši šírku tabuľky na požadovanú proporcionálnym rozšírením všetkých stĺpcov tabuľky. Zúženie výrezu nadol nezmení šírku tabuľky a na jej zobrazenie bude možno potrebné vodorovne posúvať. Ak má tabuľka predvolenú šírku väčšiu ako zadanú, prehliadač sa pokúsi zmenšiť jej šírku tak, že po prvé zmenší šírku jednotlivých stĺpcov, pre ktoré je zadaná šírka väčšia ako požadovaná, a po druhé, prelomí text v oddelených bunkách do niekoľkých riadkov so zväčšením výšky tabuľky. Tieto akcie nemusia poskytnúť požadovanú veľkosť tabuľky a potom budú mať najmenšiu možnú šírku. Pri zúžení výrezu sa vykonajú rovnaké akcie pre tabuľky, ktoré nemajú rozmery.

Špecifické algoritmy na nastavovanie tabuliek pre rôzne prehliadače sa môžu mierne líšiť.

Parameter ALIGN

Daný parameter značky

definuje horizontálnu polohu tabuľky vo výreze. Platné hodnoty sú LEFT (zarovnané doľava) a RIGHT (napravo). Tabuľky sú predvolene zarovnané doľava. Upozorňujeme, že platné hodnoty neobsahujú typickú hodnotu pre parameter zarovnania - CENTER. Niektoré zdroje HTML citujú v tomto prípade CENTER (v strede) ako platné. Nasleduje špecifikácia HTML, ale v praxi Netscape Navigator aj Microsoft Internet Explorer implementujú iba dve hodnoty. Faktom je, že prítomnosť parametra ALIGN v značke
určuje nielen umiestnenie tabuľky, ale tiež umožňuje textu prúdiť okolo tabuľky z opačnej strany, podobne ako tok obrázkov. Obtekanie textu okolo stola z oboch strán nie je v žiadnom prípade k dispozícii. Na presnejšie ovládanie toku použite značku
s parametrom CLEAR rovnakým spôsobom, akým sa to robí pre ... Ak je parameter ALIGN vynechaný, priestor napravo a / alebo naľavo od tabuľky bude vždy prázdny bez ohľadu na jeho šírku. Ak tabuľka nevyžaduje obtiahnutie textu, môžete dosiahnuť jeho umiestnenie v strede výrezu. Za týmto účelom môžete napríklad vložiť celý popis tabuľky do dvojice značiek
a
.

Tu je príklad tabuľky s plynulým textom, ktorej zobrazenie je znázornené na obr. 4.9.

Tabuľka s textom, ktorý okolo nej prúdi


dospelý

obyvateľov Petrohradu

  • Abram
  • Alexander
  • Alexey
  • Albert
  • Anatolij
  • Andrey

  • Arkady
  • Boris
  • Vadim
  • Valentína
  • Valery
  • Bazalka

  • Viktor
  • Vitaly
  • Vladimír
  • Vladislav
  • Vyacheslav

  • Gennadij
  • George
  • Hermann
  • Gregory
  • Dmitriy

    		•

  • Evgeniy
  • Efim
  • Ivan
  • Igor
  • Ilya
  • Jozef
  • Konstantin

  • Lev
  • Leonid
  • Michael
  • Nikolay
  • Oleg
  • Paul
  • Peter

  • román
  • Semyon
  • Sergej
  • Stanislav
  • Edward
  • Jurij
  • Jacob

    		•








    43 uvedených najčastejších mien pokrýva 92% vzorky.

    Ryža. 4.9. Tabuľka bez okrajov so plynulým textom

    Tento dokument pozostáva z tabuľky bez okrajov s parametrom zarovnania ALIGN = Vľavo, ktorá umožňuje umiestniť text za tabuľkou napravo od tabuľky. Tabuľka pozostáva iba z jedného riadka, ktorý obsahuje dve bunky. Každá bunka obsahuje časť neusporiadaného zoznamu

      ... Použitie tabuľky na zobrazenie zoznamu je jedným zo spôsobov, ako vynútiť zoznam do viacerých stĺpcov, čo je tiež znázornené na tomto príklade. Text umiestnený vpravo od tabuľky sa tam nemusí všetko zmestiť, pričom bude pokračovať za tabuľkou. Skúste použiť tento príklad na zmenšenie šírky výrezu prehliadača a v určitom okamihu sa všetok text zobrazí v spodnej časti tabuľky. Pripomeňme, že na násilné prerušenie toku textu pozdĺž tabuľky (napríklad ak nasledujúci text logicky nesúvisí s tabuľkou a mal by byť umiestnený pod ňou), mali by ste použiť kód
      so sadou parametrov CLEAR. Pre tento príklad musíte napísať
      alebo
      ... Niektoré prehliadače umožňujú zapísať parameter CLEAR bez hodnoty, to sa však neodporúča. Na splnenie tej istej úlohy zadaním viacriadkových kanálov
      bez parametra CLEAR (ako sa to robí v príklade pred textom na jeho posunutie o niekoľko riadkov nadol) alebo niekoľkých kódov na začiatku nového odseku

      Nesprávne rozhodnutie.

      Ukážme trochu iný príklad na vytvorenie takejto stránky, ktorej zobrazenie je znázornené na obr. 4.10.

      Tabuľka bez zalamovania textu

      Najbežnejšie mužské mená

      dospelá populácia Petrohradu

    • Abram
    • Alexander
    • Alexey
    • Albert
    • Anatolij
    • Andrey

    • Arkady
    • Boris
    • Vadim
    • Valentína
    • Valery
    • Bazalka

    • Viktor
    • Vitaly
    • Vladimír
    • Vladislav
    • Vyacheslav

    • Gennadij
    • George
    • Hermann
    • Gregory
    • Dmitriy

      		•

    • Evgeniy
    • Efim
    • Ivan
    • Igor
    • Ilya
    • Jozef
    • Konstantin

    • Lev
    • Leonid
    • Michael
    • Nikolay
    • Oleg
    • Paul
    • Peter

    • román
    • Semyon
    • Sergej
    • Stanislav
    • Edward
    • Jurij
    • Jacob

      		•

      Predložené údaje boli získané na základe analýzy reprezentatívnej vzorky obsahujúcej informácie o 5 000 mužoch nad 18 rokov žijúcich v Petrohrade.
      Týchto 43 najčastejšie sa vyskytujúcich mien pokrýva 92% vzorky.
      Frekvencia výskytu každého z ostatných názvov nepresahuje 0,3%

      Ryža. 4.10. Tabuľka bez okrajov s tromi stĺpcami

      Na rozdiel od predchádzajúceho príkladu okolo tabuľky netečie žiadny text. Celý dokument pozostáva z jednej tabuľky s nadpisom obsahujúcim tri bunky v jednom riadku. Prvé dve bunky úplne opakujú predchádzajúci príklad. Tretia bunka obsahuje text, ktorý komentuje obsah prvých dvoch buniek. Ako je popísané v predchádzajúcom prípade, nie je potrebné nastavovať vynútený zlom textu. Všetok text súvisiaci s tabuľkou by mal byť umiestnený v tretej bunke a nasledujúci text - po skončení popisu celej tabuľky... Oba príklady vyzerajú pri zobrazení na celú obrazovku rovnako, okrem hlavičky, ktorá je v prvom prípade v strede dvojstĺpcového zoznamu a v druhom je v strede všetkých troch stĺpcov tabuľky. Keď sa však v poslednom prípade zmenší zobrazovaná oblasť, žiadna časť textu nemôže ísť pod tabuľku, čím sa naruší jej štruktúra.

      Formátovanie údajov v tabuľke

      Každú jednotlivú bunku v tabuľke je možné považovať za oblasť nezávislého formátovania. Na formátovanie textu v bunke je možné použiť všetky pravidlá, ktoré upravujú zobrazenie textu. Takmer všetky prvky HTML, ktoré sa môžu objaviť v tele dokumentu, sú v bunke povolené. , vrátane značiek, ktoré určujú rozloženie textu -

      ,
      ,

      , kódy hlavičky - od

      predtým

      , značky formátovania znakov -<В>, , , , , , , značky vkladajú grafické obrázky , hypertextové odkazy<А>Ihneď zdôrazňujeme, že rozsah značiek špecifikovaných v rámci jednej bunky je obmedzený na hranice tejto bunky bez ohľadu na prítomnosť koncovej značky. Ak je napríklad v bunke definovaná farba textu - , potom aj keď neexistuje žiadny ukončovací kód alebo umiestnením do niekoľkých buniek alebo riadkov tabuľky sa text ďalšej bunky prejaví v predvolenej farbe.

      Nasledujúce možnosti sú k dispozícii na formátovanie údajov v bunkách tabuľky.

      Možnosti zarovnania pre obsah buniek sú ALIGN a VALIGN. Môže byť použitý v kódoch , a ... Parameter horizontálneho zarovnania ALIGN môže byť LEFT, RIGHT a CENTER (predvolené je LEFT pre a CENTRUM pre ). Parameter zvislého zarovnania VALIGN môže byť TOP (hore), BOTTOM (dole), MIDDLE (uprostred), BASELINE (základná čiara). Predvolená hodnota je STREDNÁ. Zarovnanie podľa základnej čiary zaisťuje, že text jedného riadka vo všetkých bunkách sa ukotví do jedného riadka. Nastavenie možností zarovnania na úrovni kódu určuje zarovnanie pre všetky bunky tohto riadku, pričom v každej jednotlivej bunke riadku je možné definovať jeho vlastné parametre, ktoré prepíšu účinok parametrov uvedených v .

      Tu je príklad tabuľky, v ktorej sú údaje v bunkách prvého stĺpca zarovnané vpravo, druhý stĺpec je vycentrovaný a tretí je zarovnaný doľava (predvolené):

      Zarovnávacie prvky tabuľky

      Bunka 1 Bunka 2 Bunka 3
      Bunka 4 Bunka 5 Bunka 6

      Zobrazenie tohto príkladu prehliadačom je znázornené na obr. 4.11.

      Ryža. 4.11. Zarovnávanie údajov v bunkách tabuľky

      Parameter NOWRAP deaktivuje schopnosť automaticky rozdeľovať text bunky do riadkov. Môže byť použitý v kódoch , a ... Malo by sa zabrániť neoprávnenému použitiu tohto parametra, pretože môže výrazne znížiť schopnosť dynamicky meniť veľkosť tabuliek a zhoršovať ich vnímanie. Vo väčšine prípadov stačí použiť NOWRAP na jednotlivé bunky, ktoré skutočne vyžadujú zákaz zalamovania slov na nový riadok. Zalomenie slov vykonávajú iba oddeľovače medzi slovami (medzery) a v niektorých prípadoch na účely zákazu lámania textu na určitých miestach namiesto medzery zadajte kód medzery (NonBreaking Space). Medzi príklady patria prípady, keď sa medzera neodporúča - medzi číselnou hodnotou a mernou jednotkou danej hodnoty; medzi priezviskom a iniciálkami. Takže text 650 km alebo Jeľcin B.N. odporúča sa písať vo formulári 650 km a Jeľcin B.N.

      V kódoch je možné použiť parametre ŠÍRKA a VÝŠKA a ... Ich syntax je podobná syntaxi týchto parametrov pre značku

      ... Ich hodnota určuje šírku alebo výšku bunky, pre ktorú sú tieto parametre zapísané. Hodnoty je možné zadať v pixeloch alebo ako percento z veľkosti celej tabuľky. Microsoft Internet Explorer umožňuje nastaviť hodnotu WIDTH iba v pixeloch. Pretože tabuľka je koherentná štruktúra pozostávajúca z riadkov a stĺpcov, nastavenie šírky bunky ovplyvní šírku celého stĺpca, v ktorom sa bunka nachádza, a nastavenie výšky ovplyvní celý riadok. Ak je hodnota šírky v stĺpci zadaná iba v jednej bunke, potom sa táto hodnota stane šírkou celého stĺpca. Ak existuje niekoľko takýchto indikácií, potom je zvolená maximálna hodnota. Rovnaké vlastnosti platia aj pre struny.

      Komplexné tabuľky sa vyznačujú potrebou spojiť niekoľko susedných buniek horizontálne alebo vertikálne do jednej. Táto funkcia je implementovaná pomocou parametrov COLSPAN (COLiimn SPANning) a ROWSPAN (ROW SPANning), nastavených v kódoch

      sú nastavené nastavenia pre jednotlivé stĺpce tejto skupiny. Navyše v tagu v prípade potreby by bolo možné špecifikovať parametre zarovnania, ktorých hodnoty platia pre všetky stĺpce danej skupiny. Hodnoty parametrov uvedené v značke , prepísať hodnoty zo značky ... Všimnite si to v značke v tomto prípade na rozdiel od predchádzajúceho neexistuje parameter SPAN. Tu jeho použitie nemá zmysel, pretože počet prvkov v skupine bude určený tými, ktoré nasledujú za značkou tagy ... Preto akákoľvek daná hodnota parametra SPAN značky budú prepísané.

      Na obr. 4.17 ukazuje výsledok implementácie vyššie uvedeného kódu, ako aj variant zobrazenia takejto tabuľky so záznamom RULES = GROUPS v značke

      alebo ... Forma zápisu: COLSPAN = num, kde num je číselná hodnota, ktorá určuje, koľko stĺpcov sa má horizontálne rozbaliť aktuálna bunka. Použitie parametra ROWSPAN je podobné, len tu zadáte počet riadkov, ktoré by aktuálna bunka mala zachytiť vertikálne. Štandardne sú tieto parametre nastavené na jednu. Súčasné nastavenie hodnôt oboch parametrov pre jednu bunku je povolené. Správne nastavenie hodnôt týchto parametrov nemusí byť veľmi jednoduchá úloha, najmä preto, že väčšina editorov HTML vám umožňuje vizuálne vytvárať s následnou generáciou kódov HTML iba najjednoduchšie tabuľky.

      Na obr. 4.12 ukazuje príklad zobrazenia tabuľky získaný pomocou nasledujúceho kódu HTML:

      Použitie parametrov COLSPAN a ROWSPAN

      Bunka pokrývajúca dva riadky Bunka pokrývajúca dva stĺpce
      Bunka 3 Bunka 4
      Bunka 5 Bunka 6 Bunka 7


      Ryža. 4.12. Tabuľka s bunkami pokrývajúcimi viac riadkov alebo stĺpcov

      Nepozorné nastavovanie hodnôt parametrov kĺzania buniek môže viesť k ich vzájomnému prekrývaniu a konfliktom, v ktorých je výsledok nepredvídateľný. Typickým použitím rozšírených buniek je spoločný nadpis pre niekoľko susedných stĺpcov alebo riadkov.

      Tu je príklad HTML kódu (ktorého zobrazenie je znázornené na obr. 4.13), v ktorom sú rozšírené bunky vytvorené nesprávne.

      Nesprávne použitie rozšírených buniek

      Bunka 1 Bunka 2

      Bunka 3
      (bežné
      Ha tri
      riadky)
      Bunka 4Bunka 5
      Bunka 6 Bunka 7 (rozložená do dvoch stĺpcov)

      Ryža. 4.13. Výsledok nesprávnej definície rozšírených buniek (prekrytie textu)

      Parameter BGCOLOR nastavuje farbu pozadia pre celú tabuľku, jednotlivé riadky alebo bunky. Môže sa nachádzať v tagoch

      , , neobsahuje žiadne informácie ani jednu alebo viac medzier, ktoré nie sú považované za údaje. Bunky obsahujúce neviditeľné údaje môžu napríklad obsahovať kód alebo kód informačného kanála
      alebo akýkoľvek text, ktorý sa zhoduje s farbou pozadia bunky. Ak bunky obsahujúce údaje (aj keď neviditeľné) zobrazujú všetky prehliadače rovnakým spôsobom, prázdne bunky sa zobrazia odlišne. Prehliadač Netscape nezobrazuje prázdnu bunku, to znamená, že miesto, kde sa táto bunka nachádza, bude na rozdiel od buniek obsahujúcich údaje natreté farbou pozadia stránky, a nie farbou pozadia bunky. Okolo prázdnych buniek nie je nakreslený žiadny okraj. Príklad tabuľky s prázdnou bunkou je znázornený na obr. 4.15.


      Ryža. 4.15. Bunka prázdnej tabuľky sa v rôznych prehliadačoch vykresľuje odlišne

      Microsoft Internet Explorer zobrazí obe bunky s farbou pozadia buniek. Prehliadač, akým je napríklad NSCA Mosaic, poskytuje používateľovi možnosť určiť povahu výstupu prázdnych buniek tabuľky výberom príslušných možností. Znalosť týchto funkcií vám umožní navrhnúť tabuľky, ktoré sa budú zobrazovať vhodným spôsobom bez ohľadu na prehliadač, ktorý si používateľ zvolí. V niektorých prípadoch na to stačí vytvoriť bunky obsahujúce jeden kód namiesto niektorých prázdnych buniek.

      Zarovnávanie údajov v stĺpcoch tabuľky

      Bežným problémom pri vytváraní tabuliek je nastavenie možností zarovnania pre jednotlivé riadky alebo stĺpce. Ak chcete zarovnať obsah všetkých buniek aktuálneho riadka, stačí v kóde nastaviť požadované parametre

      ... Častejšie je však potrebné zaistiť rovnaké zarovnanie pre všetky položky v rovnakom stĺpci, pretože vo väčšine prípadov stĺpec obsahuje homogénne údaje. V starších verziách HTML bolo navrhnuté použiť na to parameter COLSPEC (COLumn SPECification), ktorý bol uvedený v značke.
      a ... Táto funkcia nie je podporovaná špecifikáciou HTML, ale podporuje ju Netscape aj Microsoft Internet Explorer. Záznamový formulár je rovnaký ako pre značku , a to: BGCOLOR = hodnota, kde hodnota určuje farebný obsah vo formáte RGB alebo jeho názov.

      Príklad:

      		alebo .

      Vnorené stoly

      Jednotlivé bunky tabuľky môžu obsahovať takmer všetky jazykové značky a údaje povolené v sekcii dokument. Konkrétne je možné do bunky bunky tabuľky umiestniť ďalšiu tabuľku. Takéto tabuľky sa nazývajú vnorené tabuľky. Pravidlá pre ich konštrukciu sa nelíšia od konštrukcie tabuliek a nepotrebujú samostatný popis. Len si všimnime, že nie všetky prehliadače, ktoré podporujú tabuľky, správne odrážajú zložité tabuľky s niekoľkými úrovňami vnorenia, takže ich používanie vyžaduje opatrnosť.

      Tu je príklad tabuľky používajúcej jednu úroveň vnorenia.

      Mestá Leningradskej oblasti

      Mestá Leningradskej oblasti

      H - mestská populácia (tisíc obyvateľov, 1992)

      P - vzdialenosť od Petrohradu (km)

      Mestá podriadené Petrohradu
      MestoHP
      Zelenegopsk 13.6

      50

      Kolpino144.6

      26

      Kronstadt 45.2

      48

      Lomonosov 42.0

      40

      Pavlovsk 25.4

      30

      Petrodvorec 83.8

      29

      Puškin 95.1

      24

      Sestroretsk 34.9

      35

      Všetky mestá podriadené
      administratíva
      Petrohrad, maj
      priame mesto
      telefónne čísla.

      Krajské mestá
      MestoHP
      Boksitogorsk 21.6

      ZARIADENIE = SPRÁVNE> 245

      Balkhov 50.3

      ZARIADENIE = PRÁVO> 122

      Bcevolozhsk 32.9

      24

      Vyborg 80.9 130
      Vysotsk 1.0

      ZARIADENIE = PRÁVO> 159

      Gatchina 80.9 46
      Ivangorod 11.9

      ZARIADENIE = SPRÁVNE> 147

      Kamennogorsk 5.9 157
      Kingisepp 51.5

      ZARADENIE = PRÁVO> 138

      Kirishi 53.8

      ZARIADENIE = SPRÁVNE> 115

      Kirovsk 23.8

      55

      Lodeinoe Pole 27.3

      ZARADENIE = PRÁVO> 244

      Lyga 41.8139

      (Pokračovanie tabuľky)
      MestoHP
      Lyuban 4.7

      85

      Nová Ladoga 11.2

      ZARIADENIE = PRÁVO> 141

      Gratifikujúce 22. 9

      ZARIADENIE = PRÁVO> 40

      Pikalevo 25.1

      ZARIADENIE = SPRÁVNE> 246

      podpora 23.1285
      Primorsk 6.7137
      Priozersk 20.5

      ZARADENIE = PRÁVO> 145

      Svetogorsk 15.8

      ZARADENIE = PRÁVO> 201

      Bridlice 42.6

      ZARIADENIE = PRÁVO> 192

      Stroje a zariadenia 57.6

      81

      Tichvin 72.0

      ZARADENIE = PRÁVO> 200

      Tosno 33.8

      53

      W liscelburgh 12.5

      64

      Ryža. 4.14. Príklad vnorených tabuliek

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

      Na prvý pohľad sa zdá, že príklad nemá vnorenie do tabuľky. V skutočnosti je celý dokument tabuľkou bez okrajov, ktorá pozostáva z nadpisu a iba jedného riadka obsahujúceho päť buniek. Organizácia takejto tabuľky slúži výlučne na usporiadanie údajov na stránke. Vnútri prvej bunky je ďalšia tabuľka, ktorá má vlastný názov a pozostáva z troch stĺpcov, za ktorými je text zarovnaný v strede. Tretia a piata bunka tiež obsahujú samostatné tabuľky. Druhá a štvrtá bunka sú prázdne, neobsahujú žiadne údaje a majú jeden parameter WIDTH, ktorý určuje jeho šírku. Ich účelom je nastaviť odsadenie medzi prvou a treťou, ako aj treťou a piatou bunkou, v ktorých sú umiestnené tabuľky. Je to jedna z možných možností nastavenia takéhoto odsadenia. Ďalšou možnosťou je použiť parameter CELLSPACING, ktorý určuje vzdialenosť medzi bunkami, ale tento parameter nastavuje horizontálne aj vertikálne zarážky, čo sa v súčasnosti nevyžaduje. Okrem toho sa prázdna bunka so zadanou šírkou zmenší pri zúžení výrezu na rozdiel od priestoru určeného parametrom CELLSPACING (rovnako ako CELLPADDING). Skúste použiť tento príklad na zmenšenie šírky výrezu v prehliadači alebo, čo povedie k rovnakým výsledkom, na zvýšenie veľkosti písma použitého na zobrazenie textu. Vzdialenosť medzi tabuľkami sa zníži na nulu, čo umožní vidieť všetky informácie súčasne čo najdlhšie, ďalšie zmeny však tabuľku nepoškodia, ale poskytnú možnosť horizontálneho posúvania. Podľa podobnej schémy môžete zorganizovať umiestnenie informácií, ktoré pozostávajú nielen z tabuliek, ale aj obrázkov, fragmentov textu atď.

      Vlastnosti stavebných stolov

      Táto časť pojednáva o niektorých konkrétnych schopnostiach jednotlivých prehliadačov a tiež o niektorých jemnostiach vytvárania a zobrazovania tabuliek.

      Zobrazujú sa prázdne bunky v tabuľkách

      Jednou z funkcií prezentácie tabuliek rôznymi prehliadačmi je zobrazenie prázdnych buniek. Podľa popisu jazyka by všetky prehliadače mali vkladať riadky s prázdnymi bunkami, ak je ich počet v ľubovoľnom riadku nastavený menej ako vo zvyšných riadkoch. Bunky, ktoré neobsahujú údaje, sa navyše dajú nájsť kdekoľvek v tabuľke. Existuje rozdiel medzi prázdnymi bunkami a bunkami, ktoré obsahujú neviditeľné údaje. V prázdnych bunkách vo vnútri dvojice značiek

      		a
      a určil zarovnanie a šírku každého stĺpca v tabuľke. Napríklad nastavenie colspec = "L40 R50 C80" určilo zarovnanie údajov v bunkách pre tri stĺpce tabuľky: pre prvý stĺpec - VĽAVO, pre druhý - PRAVÝ a pre tretí - CENTER, ako aj pre šírku každý stĺpec. Ako sa HTML vyvíjalo, táto možnosť bola zrušená a v súčasnosti nie je súčasťou jazykovej špecifikácie a väčšina prehliadačov ju nepodporuje. Výsledkom je, že Netscape Navigator nemá žiadne špeciálne nástroje na vyriešenie tohto problému a jedinou možnosťou je použiť buď predvolené zarovnanie, alebo v prípade potreby v každej bunke nastaviť príslušné hodnoty.

      Microsoft Internet Explorer poskytuje špeciálne značky -

      a ... Tieto značky by sa mali objaviť bezprostredne za popisom.
      pred prvým výskytom značky .

      Parametre značky

      a môže existovať SPAN, ktorý určuje počet susediacich stĺpcov, ktoré sú ovplyvnené hodnotami parametrov, a ALIGN, ktorý určuje horizontálne zarovnanie údajov vo všetkých bunkách zodpovedajúceho stĺpca (alebo stĺpcov). Platné hodnoty pre parameter ALIGN sú LEFT, RIGHT a CENTER. Predvolená hodnota pre parameter SPAN je jedna.

      Označiť

      navyše vám umožňuje nastaviť parameter VALIGN, ktorý určuje zvislé zarovnanie údajov v bunkách. Platné hodnoty pre parameter VALIGN sú STREDNÉ, HORNÉ a SPODNÉ.

      Rozdiel medzi značkami

      a spočíva v tom, že prvý z nich okrem nastavenia parametrov zarovnania údajov pre stĺpce tiež podmienene zlučuje niekoľko stĺpcov do skupiny. Účinok tejto kombinácie sa dostaví pri použití parametra RULES, ktorý je popísaný nižšie. Štandardne sú všetky stĺpce v tabuľke považované za jednu skupinu. Označiť by sa mali používať iba na definovanie zarovnania údajov v jednotlivých stĺpcoch v skupine.

      Uveďme príklad. Predpokladajme, že chcete zostaviť tabuľku obsahujúcu 6 stĺpcov s údajmi v prvých troch z nich zarovnanými vpravo a ďalšími tromi v strede. Na vyriešenie tohto problému by ste mali napísať nasledujúci kúsok kódu HTML:

      (údaje pre tabuľku)

      Výsledok zobrazenia tohto kódu je znázornený na obr. 4.16.

      Ryža. 4.16. Tabuľka s rôznymi možnosťami zarovnania pre údaje v skupinách buniek

      Ďalší príklad. Predpokladajme, že v predchádzajúcej tabuľke by mali byť prvé dva stĺpce zarovnané vpravo a tretí - v strede a všetky tri stĺpce by mali byť zoskupené. Nasledujúce tri stĺpce musia byť tiež zoskupené a musia mať rovnaké zarovnanie ako prvá skupina. Na vyriešenie tohto problému by ste mali napísať nasledujúci kúsok kódu HTML:

      (údaje pre tabuľku)

      V tomto prípade za značkou

      , z ktorého môžete vidieť význam zoskupovania.

      Rada

      Vzhľadom na rozsah značiek

      a je obmedzený na jediný prehliadač Microsoft Internet Explorer, mali by ste ich používať opatrne. Jednoduché použitie týchto značiek je zrejmé, ale v praxi je väčšina tabuliek zostavená s použitím príslušného parametra zarovnania ALIGN pre každú bunku tabuľky, kde je to potrebné, čo výrazne zvyšuje veľkosť zdrojového kódu tabuľky, ale umožňuje zobrazenie v ľubovoľnom prehliadači.


      Ryža. 4.17. Zoskupená stĺpcová tabuľka

      Nastavenie farby okrajov tabuľky

      Niekoľko ďalších možností, ktoré sú špecifické iba pre prehliadač Microsoft Internet Explorer, vám umožňuje vybrať farbu okrajov tabuľky - BORDERCOLOR, BORDERCOLORLIGHT a BORDERCOLORDARK. Tieto parametre je možné nastaviť v tagoch

      , ... Ako hodnotu týchto parametrov je možné použiť názov farby alebo jej hexadecimálnu hodnotu. Parameter BORDERCOLOR určuje farbu všetkých prvkov ohraničenia tabuľky a ďalšie dva parametre určujú farbu jednotlivých ohraničení prvkov, pričom prepíšu hodnotu BORDERCOLOR. Parameter BORDERCOLORLIGHT zafarbí ľavý a horný okraj celej tabuľky a podľa toho pravý a dolný okraj každej bunky v zadanej farbe. Druhý parameter BORDERCOLORDARK nastavuje farby protiľahlých hrán. Vzhľadom na kombináciu pôsobenia týchto parametrov bude tabuľka pôsobiť trochu vyvýšene nad povrch stránky alebo sa prehĺbi. Všetko závisí od zvolenej farebnej kombinácie.

      Poznámka

      Prehliadač Netscape 4.x podporuje aj parameter BORDERCOLOR.

      Nastavenie obrázku na pozadí pre tabuľku

      Microsoft Internet Explorer (rovnako ako Netscape 4.x) umožňuje parametru BACKGROUND definovať obrázok na pozadí pre tabuľku rovnakým spôsobom, akým je možné použiť celý dokument HTML. Tento parameter je možné nastaviť v tagoch

      , a
      , , w

      Microsoft Internet Explorer vám umožňuje použiť množstvo nových značiek na štruktúrovanie tabuliek a flexibilné ovládanie kreslenia rámcov a čiar mriežky.

      Značky

      , a prísnejšie nastaviť štruktúru popisu tabuľky so zvýraznením buniek hlavičky tabuľky, hlavného obsahu tabuľky a posledného riadka. Tieto značky sa môžu objaviť iba v popise tabuliek v rámci dvojice značiek
      a .

      Štítky na štruktúrovanie tabuľky

      a
      .

      Značky a sa používajú na opis záhlavia a päty tabuľky. Tieto značky sa môžu v tabuľke objaviť maximálne raz. Koncovú značku pre tieto položky možno vynechať. Použitie týchto značiek je užitočné pri vytváraní veľkých tabuliek, ktoré presahujú jednu stránku.

      Označiť sa môže v popise tabuľky vyskytnúť viackrát, pričom je potrebné použiť koncovú značku... Táto značka vykonáva logické zoskupenie údajov rovnakým spôsobom ako značka zoskupenie susediacich stĺpcov.

      Vďaka použitiu nových značiek je možné flexibilnejšie ovládať orámovanie a čiary mriežky tabuľky.

      Riadenie kreslenia rámcov okolo tabuľky sa vykonáva pomocou parametra FRAME tagu

      a mriežky tabuľky s parametrom RULES. Napríklad je možné nakresliť iba zvislé čiary medzi stĺpcami a namiesto okraja okolo celej tabuľky dať vodorovné čiary v hornej a dolnej časti tabuľky.

      Parameter FRAME môže mať nasledujúce hodnoty:

      • BOX alebo BORDER - rám je nakreslený zo všetkých štyroch strán
      • NAD - iba z hornej strany
      • NÍŽE - iba zo spodnej strany
      • HSIDES - spodná a horná strana sú nakreslené
      • VSIDES - ľavá a pravá strana sú nakreslené
      • LHS - iba na ľavej strane
      • RHS - iba na pravej strane
      • VOID - stôl bez vonkajších rámov

      Parameter RULES riadi kreslenie vnútorných mriežok tabuľky a môže nadobúdať nasledujúce hodnoty:

      • VŠETKY - sú nakreslené všetky vnútorné čiary
      • SKUPINY - nakreslia sa iba čiary oddeľujúce skupiny
      • RIADKY - nakreslia sa čiary oddeľujúce čiary
      • COLS - nakreslia sa čiary oddeľujúce stĺpce
      • ŽIADNY - vnútorné čiary nie sú nakreslené

      Príklad:

      .

      Poznámka

      Kreslenie čiar mriežky tabuľky a rámcov sa vykoná iba vtedy, ak je v značke prítomný parameter BORDER

      ... Ak tento parameter chýba alebo je jeho hodnota nulová, čiary mriežky a rámce nebudú chýbať pre žiadne hodnoty parametrov FRAME a RULES.

      Tu je príklad kompletného kódu HTML, ktorý vytvorí tabuľku pomocou opísaných schopností:

      Zvýraznenie nadpisu a súhrnného riadku

      Príklad flexibilného ovládania linky
      mriežkový stôl
      Nadpis stĺpca 1 Nadpis stĺpca 2 Nadpis stĺpca 3
      ÚdajeÚdajeÚdaje
      ÚdajeÚdajeÚdaje
      ÚdajeÚdajeÚdaje
      ÚdajeÚdajeÚdaje
      ÚdajeÚdajeÚdaje
      ÚdajeÚdajeÚdaje
      VýsledokVýsledokVýsledok


      Ryža. 4.18. Flexibilné kreslenie čiar mriežky tabuľky pomocou prehliadača Microsoft Internet Explorer

      V tomto prípade, ktorý prehliadač zobrazuje na obr. 4.18, je zobrazená jedna z možných možností ovládania mriežky a okrajov okolo tabuľky. Okolo tabuľky je nakreslený 5-pixelový okraj (BORDER = S) iba na hornej a spodnej strane (FRAME = HSIDES). Mriežky sú nakreslené v tabuľke na oddelenie skupín údajov (PRAVIDLÁ = SKUPINY). Skupiny údajov sú definované v prvom rade prítomnosťou troch značiek , z ktorých každý deklaruje samostatný stĺpec tabuľky skupina. Za druhé, značky , a<тгоот>tiež rozdeliť údaje tabuľky do skupín, ktoré určujú kresbu vnútorných vodorovných čiar.

      Nastavenie počtu stĺpcov v tabuľke

      Program Microsoft Internet Explorer (rovnako ako prehliadač Netscape 4.x) vám umožňuje zadať do značky

      parameter COLS, ktorého hodnota určuje počet stĺpcov v tabuľke. Zápis tohto parametra vám umožňuje zrýchliť rozloženie tabuľky pri zobrazení v prehliadači, pretože je možné určiť počet stĺpcov pred dokončením načítania kódu popisu tabuľky. Povolenie tohto parametra v súčasnosti žiadnym spôsobom neovplyvňuje priebeh načítania dokumentu.

      Vertikálne zarovnanie tabuliek

      Posledný parameter značky

      špecifické iba pre Microsoft Internet Explorer, je to VALIGN, ktorý určuje zvislé zarovnanie tabuľky vzhľadom na text. Jeho činnosť je podobná ako pri obrázkoch.

      Poznámka

      Všimnite si toho, že použitie rovnakého parametra sa môže výrazne líšiť v účele a možných hodnotách pre rôzne značky, dokonca aj pre ten istý prehliadač a v rámci jazykovej špecifikácie. Preto nie je možné zostaviť súhrnnú tabuľku o použití rôznych parametrov mimo kontextu ich aplikácie. Napríklad parameter ALIGN sa používa iba v tabuľkách v troch rôzne možnosti:

      • pre značku
      parameter ALIGN môže nadobúdať hodnoty VĽAVO alebo VPRAVO a znamená umiestnenie tabuľky zarovnané s ľavým alebo pravým okrajom;
    • pre značku
      • ,
      parameter ALIGN má hodnoty TOP alebo BOTTOM a znamená umiestnenie hlavičky tabuľky nad alebo pod tabuľkou;
    • pre značky
      • a parameter ALIGN preberá hodnoty LEFT, RIGHT alebo CENTER a znamená vodorovne zarovnať obsah zodpovedajúcej bunky (alebo buniek) v tabuľke.

      Alternatíva k zobrazeniu tabuľky

      Podpora tabuliek sa stala všadeprítomnou súčasťou webových prehliadačov, takže nie je žiadny alebo žiadny dôvod vyhnúť sa ich používaniu. Napriek tomu zvážime možné možnosti alternatívnych reprezentácií údajov, ktoré je možné použiť namiesto tabuliek alebo okrem nich.

      Niektoré ďalšie metódy, ktoré nepoužívajú koncept tabuliek:

      • Použitie predformátovaného textu. Táto technika sa tradične používala v raných verziách HTML, keď podpora tabuliek ešte neexistovala. Jeho používanie dodnes nestratilo svoj význam, pretože takéto texty budú správne zobrazovať všetky prehliadače, vrátane čisto textových.
      • Použitie obrázku obsahujúceho tabuľku. Tabuľku je možné vytvoriť v ľubovoľnom textovom editore alebo dokonca zobraziť vo webovom prehliadači a potom uložiť ako obrázok do jedného z grafické formáty... Nie je najlepšia cesta, pretože tým sa stráca všetka flexibilita dynamického prispôsobovania zobrazovania tabuliek. Okrem toho je potrebné skladovať doplnkový súbor s obrázkom, ktorého veľkosť okrem toho bude zvyčajne výrazne väčšia ako veľkosť textu opisujúceho tabuľku HTML. Možnou oblasťou použitia sú tabuľky striktne definovaných veľkostí, pre ktoré je závislosť jeho zobrazenia na akýchkoľvek vonkajších faktoroch (písma, prevádzkové režimy prehliadača a podobne) neprijateľná.
      • Použitie zoznamov namiesto tabuliek. V najjednoduchších prípadoch je namiesto organizácie tabuliek celkom možné vystačiť si s jedným z typov zoznamov dostupných v jazyku HTML.

      Príprava stolov

      Na prípravu tabuliek HTML je možné použiť ľubovoľné editory, z ktorých väčšina má nástroje vizuálna tvorba stoly. Ukážme si príklad prípravy tabuľky v editore HotDog Professional. Ak chcete vytvoriť tabuľku, stačí vybrať položku Tabuľky z ponuky Vložiť, potom sa zobrazí dialógové okno zobrazené na obr. 4.19. Vytvorenie tabuľky spočíva v vyplnení príslušných polí v okne. Po určení počtu riadkov a stĺpcov v tabuľke môžete pristúpiť k priamemu vypĺňaniu jednotlivých buniek tabuľky, ktoré sa zobrazia v rovnakom dialógovom okne. Dialógové okno má tlačidlo Ukážka, po kliknutí na ktoré sa vám zobrazí výsledná tabuľka pomocou vstavaného prehliadača (obr. 4.20).

      Ryža. 4.19. Dialógové okno na vytváranie tabuliek


      Ryža. 4.20. Tabuľka sa zobrazuje pomocou vstavaného prehliadača

      Po dokončení prípravy údajov pre tabuľku kliknite na tlačidlo OK. Potom sa vygenerovaný kód popisu tabuľky vloží do upraveného dokumentu HTML. V prípade uvedenom na obr. 4.19 sa vygeneruje nasledujúci kód:

      (časť kódu je vynechaná)

      Vedúci tabuľky
      Stĺpec 1 Stĺpec 2 Stĺpec 3 Stĺpec 4
      1 2 3 4

      Podobne je tento problém vyriešený pomocou komponentu Netscape Composer programu Netscape Communicator. Na obr. 4.21 zobrazuje dialógové okno, v ktorom musíte vyplniť požadované polia. Vstúpiť dodatočné parametre tag

      K dispozícii je ďalšie tlačidlo HTML. Po vyplnení polí dialógového okna by ste mali kliknúť na tlačidlo Použiť a potom dostanete príležitosť vyplniť bunky tabuľky (obr. 4.22).

      Ryža. 4.21. Dialógové okno Parametre tabuľky Netscape Composer


      Ryža. 4.22. Počiatočná poloha vstupného kurzora v prázdnej tabuľke

      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 zoskupiť stĺpce rýchlo a bez preplnenia kódu a definovať tak ich spoločné vlastnosti. Pomocou kontajnera môžete od seba oddeliť logické časti tabuľky. Nachádza sa za značkou vytvára Nový riadok... Ďalej v hniezde
      - 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

      		... Používame zvláštny atribút colspan na horizontálne kombinovanie buniek. 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ý. Často sa však 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
      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. Property height = "number" - 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 samostatnej bunky tabuľky. 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 získate 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 html tag stôl. Teraz vám radím, aby ste prešli na ďalšiu lekciu.


      Táto kapitola sa podrobne zaoberá zásadami používania tabuliek v značení HTML. Toto je tabuľková organizácia textu a tabuľková súradnicová mriežka a graf usporiadaný v tabuľkách.

      Možnosti popisu tabuľky HTML

      S rozvojom WWW sa ukázalo, že prostriedky, ktoré sú vložené do NTML, nestačia na vysokokvalitné zobrazenie. odlišné typy Dokumenty. Nevýhodou НТМL bol nedostatok stolového zobrazovacieho zariadenia v jeho zložení. Za týmto účelom vopred naformátovaný text (tag 

      ), v ktorej bola tabuľka načrtnutá so symbolmi ASCII.  Ale táto forma prezentácie tabuliek nestačila Vysoká kvalita a bol vyrazený zo všeobecného štýlu dokumentu.  Vďaka zavedeniu tabuliek v jazyku HTML nemajú správcovia webu len nástroj na umiestňovanie textu a čísel, ale aj účinný nástroj na navrhovanie umiestnenia grafiky a textu na správne miesto na obrazovke.
      

      Vytváranie tabuliek v HTML
      

      Značka sa používa na popis tabuliek<ТАВLЕ>...  Označiť<ТАВLЕ>Rovnako ako mnoho ďalších, automaticky prekladá riadok pred a za stôl.
      

      Vytvoriť riadok tabuľky - značku<ТR>
      

      Označiť<ТR>(Riadok tabuľky, riadok tabuľky) vytvorí riadok tabuľky.  Všetok text, ostatné značky a atribúty, ktoré je potrebné umiestniť na jeden riadok, je potrebné umiestniť medzi značky lt; TR>.
      

      Definovanie buniek tabuľky - značka<ТD>
      

      Dátové bunky sú spravidla umiestnené v riadku tabuľky.  Každá bunka obsahujúca text alebo obrázok musí byť obklopená značkami<ТD>...  Počet značiek<ТD>na riadok definuje počet buniek
      
 

 
      stôl
      Ak má tabuľka dva tagy TR, potom má dva riadky.
      Ak sú v riadku tri tagy TD, potom v ňom tri stĺpce.

      Hlavičky stĺpcov tabuľky - tag<ТН>

      Hlavičky pre stĺpce a riadky tabuliek sa nastavujú pomocou značky záhlavia<ТН>(Tabuľka Neader, záhlavie tabuľky). Tieto značky sú podobné<ТD>... Rozdiel je v tom, že text medzi značkami<ТН>, je automaticky napísané tučným písmom a štandardne sa nachádza v strede bunky. Vycentrovanie a zarovnanie textu môžete vrátiť späť doľava alebo doprava. Ak použijete<ТD>s visačkou<В>a atribút<АLIGN=center>, text bude tiež vyzerať ako nadpis. Malo by sa však pamätať na to, že nie všetky prehliadače podporujú hrubý text v tabuľkách, takže je lepšie nastaviť názvy tabuliek pomocou<ТН>.

      Štandardne je názov zarovnaný na stred Hlavička môže spájať stĺpce
      Hlavičku je možné umiestniť pred stĺpce Text alebo údaje Text alebo údaje
      Hlavička môže spájať riadky Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje

      Použitie hlavičiek tabuliek - tag<САРТIОN>

      Označiť

      umožňuje vytvárať hlavičky tabuliek. V predvolenom nastavení sú názvy zarovnané na stred a umiestnené buď nad (<САРТION АLIGN=top>) alebo pod stôl (<САРТION ALIGN=bottom>). Názov môže byť ľubovoľný text a obrázky. Text bude rozdelený do riadkov, ktoré zodpovedajú šírke tabuľky. Niekedy tag<САРТION>použité pre popis pod obrázkom. Na to stačí popísať tabuľku bez okrajov.

      Nadpis nad tabuľkou
      Text alebo údaje Text alebo údaje Text alebo údaje Text alebo údaje
      Nadpis pod tabuľkou
      Text alebo údaje Text alebo údaje Text alebo údaje

      Atribút NOWRAP

      Obvykle sa text, ktorý sa nezmestí do jedného riadka bunky tabuľky, presunie na nasledujúci riadok. Pri použití atribútu NOWRAP so značkami<ТН>alebo<ТD>dĺžka bunky sa rozšíri tak, aby sa priložený text zmestil na jeden riadok.

      COLSPAN Atribút

      Tagy:<ТD>a<ТН>upravené pomocou atribútu COLSPAN (Column Span). Ak chcete bunku rozšíriť na hornú alebo dolnú časť, môžete ju použiť pomocou atribútu COLSPAN na ľubovoľný počet bežných buniek.

      Ak chcete, aby bola bunka širšia ako horná alebo dolná, môžete použiť atribút СLSPAN = 2,
      natiahnuť ho na ľubovoľný počet bežných buniek.

      ROWSPAN Atribút

      Atribút ROWSPAN použitý v značkách<ТD>a<ТН>, je podobný atribútu COLSPAN =, okrem toho, že určuje počet riadkov na prekrytie bunky. Ak ste do atribútu ROWSPAN = s zadali číslo väčšie ako jedno, potom sa pod roztiahnutou bunkou musí nachádzať zodpovedajúci počet riadkov. Nemôže byť umiestnený v spodnej časti tabuľky.

      ŠÍRKA Atribút

      Atribút WIDTH sa používa v dvoch prípadoch. Môžete to vložiť do značky<ТАВLЕ>dať šírku celej tabuľky, alebo môžu byť použité v tagoch<ТD>alebo<ТН>na nastavenie šírky bunky alebo skupiny buniek. Šírku je možné zadať v pixeloch alebo v percentách. Ak napríklad nastavíte v značke<ТАВLЕ>ŠÍRKA = 250, dostanete tabuľku, ktorá je široká 250 pixelov bez ohľadu na veľkosť stránky na vašom monitore. Pri nastavení WIDTH = 50% v tagu<ТАВLЕ>tabuľka zaberie polovicu šírky stránky pre ľubovoľnú veľkosť obrázka na obrazovke. Pri zadávaní šírky tabuľky v percentách teda pamätajte na to, že ak má používateľ úzky výrez, môže vaša stránka vyzerať trochu divne. Ak používate pixely a tabuľka je širšia ako zobrazená oblasť, v spodnej časti sa zobrazí posúvač, pomocou ktorého sa môžete na stránke pohybovať vľavo a vpravo. V závislosti od konkrétnej úlohy môžu byť užitočné obidva spôsoby nastavenia šírky stola.

      Text alebo údaje - 100% šírka
      alebo
      Text alebo údaje - šírka 50%
      alebo
      Text alebo údaje - šírka 200 pixelov
      alebo
      Text alebo údaje - šírka 100 pixelov

      Použitie prázdnych buniek

      Ak bunka neobsahuje žiadne údaje, nebude mať žiadne ohraničenie. Ak chcete, aby mala bunka orámovanie, ale žiadny obsah, musíte do nej vložiť niečo, čo nebude viditeľné. Môžete použiť prázdny riadok<ВR>... Prázdne stĺpce môžete dokonca definovať tak, že zadáte ich šírku v pixeloch alebo relatívnych jednotkách a do výsledných buniek nezadáte žiadne údaje. Tento nástroj môže byť užitočný pri umiestňovaní textu a grafiky na stránku.

      CELLPADDING Atribút

      Tento atribút definuje šírku bieleho priestoru medzi obsahom bunky a jej okrajmi, to znamená, že nastavuje okraje v bunke.

      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje

      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje

      Atribúty ALIGN a VALIGN

      Tagy:<ТR>, <ТD>a<ТН>je možné upraviť pomocou atribútov ALIGN a VALIGN. Atribút ALIGN určuje horizontálne zarovnanie textu a grafiky, to znamená doľava alebo doprava alebo do stredu. Horizontálne zarovnanie je možné určiť niekoľkými spôsobmi:

      ALIGN = krvácať vľavo pritlačí obsah bunky v jednej rovine k ľavému okraju.

      ALIGN = vľavo zarovná obsah bunky doľava, pričom sa zohľadní odsadenie určené atribútom CELLPADDING.

      ALIGN = stred centruje obsah bunky.

      ALIGN = správne vpravo zarovná obsah bunky s výplňou určenou atribútom CELLPADDING.

      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje

      Atribút VALIGN vertikálne zarovnáva text a grafiku v bunke. Vertikálne zarovnanie je možné zadať niekoľkými spôsobmi:

      VALIGN = hore zarovnáva obsah bunky s horným okrajom.

      VALIGN = stred centruje obsah bunky vertikálne.

      VALIGN = dno zarovnáva obsah bunky s jej dolným okrajom.

      Atribút VALIGN vertikálne zarovnáva text a grafiku v bunke. vrchol, stredný, dno.
      VALIGN = hore Zarovná obsah bunky k hornému okraju. vrchol, vrchol, hore.
      VALIGN = stred Vycentruje obsah bunky vertikálne. stredný, stredný, stredný.
      VALIGN = dole Zarovná obsah bunky k jej dolnému okraju. dno, dno, dno.

      Atribút BORDER

      V značke<ТАВLЕ>často určujú, ako budú rámce vyzerať, teda riadky, ktoré obklopujú bunky tabuľky a samotnú tabuľku. Ak neurčíte okraj, získate tabuľku bez riadkov, ale priestor pre ne bude vyhradený. Rovnaký výsledok je možné dosiahnuť nastavením<ТАВLЕ ВОRDER=0>... Niekedy chcete, aby bol okraj hrubší, aby lepšie vynikal. Môžete nastaviť výnimočne odvážne orámovanie, ktoré upúta pozornosť na obrázok alebo text. Pri vytváraní vnorených tabuliek musíte pre rôzne tabuľky vytvoriť ohraničenia rôznej hrúbky, aby ste ich ľahšie rozlíšili.

      Atribút CELLSPACING

      Atribút CELLSPACING určuje šírku medzier medzi bunkami v pixeloch. Ak tento atribút nie je uvedený, štandardne sú dva pixely. S atribútom CELLSPACING = môžete umiestniť text a grafiku kdekoľvek chcete. Ak chcete nechať prázdne miesto, môžete do bunky zadať medzeru.

      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje

      Atribút BGCOLOR

      Tento atribút vám umožňuje nastaviť farbu pozadia. V závislosti od toho, s ktorou značkou (TABLE, TR, TD) sa používa, je možné farbu pozadia nastaviť pre celú tabuľku, pre riadok alebo pre jednu bunku. Hodnota tohto atribútu je kód RGB alebo štandardný názov farby.

      Text alebo údaje Text alebo údaje Text alebo údaje
      Text alebo údaje Text alebo údaje Text alebo údaje

      POZADIE Atribút

      Tento atribút nastavuje obrázok na pozadí pre tabuľky. Použiť na značky TABLE a TD. Jeho hodnota je adresa URL súboru s obrázkom na pozadí. Použitie tohto atribútu je popísané nižšie.

      Použitie tabuliek v dizajne stránky

      Dobrá vec na tabuľkách je, že ak chcete, môžete ich okraje zneviditeľniť. To umožňuje používanie značky<ТАВLЕ>krásne umiestnite text a grafiku na stránku. Kým značka<ТАВLЕ>zostáva jediným výkonným nástrojom na formátovanie v HTML. Návrhári webových stránok majú teraz takmer rovnakú slobodu používať „prázdne miesto“ ako tvorcovia tlačených stránok. Tabuľky sú najlepším spôsobom, ako sa zbaviť hierarchického umiestnenia textu na webových stránkach.

      Ak prehliadač podporuje tabuľky, zvyčajne správne zobrazí najzaujímavejšie efekty, ktoré s nimi boli vytvorené.

      Štátna pedagogická univerzita Ural

      Vitajte!

      Tréningový kurz „Základy ovládania WEB“

      Vytváranie farebných tabuliek

      Niektoré prehliadače umožňujú zobrazenie farieb. Tabuľku je možné vyfarbiť niekoľkými spôsobmi, väčšinou závisia od použitého prehliadača.

      Farebné okraje v programe Netscape Navigator. Stôl môžete nielen obklopiť krásny rám, ale tiež preň nastavte farbu, ktorá sa líši od farby textu a pozadia. Vytvorte jednoduchý sivý GIF (alebo akýkoľvek iný GIF, ktorý by ste chceli mať ako pozadie) a definujte ho v značke<ВODY>ako pozadie stránky. Potom nastavte farbu pozadia stránky. V dôsledku toho vaša značka<ВОDY>bude vyzerať asi takto:

      Vytvorili ste dvojité pozadie - GIF a danú farbu. Výsledkom bude, že farba pozadia bude viditeľná na všetkých okrajoch tabuliek a horizontálne čiary (<НR>). Bez ohľadu na to, či je váš GIF na pozadí sivý alebo nie, farebné čiary a okraje tabuliek budú výrazne vyniknúť. Ak GIF na pozadí nie je príliš zložitý, doba načítania stránky sa zvýši iba mierne.

      Úloha

      Vytvorte tabuľku a pomocou štýlov zadajte jej parametre (okraje a vzdialenosť medzi bunkami).

      Riešenie

      Tabuľka sa skladá z riadkov a stĺpcov buniek, ktoré môžu obsahovať text a obrázky. Ak chcete na webovú stránku pridať tabuľku, použite značku

      ... Tento prvok slúži ako kontajner pre prvky, ktoré definujú obsah tabuľky. Akákoľvek tabuľka pozostáva z riadkov a buniek, ktoré sú zodpovedajúcim spôsobom nastavené pomocou značiek a
      ... Tabuľka musí obsahovať aspoň jednu bunku (príklad 1). Povolené namiesto značky použiť značku ... Text v bunke zdobenej visačkou , zobrazené prehliadačom tučným písmom a zarovnané na stred v bunke. V opačnom prípade sú rozdiely medzi bunkami vytvorené prostredníctvom značiek a č.

      Príklad 1. Vytvorenie tabuľky

      HTML5 IE Cr Op Sa Fx

      Značka na stôl

      Bunka 1 Bunka 2
      Bunka 3 Bunka 4

      Poradie buniek a ich vzhľad je znázornené na obr. 1.

      Ryža. 1. Výsledok vytvorenia tabuľky so štyrmi bunkami

      Atribút border značky

      je dovolené pridávať iba s prázdnou hodnotou (
      ) alebo sa rovná 1. Všetky ostatné hodnoty nie sú validované.

      Vlastnosť štýlu odsadenia sa používa na ovládanie okrajov v bunkách, ktorá sa pridá do selektora td. Medzery medzi bunkami sa zmení vlastnosťou border-spacing (príklad 2) pridanou do selektora tabuľky, prehliadač IE tomu rozumie iba od verzie 8.0.

      Príklad 2. Polia v bunkách

      HTML5 CSS 2.1 IE Cr Op Sa Fx

      Značka na stôl

      Nadpis 1Nadpis 2
      Bunka 3Bunka 4

      Tabuľka s poliami a medzerami medzi bunkami je znázornená na obr. 2. Podobný výsledok je možné dosiahnuť aj s bielym okrajom okolo buniek.

      Ryža. 2. Polia v bunkách tabuľky

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