Každá značka vytvoří nový řádek. Další vnořený jsou vytvořeny sloupce. Můžete vytvořit více sloupců. V tomto případě je třeba sledovat počet sloupců v každém řádku. Pokud měl například první řádek 5 sloupců, měly by mít následující řádky také 5 sloupců. Jinak bude stůl plavat. Je možné sloučit buňky.

Jak vytvořit tabulku v html

Vezměme si příklad, html kód:

Příklad tabulky

Sloupec 1

Sloupec 2

Věnujte pozornost buňce . K horizontálnímu rozpětí buněk používáme speciální atribut colspan. Jeho číselná hodnota určuje počet sloupců ke sloučení. Existuje také analog tohoto atributu: tag (záhlaví tabulky), kde je také potřeba napsat colspan. Výsledek bude stejný. Ale často používají běžné td.

Nyní se podíváme na všechny atributy tagů podrobně.

Atributy a vlastnosti značek

K otevření štítku

1. Property align="parameter" - nastavuje zarovnání tabulky. Může nabývat následujících hodnot:

Ve výše uvedeném příkladu jsme tabulku vystředili pomocí align="center" .

Tento atribut lze aplikovat nejen na tabulku, ale i na jednotlivé buňky tabulky.

Například

12. Vlastnost width="number" - nastavuje šířku tabulky: buď v pixelech nebo v procentech.

13. Vlastnost class="class_name" - můžete zadat název třídy, do které tabulka patří.

14. Vlastnost style="styles" - styly lze nastavit individuálně pro každou tabulku.

Nyní je čas ponořit se do tabulky a podívat se na atributy buněk tabulky. Tyto atributy musí být zapsány v úvodní značce.

Výsledek našeho příkladu:

Rozdělení stolu

K rozdělení tabulky na části se používají následující značky HTML:

• Štítek používá k tomu, aby obsahoval záhlaví skupiny v tabulce („záhlaví tabulky“, nepleťte si se záhlavími).
• Štítek používá k tomu, aby obsahoval „zápatí“ tabulky (zápatí).
• Štítek slouží k tomu, aby obsahovalo „tělo“ tabulky (body).

Živel musí být použit pouze jednou v jedné tabulce v následujícím kontextu: v rámci prvku

Elementy

Výsledek našeho příkladu.

Stůl s rámy

VÝSLEDEK:

Stůl bez okrajů

Stůl s rámy

Atributy značek A ke sloučení buněk

Příklad

VÝSLEDEK:

Podle standardu HTML5 jsou všechny dříve používané atributy tabulky, jako např okraj, rozmístění buněk, polstrování buněk atd. již nejsou podporovány a validátor považuje jejich použití za chyby v kódu. Pro návrh tabulek je potřeba použít CSS styly, kterými můžete nahradit všechny zastaralé atributy tabulek. Například místo atributu rozmístění buněk vlastnost se používá ke změně vzdálenosti mezi buňkami tabulky ohraničení a k zarovnání obsahu v buňkách tabulky - vlastnosti zarovnání textu A vertikální-aling. CSS styly pro tabulky

html značky pro seskupování řádků tabulky

Značky lze použít k vytvoření složitějších tabulek:

Příklad

VÝSLEDEK:

tagy seskupení sloupců tabulky html

Atribut značek A

Nejjednodušší způsob, jak pochopit, jak lze použít seskupování řádků a sloupců, je na příkladu tabulky sudoku.

Značka col nastavuje parametry pro každý sloupec zvlášť. Nezáleží na tom, jak napsat do zdrojového kódu:

nebo

Příklad

VÝSLEDEK:

Nesnažte se nastavit styl zarovnání textu pro značky A . Text umístěný mezi tagy ..., nedědí tento styl, protože tag není potomkem žádné značky , žádný štítek .

Vodorovné zarovnání textu v konkrétním sloupci tabulky lze změnit zadáním stylu zarovnání textu pro pseudo třídu td:n-té dítě(n), kde n je číslo sloupce. Tato metoda však nebude fungovat, pokud mezi buňkami tabulky existuje atribut colspan.

Příklad

VÝSLEDEK:

Tato metoda však nebude fungovat, pokud mezi buňkami tabulky existuje atribut colspan.

Kapitola 4

Tabulky v HTML

Tabulky jsou jedním z nejmocnějších a nejpoužívanějších nástrojů v HTML. Pojem tabulkové prezentace dat nepotřebuje další vysvětlení. V HTML se tabulky používají nejen tradičně jako metoda prezentace dat, ale také jako prostředek k formátování webových stránek. Uveďme příklady skutečných dokumentů, ve kterých je tabulkové zobrazení vhodným způsobem, jak vytvořit dokument. Na Obr. Obrázek 4.1 ukazuje typický příklad použití tabulek k reprezentaci číselných dat rozdělených do řádků a sloupců. Na Obr. 4.2 použití tabulky slouží pouze pro účely formátování dokumentu, nastavení vzájemné polohy prvků stránky. Při prohlížení takového dokumentu není hned jasné, že se k jeho sestavení používá tabulka, protože rámečky kolem jeho buněk nejsou vykresleny.

První verze jazyka HTML neposkytovala speciální prostředky pro zobrazování tabulek, protože byla určena hlavně pro psaní prostého textu. S rozvojem oblastí použití HTML dokumentů se stal aktuální úkol prezentace dat, což je typicky přítomnost řady řádků a sloupců. Vytváření dokumentů obsahujících data zarovnaná do sloupců se nejprve provádělo pomocí předformátovaného textu, uvnitř kterého bylo zajištěno potřebné zarovnání zavedením požadovaného počtu mezer. Připomeňme, že text uvnitř dvojice značek

A

Speciální nástroje pro tvorbu tabulek však neruší možnost použití předformátovaného textu. Použití tabulek není omezeno na data skládající se z řádků a sloupců. Jedním z použití je uspořádání rozvržení různých dat na stránce, která se může skládat z prostého textu, obrázků, jiných tabulek atd. Tato kapitola je věnována pravidlům pro vytváření tabulek a příkladům jejich použití.

Rýže . 4.1. Typický příklad HTML tabulky

Rýže . 4.2. Příklad stolu bez okrajů

Vytváření základních HTML tabulek

Podívejme se nejprve na minimální sadu tagů a jejich parametry, nutné a dostatečné pro tvorbu jednoduchých tabulek, a poté přistoupíme k jejich podrobnému popisu.

Popis tabulek by měl být umístěn uvnitř části dokumentu . Dokument může obsahovat libovolný počet tabulek a tabulky lze do sebe vnořovat. Každá tabulka musí začínat značkou

Každý řádek začíná značkou (Řádek tabulky) a končí značkou. Jedna buňka v řadě je orámována dvojicí značek A(Tabulkové údaje) popř A(záhlaví tabulky). Štítek obvykle se používá pro buňky záhlaví tabulky a - pro datové buňky. Rozdíl v použití je pouze v typu písma použitého ve výchozím nastavení pro zobrazení obsahu buněk a také v umístění dat v buňce. Typ obsahu buňky zobrazeno tučně a na střed (ALIGN=CENTER, VALIGN=MIDDLE). Buňky definované značkou standardně zobrazuje data zarovnaná doleva (ALIGN=LEFT) a uprostřed (VALIGN=MIDDLE) ve vertikálním směru.

Tagy A se nemůže objevit mimo popis řádku tabulky . Ukončovací kódy, A lze vynechat. V tomto případě je konec popisu řádku nebo buňky začátek dalšího řádku nebo buňky nebo konec tabulky. Koncová značka stolu nelze vynechat.

Počet řádků v tabulce je určen počtem otevíracích značek , a počet sloupců - maximální počet nebo mezi všemi řádky. Některé buňky nemusí obsahovat žádná data, takové buňky jsou popsány dvojicí značek za sebou - , . Pokud jedna nebo více buněk umístěných na konci libovolného řádku neobsahuje data, lze jejich popis vynechat a prohlížeč automaticky přidá požadovaný počet prázdných buněk. Z toho vyplývá, že není povolena konstrukce tabulek, ve kterých různé řádky obsahují různý počet sloupců stejné velikosti.

Tabulka může mít název, který je uzavřen ve dvojici značek A. Popis záhlaví tabulky musí být umístěn uvnitř značek

Ve výchozím nastavení je text záhlaví tabulky umístěn nad ním (ALIGN=TOP) a vystředěn ve vodorovném směru.

Uvedené značky mohou mít parametry, jejichž počet a hodnoty se liší. V nejjednodušším případě se však používají značky bez parametrů, které nabývají výchozích hodnot.

Tyto informace jsou dostačující pro sestavení elementárních tabulek. Uveďme si příklad jednoduché tabulky sestávající ze dvou řádků a dvou sloupců, jejíž zobrazení je na Obr. 4.3.

Rýže. 4.Z. Příklad jednoduché tabulky

Zobrazení tabulek na stránce

Zvažte přiřazení různých parametrů, které lze použít ve značkách popisujících tabulky.

Záhlaví tabulky

Tag záhlaví tabulky má jeden platný parametr ALIGN, který nabývá hodnot TOP (záhlaví nad tabulkou) nebo BOTTOM (záhlaví pod tabulkou). Parametr ALIGN může být vynechán, což odpovídá hodnotě ALIGN=TOP. Ve vodorovném směru je záhlaví tabulky vždy vystředěno. Tabulka nemusí mít název. Ve většině případů se jako záhlaví tabulky používá prostý text, který se řídí specifikací HTML, ale ve skutečnosti mezi značkami A je povoleno psát jakékoli HTML prvky použité v sekci . Zde je příklad položky záhlaví tabulky:

Směr na konec tabulky

Pokud je tento popis záhlaví přidán k výše uvedenému příkladu, pak se tabulka zobrazí tak, jak je znázorněno na obr. 4.4.

Rýže. 4.4. Tabulka s hlavičkou

Prohlížeč Internet společnosti Microsoft Průzkumník poskytuje další možnosti pro výběr umístění záhlaví. Parametr ALIGN akceptuje LEFT, CENTER a RIGHT pro horizontální zarovnání spolu s hodnotami popsanými výše. Všimněte si, že toto je jeden z mála případů, kdy lze široce používaný parametr ALIGN použít pro horizontální i vertikální zarovnání. Například položka ALIGN=RIGHT poskytne nadpis, který je zarovnaný na pravé straně a je umístěn nad tabulkou. Pokud napíšete ALIGN=BOTTOM, pak stejně jako v příkladu výše bude záhlaví umístěno pod tabulkou. Dvojité použití ve stejném záhlaví parametru ALIGN však není povoleno. Proto je dodatečně zaveden speciální parametr pro vertikální zarovnání - VALIGN, který nabývá hodnot TOP nebo BOTTOM. Například pro nadpis umístěný ve spodní části tabulky zarovnané doleva je popis následující:

Nadpis zarovnaný dolů zarovnán doleva

Tabulka s popisem daného názvu v Microsoftu internet Explorer se zobrazí následovně (obr. 4.5). Pokud je tento příklad zobrazen v Netscape, pak bude titulek umístěn ve výchozím nastavení, tj. nad tabulkou a uprostřed ve vodorovném směru.

Rýže. 4.5. Vodorovné zarovnání záhlaví tabulky v aplikaci Microsoft Internet Explorer

Funkce horizontálního zarovnání záhlaví tabulky jsou rozšířením specifikace HTML, prohlížeč Netscape Navigator je nepodporuje, a proto by se měly používat pouze v případě, že je to absolutně nezbytné.

Možnosti značek

Hlavní tag používaný při vytváření tabulek je tag

Parametr BORDER

Parametr BORDER řídí zobrazení ohraničení kolem každé buňky, které v podstatě dávají čáry mřížky tabulky, a kolem celé tabulky. Ve výchozím nastavení se rámečky nekreslí a na obrazovce uživatel uvidí pouze text přesně umístěných buněk tabulky. Existuje mnoho situací, kdy je použití bezokrajových tabulek opodstatněné, například pro vícesloupcové seznamy realizované pomocí tabulek nebo pro upřesnění přesné vzájemné polohy obrázků a textu. Ve většině případů je však pro tradiční použití tabulek užitečné její buňky od sebe oddělit mřížkou, což usnadňuje vnímání a pochopení informací obsažených v tabulce.

Chcete-li přidat rámce do tabulky, musíte je zahrnout do kódu

Například,

Číselná hodnota parametru určuje tloušťku rámečku v pixelech nakreslených kolem celé tabulky, tato hodnota však neovlivňuje tloušťku rámečků kolem každé buňky. Při absenci číselné hodnoty se obvykle bere jako rovna minimální hodnotě (1), i když styl zobrazení snímků se může u různých prohlížečů lišit. Chybí možnost samostatného ovládání zobrazení rámečku kolem celé tabulky a rámečků kolem buněk.

Příklad tabulky s okrajem o tloušťce 10 pixelů je na obr. 4.6.

Rýže. 4.6. Tabulka s okrajem o tloušťce 10 px

Specifikace HTML 3.0 nezahrnovala hodnotu parametru BORDER. To se provádí pouze v HTML 3.2. Tedy zejména brzy Verze společnosti Microsoft Internet Explorer neumožnil nastavení číselné hodnoty.

Všimněte si, že pokud není parametr BORDER, nejsou vykresleny žádné okraje, ale je pro ně ponecháno místo (toto platí pouze pro Netscape). Celková velikost tabulky při absenci parametru BORDER nebo jeho přítomnosti se nemění (výjimkou je případ nastavení BORDER=0). Minimální vzdálenost mezi dvěma sousedními buňkami se tedy v těchto případech bude rovnat dvojnásobku tloušťky rámečku, tj. dvěma pixelům. Buňky je možné uspořádat co nejblíže k sobě nastavením BORDER=0, což znamená bez ohraničení. Některé prohlížeče nemusí podporovat nastavení číselné hodnoty parametru BORDER, v takovém případě bude nulová hodnota ignorována a tabulka bude vykreslena s ohraničením.

Zde jsou nějaké příklady:

Všechny tři tyto příklady budou prohlížečem Netscape vykresleny odlišně. Všimněte si, že se jedná o poměrně unikátní případ, kdy nelze mluvit o výchozí hodnotě. Třetí příklad, kde je parametr BORDER vynechán, se liší od jakéhokoli příkladu, kde je tento parametr přítomen. Pro Microsoft Internet Explorer jsou druhý a třetí příklad totožné, takže výchozí hodnota parametru BORDER je pro tento prohlížeč nula.

Parametr CELLSPACING

Forma zápisu parametru: CELLSPACING=num, kde num je číselná hodnota parametru v pixelech, kterou nelze vynechat. Hodnota num určuje vzdálenost mezi sousedními buňkami (přesněji mezi rámečky buněk) jak horizontálně, tak vertikálně. Výchozí hodnota je dvě. Všimněte si, že v systémech publikování mají sousedící buňky tabulky tradičně společné ohraničení. V HTML tabulkách je mezi nimi standardně mezera, jak je dobře vidět na obrázku výše (obrázek 4.6). Při nastavení CELLSPACING=0 se rámečky sousedních buněk spojí a vytvoří dojem jediné mřížky tabulky (obr. 4.7).

Rýže. 4.7. Tabulka s hodnotou CELLSPACING=0

Parametr CELLPADDING

Tvar parametru je podobný CELLSPACING. Hodnota num určuje velikost volného místa (výplň) mezi okrajem buňky a daty uvnitř buňky. Ve výchozím nastavení se hodnota rovná jedné. Nastavení parametru CELLPADDING na nulu může způsobit, že se některé části textu buňky dotýkají jejího okraje, což není příliš estetické.

Na Obr. 4.8 ukazuje příklad tabulky s hodnotou CELLPADDING=10.

Rýže. 4.8. Tabulka s hodnotou CELLPADDING=10

Funkce parametrů CELLPADDING a CELLSPACING je velmi podobná. U tabulky bez okrajů vede změna jednoho nebo druhého parametru ke stejnému výsledku. Obě možnosti ovlivňují odpovídající offsety jak horizontálně, tak vertikálně. Bohužel oddělená kontrola vodorovných a svislých okrajů, jak se to dělá např. u okrajů z obrázků (parametry HSPACE a VSPACE tagu ), není poskytnuto.

Všechny tři parametry – BORDER, CELLPADDING a CELLSPACING působí nezávisle na sobě, pokud je některý z nich vynechán, pak se použije jeho výchozí hodnota. Konkrétně, pokud jsou vynechány všechny výše uvedené parametry, pak minimální vzdálenost mezi daty ze sousedních buněk bude 6 pixelů (pro Netscape). Tato hodnota je součtem dvou pixelů pro CELLSPACING, jednoho pixelu pro CELLPADDING a jednoho pixelu pro ohraničení každé buňky. Nejkompaktnější tabulku získáte zadáním následujícího popisu:

Pouze v tomto provedení budou buňky umístěny blízko sebe. Příkladem použití může být tabulka, kde všechny buňky obsahují obrázky stejné velikosti, které je potřeba umístit vedle sebe.

Parametry WIDTH a HEIGHT

Při zobrazení tabulek je jejich šířka a výška automaticky vypočítána prohlížečem a závisí na mnoha faktorech: hodnotách parametrů uvedených v popisu celého dokumentu, této tabulce, jejích jednotlivých řádcích a buňkách, obsahu buňky a také parametry zadané při prohlížení dokumentu v konkrétním prohlížeči, například typ a velikost písma, velikost výřezu atd. Při zobrazení se velikosti tabulek počítají automaticky s přihlédnutím k těmto faktorům, přičemž se provádí pokus pro prezentaci stolu nejpohodlnějším způsobem - uspořádejte stůl tak, aby se vešel do výřezu. Obecné schéma prohlížení velkých dokumentů se zpravidla redukuje na lineární posouvání obsahu dokumentu na výšku a čtení textu proloženého různými tabulkami, obrázky atd. To platí jak pro HTML dokumenty, tak pro běžné dokumenty vytvořené v libovolném textové editory. Nejraději textové editory (např. Microsoft Word) a prohlížeče HTML automaticky formátují text tak (je-li to možné), aby délka řádků nepřesáhla šířku výřezu. Tím se vyhnete nutnosti posouvat dokument vodorovně. Podobné akce provádějí prohlížeče s tabulkami – pokud je to možné, naformátujte je tak, aby šířka tabulky nepřesahovala šířku výřezu. Lze konstatovat, že šířka stolů je důležitějším, prvořadým parametrem, jehož výpočet se provádí především ve srovnání s výškou.

Ve většině případů výsledkem dynamického nastavení velikosti tabulky bude esteticky vyvážený obraz, který efektivně využívá skutečnou oblast výřezu. Může však být nutné vynutit šířku nebo výšku stolu. K tomuto účelu slouží parametry tagu WIDTH (šířka tabulky) a HEIGHT (výška tabulky).

Podobné parametry lze nastavit pro jednotlivé buňky. Všimněte si, že nastavení konkrétní hodnoty parametru, například WIDTH=200, v žádném případě neznamená, že tabulka bude mít uvedenou šířku, ale pouze určuje doporučenou šířku, která bude v rámci možností zachována. Pojďme si to vysvětlit na příkladech. Nechť existuje tabulka, která by za daných podmínek měla standardně šířku menší, než je zadaná. V tomto případě prohlížeč zvětší šířku tabulky na požadovanou šířku proporcionálním rozšířením všech sloupců tabulky. Zúžení výřezu nezmění šířku tabulky a může vyžadovat vodorovné posouvání k jejímu zobrazení. Pokud má tabulka ve výchozím nastavení šířku větší, než je zadaná, pak se prohlížeč pokusí zmenšit její šířku tím, že za prvé zmenší šířku jednotlivých sloupců, u kterých je zadaná šířka větší, než je nutné, a za druhé rozdělí text v jednotlivých buňkách do několika řádků s rostoucí výškou tabulky. Tyto akce nemusí poskytnout požadovanou velikost tabulky a pak bude mít minimální možnou šířku. Stejné akce se provádějí u tabulek, které nemají zadané rozměry při zužování výřezu.

Specifické algoritmy pro nastavení tabulek pro různé prohlížeče se mohou mírně lišit.

Parametr ALIGN

Daný parametr značky

Uveďme si příklad tabulky s obtékajícím textem, jejíž zobrazení je na Obr. 4.9.

Těchto 43 nejčastěji se vyskytujících jmen pokrývá 92 % vzorku.

Rýže. 4.9. Tabulka bez okrajů s obtékáním textu

Tento dokument se skládá z tabulky bez okrajů se zarovnáním nastaveným na ALIGN=LEFT, což umožňuje umístit text za tabulkou napravo od ní. Tabulka se skládá pouze z jednoho řádku, který obsahuje dvě buňky. Každá buňka obsahuje část neuspořádaného seznamu

. Použití tabulky k zobrazení seznamu je jedním ze způsobů, jak vnutit seznam do více sloupců, což ilustruje tento příklad. Text napravo od tabulky se tam možná nevejde celý, ale bude pokračovat za tabulkou. Zkuste v tomto příkladu zmenšit šířku výřezu prohlížeče a v určitém okamžiku bude veškerý text ve spodní části tabulky. Připomeňme, že k vynucení přerušení toku textu kolem tabulky (například pokud následující text logicky nesouvisí s tabulkou a měl by být umístěn pod ní), měli byste použít kód
se sadou parametrů CLEAR. Pro tento příklad musíte napsat
nebo
. Některé prohlížeče umožňují zápis parametru CLEAR bez hodnoty, ale to se nedoporučuje. Chcete-li provést stejný úkol, zadejte více nových řádků
bez parametru CLEAR (jak bylo provedeno v příkladu před textem pro posunutí o několik řádků dolů) nebo několika kódů pro začátek nového odstavce

Špatné rozhodnutí.

Uveďme si trochu jiný příklad vytvoření podobné stránky, jejíž zobrazení je na Obr. 4.10.

Nejčastější mužská jména

dospělá populace Petrohradu

Abram Alexandr Alexeji Albert Anatoly Andrey Arkady Boris Vadim Miláček Valery Bazalka Vítěz Vitalij Vladimíre Vladislav Vjačeslav Gennady Jiří Hermann Gregory Dmitrij

Eugene Yefim Ivane Igore Ilya Josefe Konstantin Lev Leonid Michaele Mikuláše Oleg Pavel Petr Román Semyon Sergeji Stanislav Edwarde Yuri Jacobe

Uvedená data byla získána na základě rozboru reprezentativního vzorku obsahujícího informace o 5000 mužích starších 18 let žijících v Petrohradě. Těchto 43 nejčastějších jmen pokrývá 92 % vzorku. Frekvence výskytu každého z ostatních jmen nepřesahuje 0,3 %



Rýže. 4.10. Bezokrajová tabulka obsahující tři sloupce

Na rozdíl od předchozího příkladu se kolem tabulky neobjevuje žádný text. Celý dokument se skládá z jedné tabulky se záhlavím obsahujícím tři buňky v jednom řádku. První dvě buňky zcela opakují předchozí příklad. Třetí buňka obsahuje text, který komentuje obsah prvních dvou buněk. Zde není potřeba nastavovat vynucený zalomení textu, jak bylo popsáno v předchozím případě. Veškerý text související s tabulkou musí být umístěn do třetí buňky a následný text za konec popisu celé tabulky. Oba příklady vypadají při zobrazení na celou obrazovku stejně, s výjimkou záhlaví, které je v prvním případě umístěno uprostřed dvousloupcového seznamu a v druhém případě je umístěno uprostřed všech tří sloupců tabulky . Když se však výřez v posledním příkladu zmenší, žádná část textu nemůže jít pod tabulku, čímž se naruší její struktura.

Formátování dat uvnitř tabulky

Každou jednotlivou buňku v tabulce lze považovat za oblast pro nezávislé formátování. Všechna pravidla, která řídí zobrazení textu, lze použít k formátování textu v buňce. Uvnitř buňky můžete použít téměř všechny prvky HTML, které se mohou objevit v těle dokumentu. , včetně značek, které řídí umístění textu -

,
,

---

, kódy záhlaví - od

před

, značky formátování znaků -<В>, , , , , , , tagy vkládající grafické obrázky , hypertextové odkazy<А>atd. Ihned zdůrazněme, že rozsah značek specifikovaných uvnitř jedné buňky je omezen na hranice této buňky, bez ohledu na přítomnost koncové značky. Pokud je například barva textu definována uvnitř buňky - , pak i při absenci konečného kódu nebo umístěním přes více buněk nebo řádků tabulky se text další buňky projeví ve výchozí barvě.

Pro formátování dat v buňkách tabulky jsou k dispozici následující možnosti.

Možnosti zarovnání obsahu buňky jsou ALIGN a VALIGN. Lze použít v kódech , A . Parametr vodorovného zarovnání ALIGN může nabývat hodnot LEFT, RIGHT a CENTER (výchozí hodnota je LEFT pro a STŘED pro ). Parametr vertikálního zarovnání VALIGN může nabývat hodnot TOP (podél horního okraje), BOTTOM (podél spodního okraje), MIDDLE (uprostřed), BASELINE (podél základní linie). Výchozí nastavení je STŘEDNÍ. Zarovnání účaří sváže text jednoho řádku ve všech buňkách na jeden řádek. Nastavte možnosti zarovnání na úrovni kódu určuje zarovnání pro všechny buňky daného řádku, přičemž každá jednotlivá buňka řádku může mít své vlastní parametry, které přepíší účinek parametrů uvedených v .

Zde je příklad tabulky, ve které jsou data v buňkách prvního sloupce zarovnána doprava, druhý sloupec je zarovnán na střed a třetí sloupec je zarovnán doleva (výchozí hodnota):

Buňka 1	Buňka 2	Buňka 3
Buňka 4	Buňka 5	Buňka 6

Vykreslení prohlížeče tohoto příkladu je znázorněno na Obr. 4.11.




Rýže. 4.11. Zarovnání dat v buňkách tabulky

Možnost NOWRAP zakáže možnost automatického rozdělení textu buňky na řádky. Lze použít v kódech , A . Je třeba se vyhnout zbytečnému použití této možnosti, protože může výrazně snížit schopnost dynamicky měnit velikost tabulek a zhoršit jejich vnímání. Ve většině případů stačí použít NOWRAP pro jednotlivé buňky, které skutečně vyžadují zákaz zalamování slov na novém řádku. Zalamování slov se provádí pouze pomocí oddělovačů mezi slovy (mezery) a v některých případech, aby se předešlo zalomení textu na určitých místech, místo znaku mezery nastavte nezalomitelný kód mezery (NonBreaking Space). Příklady zahrnují případy, kdy se nedoporučuje mezera - mezi číselnou hodnotou a jednotkami dané veličiny; mezi příjmením a iniciálami. Takže text je 650 km nebo Jelcin B.N. doporučuje se napsat do formuláře 650 km a Jelcin B.N.

V kódech lze použít parametry WIDTH a HEIGHT A . Jejich syntaxe je podobná syntaxi těchto parametrů pro značku

. Jejich hodnota určuje šířku nebo výšku buňky, pro kterou jsou tyto parametry zapsány. Hodnoty lze zadat v pixelech nebo jako procento velikosti celé tabulky. Microsoft Internet Explorer umožňuje pouze nastavení hodnoty WIDTH v pixelech. Vzhledem k tomu, že tabulka je propojená struktura skládající se z řádků a sloupců, nastavení šířky libovolné buňky ovlivní šířku celého sloupce, ve kterém se buňka nachází, a nastavení výšky ovlivní celý řádek. Pokud je hodnota šířky sloupce zadána pouze v jedné buňce, stane se tato hodnota šířkou celého sloupce. Pokud existuje několik takových indikací, vybere se maximální hodnota. Stejné vlastnosti platí pro řetězce.

Složité tabulky se vyznačují potřebou sloučit několik sousedních buněk vodorovně nebo svisle do jedné. Tato funkce je implementována pomocí parametrů COLSPAN (COLiimn SPANning) a ROWSPAN (ROW SPANning) specifikovaných v kódech

nastavení jednotlivých sloupců této skupiny. Nicméně ve štítku v případě potřeby lze nastavit parametry zarovnání, jejichž hodnoty platí pro všechny sloupce této skupiny. Hodnoty parametrů zadané ve značce , přepíše hodnoty ze značky . Všimněte si, že ve značce v tomto příkladu na rozdíl od předchozího není parametr SPAN. Zde jeho použití nemá smysl, protože počet prvků ve skupině bude určen těmi, které následují za tagem značky . Tedy jakákoli daná hodnota parametru SPAN značky bude nově definován.

Na Obr. 4.17 ukazuje výsledek implementace výše uvedeného kódu a také variantu zobrazení takové tabulky se záznamem RULES=GROUPS v tagu

nebo

. Zápis: COLSPAN=num, kde num je číselná hodnota určující, o kolik sloupců se má aktuální buňka vodorovně rozšířit. Použití parametru ROWSPAN je obdobné, pouze zde určíte počet řádků, které má aktuální buňka vertikálně rozložit. Ve výchozím nastavení jsou tyto parametry nastaveny na hodnotu jedna. Je možné nastavit hodnoty obou parametrů pro jednu buňku současně. Správné nastavení hodnot těchto parametrů nemusí být úplně jednoduchý úkol, zejména proto, že většina HTML editorů umožňuje vizuálně navrhovat s následným generováním HTML kódů pouze ty nejjednodušší tabulky. Na Obr. 4.12 ukazuje příklad zobrazení tabulky získané pomocí následujícího HTML kódu: Buňka zahrnující dva řádky Buňka zahrnující dva sloupce Buňka 3 Buňka 4 Buňka 5 Buňka 6 Buňka 7 Rýže. 4.12. Tabulka s buňkami zahrnujícími více řádků nebo sloupců Nepozorné nastavení parametrů šíření buněk může vést k jejich vzájemnému překrývání a konfliktům, ve kterých je výsledek nepředvídatelný. Typickým použitím rozšířených buněk je společný nadpis pro několik sousedních sloupců nebo řádků. Podívejme se na příklad HTML kódu (který je zobrazen na obrázku 4.13), ve kterém jsou rozšířené buňky vytvořeny nesprávně. Buňka 1 Buňka 2 Buňka 3 (běžný Ha tři linky) Buňka 4 Buňka 5 Buňka 6 Buňka 7 (rozložena do dvou sloupců) Rýže. 4.13. Výsledek nesprávné detekce rozšířených buněk (textové překrytí) Parametr BGCOLOR určuje barvu pozadí pro celou tabulku, jednotlivé řádky nebo buňky. Může se objevit ve značkách , , neobsahuje žádné informace nebo jednu či více mezer, které nejsou považovány za data. Buňky obsahující neviditelná data mohou například obsahovat kód nebo kód odřádkování , nebo jakýkoli text, jehož barva odpovídá barvě pozadí buňky. Pokud buňky obsahující data (i neviditelná) zobrazují všechny prohlížeče stejně, pak se prázdné buňky zobrazí jinak. Prohlížeč Netscape nezobrazuje prázdnou buňku, to znamená, že místo, kde se tato buňka nachází, bude na rozdíl od buněk obsahujících data vyplněno barvou pozadí stránky, nikoli barvou pozadí buňky. Kolem prázdných buněk se nekreslí žádné ohraničení. Příklad tabulky s prázdnou buňkou je na Obr. 4.15. Rýže. 4.15. Prázdná buňka tabulky se v různých prohlížečích vykresluje jinak Microsoft Internet Explorer zobrazí obě buňky v barvě pozadí buněk. Prohlížeč, jako je NSCA Mosaic, umožňuje uživateli určit povahu vydání prázdných buněk v tabulce výběrem příslušných možností. Znalost takových funkcí vám umožní navrhovat tabulky, které se budou vhodně zobrazovat bez ohledu na prohlížeč zvolený uživatelem. V některých případech stačí místo některých prázdných buněk vytvořit buňky obsahující jeden kód. Zarovnání dat ve sloupcích tabulky Typickým problémem při vytváření tabulek je nastavení možností zarovnání pro jednotlivé řádky nebo sloupce. Pro zarovnání obsahu všech buněk aktuálního řádku stačí nastavit požadované parametry v kódu . Častěji je však nutné zajistit, aby všechny prvky ve stejném sloupci byly zarovnány stejně, protože ve většině případů sloupec obsahuje homogenní data. V dřívějších verzích HTML bylo navrženo použít parametr COLSPEC (COLumn SPECification), který byl nastaven ve značce A . Tato funkce není poskytována specifikací HTML, ale je podporována jak Netscape, tak Microsoft Internet Explorer. Vstupní formulář je stejný jako u tagu. , konkrétně: BGCOLOR=hodnota, kde hodnota je obsah barvy ve formátu RGB nebo její název. Příklad: nebo . Vnořené tabulky Jednotlivé buňky tabulky mohou obsahovat téměř libovolné jazykové značky a data povolená v sekci. dokument. Konkrétně může být další tabulka umístěna celá uvnitř buňky tabulky. Takové tabulky se nazývají vnořené. Pravidla pro jejich konstrukci se neliší od konstrukce tabulek a nepotřebují samostatný popis. Upozorňujeme pouze, že ne všechny prohlížeče, které podporují tabulky, správně zobrazují složité tabulky s několika úrovněmi vnoření, takže jejich použití vyžaduje opatrnost. Zde je příklad tabulky, která používá jednu úroveň vnoření. Města Leningradské oblasti H - počet obyvatel města (tis. obyvatel, 1992) P - vzdálenost od Petrohradu (km) Města podřízená Petrohradu Město H P Zelenogorsk 13.6 50 Kolpino 144.6 26 Kronštadt 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šechna města podřízená správa Petersburg, mít přímý městský telefonní čísla. Města regionální podřízenosti Město H P Boksitogorsk 21.6 ALIGN=RIGHT>245 Volchov 50.3 ALIGN=RIGHT>122 Vsevolozhsk 32.9 24 Vyborg 80.9 130 Vysock 1.0 ALIGN=RIGHT>159 Gatchina 80.9 46 Ivangorod 11.9 ALIGN=RIGHT>147 Kamennogorsk 5.9 157 Kingisepp 51.5 ALIGN=RIGHT>138 Kirishi 53.8 ALIGN=RIGHT>115 Kirovsk 23.8 55 Lodějnoje Pole 27.3 ALIGN=RIGHT>244 Lyga 41.8 139 (Pokračování tabulky) Město H P Luban 4.7 85 Novaja Ladoga 11.2 ALIGN=RIGHT>141 Otradnoe 22. 9 ZAROVNIT=VPRAVO>40 Pikalevo 25.1 ALIGN=RIGHT>246 Podzemí 23.1 285 Primorsk 6.7 137 Priozersk 20.5 ALIGN=RIGHT>145 Svetogorsk 15.8 ALIGN=RIGHT>201 Břidlice 42.6 ALIGN=RIGHT>192 Pinery 57.6 81 Tikhvin 72.0 ALIGN=RIGHT>200 Tosno 33.8 53 Shlisselburg 12.5 64 Rýže. 4.14. Příklad vnořených tabulek Výsledek zobrazení tohoto příkladu je znázorněn na Obr. 4.14. Na první pohled se zdá, že v příkladu není žádné vnoření tabulek. Ve skutečnosti je celý dokument tabulkou bez okrajů sestávající ze záhlaví a pouze jednoho řádku obsahujícího pět buněk. Uspořádání takové tabulky slouží výhradně k uspořádání dat na stránce. Uvnitř první buňky je další tabulka, která má vlastní záhlaví a skládá se ze tří sloupců, za nimiž následuje text zarovnaný doprostřed. Třetí a pátá buňka také obsahuje samostatné tabulky. Druhá a čtvrtá buňka jsou prázdné, neobsahují žádná data a mají jediný parametr WIDTH, který udává její šířku. Jejich účelem je nastavit odsazení mezi první a třetí a také třetí a pátou buňku, ve které jsou tabulky umístěny. Toto je jedna z možných možností nastavení takového odsazení. Další možností je použít parametr CELLSPACING, který určuje vzdálenost mezi buňkami, ale tento parametr nastavuje odsazení jak horizontálně, tak vertikálně, což v tuto chvíli není vyžadováno. Prázdná buňka s danou šířkou se navíc při zúžení výřezu zmenší, na rozdíl od prostoru určeného parametrem CELLSPACING (stejně jako CELLPADDING). Pro tento příklad zkuste zmenšit šířku výřezu prohlížeče nebo se stejným efektem zvětšit velikost písma, ve kterém je text zobrazen. Vzdálenost mezi tabulkami se zmenší na nulu, což umožní co nejdelší zobrazení všech informací současně, další změna však tabulku nepoškodí, ale umožní horizontální rolování. Podle podobného schématu můžete uspořádat umístění informací, které se skládají nejen z tabulek, ale také obrázků, textových fragmentů atd. Vlastnosti stavebních stolů Tato část pojednává o některých specifických vlastnostech jednotlivých prohlížečů a také o některých jemnostech vytváření a zobrazování tabulek. Zobrazení prázdných buněk v tabulkách Jednou z funkcí prezentace tabulek v různých prohlížečích je zobrazení prázdných buněk. Podle popisu jazyka musí všechny prohlížeče vyplnit řádky prázdnými buňkami, pokud je jejich počet v některém řádku nastaven na nižší hodnotu než ve zbývajících řádcích. Kromě toho mohou být kdekoli v tabulce buňky, které neobsahují data. Je rozdíl mezi prázdnými buňkami a buňkami obsahujícími neviditelná data. V prázdných buňkách uvnitř dvojice značek A a definoval zarovnání a šířku každého sloupce tabulky. Například nastavení colspec="L40 R50 C80" definované pro tři sloupce zarovnání dat tabulky v buňkách: pro první sloupec - LEFT, pro druhý - RIGHT a pro třetí - CENTER, stejně jako šířku každého sloupce . Vzhledem k tomu, že se jazyk HTML vyvíjel, byl tento jazyk zastaralý a v současné době není součástí specifikace jazyka a většina prohlížečů jej nepodporuje. V důsledku toho Netscape Navigator nemá žádné speciální nástroje k vyřešení tohoto problému a jedinou možností je buď použít výchozí zarovnání, nebo v případě potřeby nastavit příslušné hodnoty v každé buňce. Microsoft Internet Explorer poskytuje speciální značky - A . Tyto značky by se měly objevit hned za popisem. před prvním výskytem značky . Možnosti značek A může být SPAN, který určuje počet sousedních sloupců, které jsou ovlivněny hodnotami parametru, a ALIGN, který určuje vodorovné zarovnání dat ve všech buňkách odpovídajícího sloupce (nebo sloupců). Platné hodnoty pro parametr ALIGN jsou LEFT, RIGHT a CENTER. Pro parametr SPAN je výchozí hodnota jedna. Štítek navíc umožňuje nastavit parametr VALIGN, který určuje vertikální zarovnání dat v buňkách. Platné hodnoty pro parametr VALIGN jsou MIDDLE, TOP a BOTTOM. Rozdíl mezi značkami A spočívá v tom, že první z nich kromě nastavení parametrů zarovnání dat pro sloupce provádí také podmíněné sjednocení několika sloupců do skupiny. Efekt této agregace se projeví při použití parametru RULES, který je popsán níže. Ve výchozím nastavení jsou všechny sloupce v tabulce považovány za jednu skupinu. Štítek by měl být použit pouze k určení zarovnání dat v jednotlivých sloupcích ve skupině. Vezměme si příklad. Předpokládejme, že je nutné sestavit tabulku obsahující 6 sloupců a data v prvních třech z nich by měla být zarovnána doprava a další tři by měly být uprostřed. Chcete-li tento problém vyřešit, napište následující část kódu HTML: (data pro tabulku) Výsledek zobrazení tohoto kódu je na Obr. 4.16. Rýže. 4.16. Tabulka s různými možnostmi zarovnání pro data ve skupinách buněk Další příklad. Předpokládejme, že v předchozí tabulce by první dva sloupce měly být zarovnány doprava a třetí - uprostřed a všechny tři sloupce by měly být spojeny do skupiny. Další tři sloupce musí být také seskupeny a mít stejné zarovnání jako první skupina. Chcete-li tento problém vyřešit, napište následující část kódu HTML: (data pro tabulku) V tomto příkladu za značkou

, ze kterého je viditelný význam seskupení.

Rada

Vzhledem k rozsahu značek

A omezeny na jediný prohlížeč, Microsoft Internet Explorer, měly by být používány opatrně. Pohodlnost použití těchto značek je zřejmá, ale v praxi je většina tabulek sestavena s použitím příslušného zarovnávacího parametru ALIGN pro každou buňku tabulky tam, kde je to nutné, což značně zvětšuje velikost zdrojového kódu tabulky, ale zajišťuje, že je zobrazitelná v jakýkoli prohlížeč.




Rýže. 4.17. Tabulka se seskupenými sloupci

Nastavení barvy okrajů tabulky

Několik dalších možností, specifických pouze pro Microsoft Internet Explorer, umožňuje zvolit barvu ohraničení tabulky – BORDERCOLOR, BORDERCOLORLIGHT a BORDERCOLORDARK. Tyto parametry lze nastavit ve značkách

, . Jako hodnotu těchto parametrů lze použít název barvy nebo její hexadecimální hodnotu. Parametr BORDERCOLOR určuje barvu všech prvků ohraničení tabulky, zatímco další dva parametry určují barvu ohraničení jednotlivých komponent a přepisují hodnotu BORDERCOLOR. Parametr BORDERCOLORLIGHT obarví levý a horní okraj celé tabulky a pravý a spodní okraj každé buňky. Druhý parametr BORDERCOLORDARK určuje barvy protilehlých hran. Díky kombinaci těchto parametrů bude tabulka vypadat poněkud vyvýšená nad povrch stránky nebo zapuštěná. Vše závisí na zvolené kombinaci barev.

Poznámka

Prohlížeč Netscape 4.x také podporuje volbu BORDERCOLOR.

Nastavte obrázek na pozadí pro stůl

Microsoft Internet Explorer (stejně jako Netscape verze 4.x) umožňuje použití parametru BACKGROUND, který určuje obrázek na pozadí tabulky, stejně jako to lze provést pro celý HTML dokument. Tento parametr lze nastavit ve značkách

,	A

, , w

Microsoft Internet Explorer umožňuje používat řadu nových značek pro strukturování tabulek a flexibilní kontrolu nad kreslením rámečků a čar mřížky.

Tagy

, A přísněji nastavit strukturu popisu tabulky, zvýraznění buněk záhlaví tabulky, hlavní obsah tabulky a poslední řádek. Tyto značky se mohou objevit pouze v popisech tabulek v rámci dvojice značek

A	. Tagy pro strukturování tabulky

A.

Tagy A se používají k popisu záhlaví a zápatí tabulky. Tyto značky se mohou v tabulce objevit pouze jednou. Koncovou značku pro ně lze vynechat. Použití těchto značek je užitečné při vytváření velkých tabulek, které přesahují jednu stránku.

Štítek se může v popisu tabulky vyskytovat vícekrát a vyžaduje použití koncového tagu. Tento tag provádí logické seskupování dat stejným způsobem jako tag A, která seskupuje sousední sloupce.

Při použití nových tagů je možné flexibilněji spravovat rámečky a čáry mřížky tabulky.

Kreslení rámečků kolem stolu je řízeno parametrem tagu FRAME

, a čáry mřížky tabulky - s parametrem RULES. Například je možné kreslit pouze svislé čáry mezi sloupci a místo ohraničení kolem celé tabulky vytvořit vodorovné čáry v horní a dolní části tabulky.

Parametr FRAME může nabývat následujících hodnot:

• BOX nebo BORDER - rám se kreslí ze všech čtyř stran
• VÝŠE - pouze horní strana
• NÍŽE - pouze ze spodní strany
• HSIDES - nakreslete spodní a horní stranu
• VSIDES - kresba levá a pravá strana
• LHS - pouze levá strana
• RHS - pouze pravá strana
• ZRUŠIT - stůl bez vnějších rámů

Parametr RULES řídí vykreslování vnitřních čar mřížky tabulky a může nabývat následujících hodnot:

• VŠECHNO - jsou nakresleny všechny vnitřní čáry
• SKUPINY - vykreslí se pouze čáry oddělující skupiny
• ŘÁDKY - nakreslete čáry oddělující čáry
• COLS - nakreslete čáry oddělující sloupce
• ŽÁDNÝ - vnitřní čáry se nekreslí

Příklad:

.

Poznámka

Kreslení čar mřížky tabulky a rámečků bude provedeno pouze v případě, že je přítomen parametr tag BORDER.

. Pokud tento parametr chybí nebo je nastaven na nulu, čáry mřížky a rámečky nebudou chybět pro žádnou hodnotu parametrů FRAME a RULES.

Zde je příklad kompletního HTML kódu, který vytvoří tabulku pomocí popsaných funkcí:

Příklad ovládání flexibilní linky
mřížka tabulky

Záhlaví sloupce 1	Záhlaví sloupce 2	Záhlaví sloupce 3
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Výsledek	Výsledek	Výsledek




Rýže. 4.18. Flexibilní kreslení čar mřížky tabulky pomocí Microsoft Internet Explorer

V tomto příkladu, jehož zobrazení prohlížečem je znázorněno na Obr. 4.18 je zobrazena jedna z možných možností ovládání čar mřížky a rámečků kolem tabulky. Kolem stolu je nakreslen rám o tloušťce 5 pixelů (BORDER=S), pouze na horní a spodní straně (FRAME=HSIDES). Čáry mřížky jsou nakresleny uvnitř tabulky pro oddělení skupin dat (PRAVIDLA=SKUPINY). Datové skupiny jsou definovány za prvé přítomností tří značek , z nichž každý deklaruje jeden sloupec tabulky skupina. Za druhé, značky , A<тгоот>také rozdělit data tabulky do skupin, což určuje vykreslení vnitřních vodorovných čar.

Nastavte počet sloupců v tabulce

Microsoft Internet Explorer (stejně jako Netscape verze 4.x) umožňuje specifikovat v tagu

parametr COLS, jehož hodnota určuje počet sloupců v tabulce. Záznam tohoto parametru umožňuje urychlit postup rozvržení tabulky při zobrazení v prohlížeči, protože je možné určit počet sloupců před načtením kódu popisu tabulky. V tuto chvíli povolení této možnosti nijak neovlivní proces načítání dokumentu.

Vertikální zarovnání stolu

Poslední parametr značky

, který je jedinečný pro Microsoft Internet Explorer, je VALIGN, který určuje vertikální zarovnání tabulky vzhledem k textu. Jeho účinek je podobný stejnému parametru pro obrázky.

Poznámka

Upozorňujeme, že použití stejného parametru se může výrazně lišit jak v účelu, tak v možných hodnotách pro různé značky, a to i pro stejný prohlížeč a v rámci jazykové specifikace. Proto je nemožné sestavit souhrnnou tabulku o použití různých parametrů mimo kontext jejich aplikace. Například parametr ALIGN pouze v tabulkách se používá třemi různými způsoby:

• pro značku

parametr ALIGN může nabývat hodnot LEFT nebo RIGHT a znamená umístění stolu, stisknuté k levému nebo pravému okraji;

pro značku

, Požadované.

TD – vytvoří novou buňku v řádku. Uzavírací štítek Požadované.

Podívejme se na příklad, abychom lépe porozuměli všem výše uvedeným:

parametr ALIGN nabývá hodnot TOP nebo BOTTOM a znamená umístění záhlaví tabulky nad nebo pod tabulkou;

pro značky

A

parametr ALIGN nabývá hodnot LEFT, RIGHT nebo CENTER a znamená horizontální zarovnání obsahu odpovídající buňky (nebo buněk) tabulky. Alternativa k zobrazení tabulky Podpora tabulek se stala všudypřítomnou funkcí webových prohlížečů, takže zbývá jen málo důvodů se jejich používání vyhýbat. Nicméně zvažte možné možnosti alternativní reprezentace dat, které lze použít místo tabulek nebo navíc k nim. Některé další způsoby, které nepoužívají koncept tabulek: Použití předformátovaného textu. Tato metoda se tradičně používá v rané verze Jazyk HTML, kdy podpora tabulek ještě neexistovala. Jeho použití neztratilo svůj význam pro současnost, protože takové texty budou správně zobrazovat všechny prohlížeče, včetně čistě textových. Použití obrázku obsahujícího tabulku. Tabulku může vytvořit kdokoli textový editor nebo dokonce vykreslený webovým prohlížečem a poté uložen jako obrázek v některém z grafických formátů. Toto není nejlepší možnost, protože ztrácí veškerou flexibilitu dynamického přizpůsobení zobrazení tabulek. Navíc je potřeba uložit další obrázkový soubor, jehož velikost bude navíc zpravidla mnohem větší než velikost textu popisujícího HTML tabulku. Možnou oblastí použití jsou tabulky přesně definovaných velikostí, u kterých je závislost jejich zobrazení na jakýchkoliv vnějších faktorech (fonty, režimy prohlížeče atd.) nepřijatelná. Použití seznamů místo tabulek. V nejjednodušších případech je možné místo organizování tabulek vystačit s jedním z typů seznamů dostupných v jazyce HTML. Příprava stolu K přípravě HTML tabulek lze použít libovolné editory, z nichž většina disponuje nástroji pro vizuální tvorbu tabulek. Zde je příklad přípravy tabulky v editoru HotDog Professional. Pro vytvoření tabulky stačí vybrat položku Tabulky z nabídky Vložit, poté se zobrazí dialogové okno zobrazené na Obr. 4.19. Vytvoření tabulky spočívá ve vyplnění příslušných polí v okně. Po určení počtu řádků a sloupců v tabulce můžete přistoupit k přímému vyplňování jednotlivých buněk tabulky, které se zobrazí ve stejném dialogovém okně. Dialogové okno má tlačítko Náhled, jehož stisk umožňuje zobrazit výslednou tabulku pomocí vestavěného prohlížeče (obr. 4.20). Rýže. 4.19. Dialogové okno pro vytváření tabulek Rýže. 4.20. Tabulka zobrazená pomocí vestavěného prohlížeče Po dokončení přípravy dat pro tabulku klikněte na OK. Poté bude vygenerovaný kód popisu tabulky vložen do upravitelného HTML dokumentu. Pro příklad znázorněný na Obr. 4.19 bude vygenerován následující kód: (část kódu vynechána) Hlava stolu Sloupec 1 Sloupec 2 Sloupec 3 Sloupec 4 1 2 3 4 Podobně je tento úkol řešen pomocí komponenty Netscape Composer aplikace Netscape Communicator. Na Obr. 4.21 zobrazí dialogové okno, ve kterém je třeba vyplnit požadovaná pole. Pro vstup další možnostištítek je k dispozici tlačítko Extra HTML. Po vyplnění polí dialogového okna klikněte na tlačítko Použít a poté budete mít možnost vyplnit buňky tabulky (obr. 4.22). Rýže. 4.21. Dialogové okno pro nastavení možností tabulky Netscape Composer Rýže. 4.22. Počáteční pozice vstupního kurzoru v prázdné tabulce Tabulky pak hrají velmi důležitou roli při vytváření neviditelného rámce pro webovou stránku. A to pomůže rovnoměrně a krásně uspořádat text, nabídky, obrázky atd. Pro lepší pochopení toho, co se vám snažím sdělit, se podívejte na ukázkovou kostru webové stránky: Tak, jak vytvořit jednoduchou tabulku v html? Chcete-li sestavit tabulku, musíte použít tři značky: STŮL – tato značka je potřeba k otevření tabulky. Jedná se o druh kontejneru, který obsahuje další prvky. Tady je to ohnuté tak, že bez koblihy na to nejde přijít. Nic, na to přijdeš, až uvidíš příklad. Uzavírací štítek Požadované. Tabulka se skládá z řádku řada 1 řada 1 řada 2 řada 2 řada 3 řada 3 buňka 1 buňka 2 buňka 1 buňka 2 buňka 1 buňka 2 TR – vytvoří nový řádek tabulky. Uzavírací štítek

řádek 1 buňka 1	řádek1 buňka2
řádek 2 buňka 1	řádek 2 buňka 2
řádek 3 buňka 1	řádek 3 buňka 2





Zde je výsledek:

řádek 1 buňka 1	řádek1 buňka2
řádek 2 buňka 1	řádek 2 buňka 2
řádek 3 buňka 1	řádek 3 buňka 2

Pojďme si vše vysvětlit.
Značka se otevře před každým vytvořením nové tabulky.

.
Dále umístěte doprostřed nádoby štítek , což označuje začátek nového řádku.
Do tohoto řádku vložte dvě buňky s obsahem pomocí značky

Zavřete řádek se značkou .
Otevření dalšího řádku pomocí značky
Zavřete řádek se značkou .
Otevření třetí řady štítkem a znovu do něj vložte dvě buňky.
Zavřete řádek se značkou .
Uzavření stolu visačkou

řádek 1 buňka 1	řádek1 buňka2

.

Myslím, že jsi na to přišel? Pokud někdo zapomněl, co je to atribut okraj který používám spolu s tagem

, Připomínám, že se jedná o tloušťku rámu. Pokud v okraj bude nastaven na "0", pak budou okraje tabulky neviditelné.

Podívejte se na pár příkladů vytvořené tabulky a můžete jít dále:

řádek 1 buňka 1

řádek 2 buňka 1





Výsledek:

Abyste mohli vložit obrázek do tabulky, musíte mít základní základní znalosti o tom, jak se obrázek vkládá do souboru HTML. Mluvím o tom v . Nyní, když znáte základní nuance obrázku v HTML, můžete zkusit vložit obrázek do tabulky. To lze provést takto:

v řadě mezi značkami vložit obrázek.

řádek 1 buňka 1

řádek 1 buňka 2





Výsledek:

řádek 1 buňka 1

řádek 1 buňka 2

Jak sloučit buňky v tabulce?

Chcete-li sloučit buňky v tabulce, musíte použít tyto atributy:
COLSPAN- určuje počet sloupců.
Výchozí hodnota je 1.
ROWSPAN- určuje počet řádků.
Výchozí hodnota je 1.


spojit buňky v horním řádku s atributem colspan :

řádek 1 buňka 1+2
řádek 2 buňka 1	řádek 2 buňka 2





Výsledek:

Jak nastavit velikost stolu?

Chcete-li nastavit výšku a šířku tabulky, použijte následující atributy:

ŠÍŘKA- šířka stolu. Velikost se zadává v pixelech nebo v procentech.
VÝŠKA- výška stolu. Velikost se zadává v pixelech nebo v procentech.

řádek 1 buňka 1	řádek1 buňka2
řádek 2 buňka 1	řádek 2 buňka 2





Výsledek:



Zarovnání obsahu v tabulce

Chcete-li zarovnat obsah (text, obrázky) uvnitř tabulky, můžete použít následující atributy:

VYROVNAT– horizontální zarovnání obsahu v tabulce.
Připisovat VYROVNAT jsou přiřazeny hodnoty: vlevo (výchozí), centrum,že jo.
vlevo, odjet- stiskněte obsah na levou stranu;
střed - zasazený do středu;
že jo- posuňte obsah na pravou stranu

VALIGN- vertikální zarovnání obsahu v tabulce.
Připisovat VALIGN jsou přiřazeny hodnoty: nahoře, dole, uprostřed.
horní – stiskněte obsah nahoru;
dno – stiskněte obsah na dno;
střední – nastavit obsah uprostřed

řádek 1 buňka 1	řádek1 buňka2
řádek 2 buňka 1	řádek 2 buňka 2





Výsledek:



Jak udělat pozadí stolu?

Můžete také nastavit pozadí tabulky pro všechny její buňky dohromady, stejně jako pro každou buňku samostatně. Můžete nastavit barvu pozadí nebo můžete nastavit obrázek. Pro pozadí existují dva atributy:

BGCOLOR- barva pozadí celé tabulky nebo pro každou buňku jednotlivě. Barva je určena kódem nebo slovem.
POZADÍ- pozadí v tabulce je vyplněno obrázkem.

Pozornost: pokud chcete nastavit barvu pozadí nebo obrázek pozadí celé tabulky, musí být atributy nastaveny v tagu

. A když už jen do konkrétní buňky, tak do tagu

. Pro lepší pochopení se podívejte na příklad: řádek 1 buňka 1 řádek1 buňka2 řádek 2 buňka 1 řádek 2 buňka 2 Výsledek: Pozornost: pokud je obrázek menší než buňka, bude se opakovat, dokud nevyplní buňku až do konce. Pokud je obrázek větší než buňka, bude pozadí obrázku oříznuto, aby se vešlo do buňky. A na závěr mi dovolte, abych vám něco řekl dva užitečné atributy. V případě, že chcete náhle zvětšit vzdálenost mezi všemi buňkami, pomohou následující atributy: CELLPADDING– vzdálenost mezi rámem každé buňky html tabulky a materiál, který obsahuje. řádek 1 buňka 1 řádek1 buňka2 řádek 2 buňka 1 řádek 2 buňka 2 Výsledek: řádek 1 buňka 1 řádek1 buňka2 řádek 2 buňka 1 řádek 2 buňka 2 CELLSPACING je vzdálenost mezi okraji sousedních buněk. řádek 1 buňka 1 řádek1 buňka2 řádek 2 buňka 1 řádek 2 buňka 2 Výsledek: řádek 1 buňka 1 řádek1 buňka2 řádek 2 buňka 1 řádek 2 buňka 2 Fuj, řekl jsi mi to! Doufám, že jsem si s úkolem poradil a vysvětlil vše, o čem jsem věděl html tabulky. A doporučuji vám materiál dobře zafixovat. Zkuste si z html tabulky vytvořit vlastní tabulku, nebo ještě lépe celý framework pro webovou stránku. Všechno nejlepší! Děkuji za návštěvu mého blogu Podíl: 5,00 / 3 Domov →Asus →Jak vytvořit tabulku celostránkovou html. Atributy značek a pro slučování buněk → Související články: Jak naskenovat QR kód pomocí iPhone Smartphone Samsung GT I8160 Galaxy Ace II: recenze a specifikace Jak naskenovat QR kód pomocí iPhone Vše o službě Zvooq pro Tele2