Kód pro generování tabulek v html. Atributy a vlastnosti a

Tabulky jsou jedním z nejdůležitějších, ale zároveň komplexních prvků, které by měly být na webových stránkách přítomny. S jejich pomocí je vhodné prezentovat důležité a užitečné informace v poměrně stručné podobě. Většina editorů v šablonách běžících na různých motorech vám samozřejmě umožňuje automaticky vložit tabulku na stránku webu nebo do samostatné publikace, ale co když jsou design webového zdroje a jeho stránky vytvořeny od začátku? Pak může začínající mistr čelit problému: jak to udělat Pojďme zjistit, jak tento prvek správně a rychle vytvořit.

Výběr editora

Nejprve byste se při vytváření tabulky měli rozhodnout pro editor, ve kterém budete pracovat. Nejjednodušší je samozřejmě vybrat si program, ve kterém vytvoříte hlavní kód webu. Pro tyto účely je ale nejlepší použít starý dobrý poznámkový blok.

Možná se ptáte, proč si komplikovat život, protože když uděláte vše najednou v editoru, hned vidíte výsledek a navíc můžete využít rady programu.

Ano, to je pravda, ale vytvořením tabulky od začátku budete moci nejen důkladně prostudovat samotný princip její tvorby, ale také se vyhnout nepříjemným překlepům a chybám v hlavním kódu. Občas se stane, že se kurzor omylem posune dolů a během zápisu se do kódu vloudí chyba, kterou je někdy těžké najít. Po vytvoření tabulky v programu Poznámkový blok můžete zkopírovat její kód a vložit jej na místo, které potřebujete.

Algoritmus pro vytvoření tabulky

Nejprve vytvoříme krátký algoritmus, jak vytvořit tabulku v HTML. To je nezbytné, abyste pochopili posloupnost každého kroku. Poté zjistíme, jak přesně provést každý z bodů.

Začněme přípravnými kroky.

1. Nakreslete schematické znázornění tabulky na kus papíru.

2. Spočítejte počet řádků a buněk. Pokud je počet posledně jmenovaných jiný, počítáme jej pro každý řádek zvlášť.

3. Určete počet buněk záhlaví v řádku (například buňky „Č.“, „Název“ atd.).

4. Zapište si hlavní parametry tabulky - barvu, výšku a šířku, zarovnání textu - obecně vše, co se vám zdá potřebné.

1. Vložte značky tabulky.

2. Vložte značky řádků podle množství, které potřebujete.

3. Do řádků vložte značky buněk (běžné a velké), také podle čísla, které máte napsané na papíře.

4. Nastavte parametry pro tabulku jako celek.

5. V případě potřeby nastavte indikátory pro jednotlivé buňky.

6. Vyplňte naše buňky textem.

Vytvořte tabulku

Takže jste si vybrali editor, nyní pojďme zjistit, jak vytvořit tabulku v HTML. Značka, se kterou se tabulka vloží do kódu stránky (

), je spárovaný, to znamená, že naše konstrukce začíná tímto tagem a končí
.

Po vložení tagů tabulky přejdeme k vytváření řádků a buněk.

Ihned poznamenejme, že tyto prvky jsou také spárované. Štítek určuje řádky a - buňky.

Pro buňky záhlaví použijte párový prvek .

Jak již bylo zmíněno, první věc, kterou byste měli udělat, je vytvořit řádky a poté do nich zapsat buňky. Abyste se nepletli, doporučujeme buď udělat jeden nebo dva řádky odsazení mezi každým blokem, nebo napsat nový blok prvků pomocí klávesy „Tab“.

Jak to může vypadat? Něco jako toto:

  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • Žádný.Příjmení
    1;
  • Ivanov
    .

Jak vidíte, není na tom nic složitého. Hlavní věcí je nenechat se zmást v počtu řádků a buněk. V opačném případě může být stůl zkosený.

Probrali jsme tvorbu tabulky v HTML, nyní můžeme přejít k parametrům jak samotné matice, tak jejích řádků a buněk.

Možnosti tabulky

Při psaní kódu byste měli věnovat pozornost následujícím bodům: zarovnání podle okrajů, pozadí, textu atd.

Parametry tabulky jsou uvedeny v tagu

. Patří sem:

1. Border - šířka okraje. Určeno jako celé číslo. Ve výchozím nastavení jsou hranice libovolné tabulky nulové.

2. Bordercolor - barva ohraničení. Může být specifikován buď hexadecimálním kódem barvy (#00008B) nebo svým názvem v angličtině (DarkBlue). Ve výchozím nastavení je vždy šedá.

3. Bgcolor – Zadává se také pomocí kódu nebo názvu.

4. Zarovnat - zarovnání textu za tabulku. Ve výchozím nastavení - zarovnáno doleva. Pro tento parametr existují následující možnosti:

  • vlevo - obtékat zprava;
  • vpravo - obtékat vlevo;
  • střed - zobrazí tabulku uprostřed bez obtékání.

5. Šířka a výška - šířka a výška stolu. Lze zadat v pixelech nebo v procentech (vzhledem k velikosti okna prohlížeče).

Při předepisování tohoto nebo toho indikátoru byste měli věnovat zvláštní pozornost designu. Po zadání parametru musí být znaménko "rovná se", za kterým je zadaná hodnota uvedena v uvozovkách.

Co se týče barvy textu, je navržena stejně jako běžný text ve formátu HTML.

Příklad designu stolu:

;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • Žádný.Příjmení
    1;
  • Ivanov
    .

    Možnosti řádků

    Již jsme tedy přišli na to, jak vytvořit tabulku v HTML a zadat její hlavní parametry. Ale co když potřebujeme zvýraznit linku? Měl by být formátován jinak než hlavní text tabulky?

    Parametry linky jsou zapsány v tagu přesně stejná jako data tabulky. Pro řádek lze nastavit následující proměnné:

    1. Border, bordercolor a bgcolor už znáte.

    2. Align - zarovnání textu do řádku. Může mít hodnoty vlevo, uprostřed a vpravo.

    3. Valign - tato značka zarovná text svisle. Přijímá následující hodnoty:

    • top - text je zarovnán k hornímu okraji;
    • uprostřed - uprostřed;
    • dole - podél spodního okraje.

    Příklad formátu řádku:

    • ;
    • Žádný.;
    • Příjmení;
    • .

    Možnosti buňky

    A poslední věc, která stojí za pozornost pro ty, kteří chtějí vědět, jak udělat tabulku v HTML, jsou parametry jednotlivých buněk, jak běžných, tak velkých. V podstatě se vše dělá úplně stejně jako u tabulky nebo řádku. Jediná věc je, že jsou přidány další dva důležité prvky:

    1. Colspan - tento parametr určuje počet sloupců, které může buňka obsahovat.

    2. Rozpětí řádků – udává počet řádků, které tato buňka zabírá.

    Protože se design neliší od psaní řádku, nebudeme uvádět příklad kódu.

    Závěry

    Výroba stolu není tak náročná, jak by se na první pohled mohlo zdát. Hlavní věcí při psaní jeho kódu je vytrvalost a pozornost.

    Pokud jde o to, jak vložit tabulku do HTML, stačí zkopírovat a vložit její kód přesně na místo na vaší stránce, kde si myslíte, že by se měla nacházet.

    Nebojte se experimentovat a techniku ​​tvorby stolů si brzy osvojíte k dokonalosti. Hodně štěstí!

    Tabulka je jedním z hlavních nástrojů pro tvorbu webových stránek.

    Bez použití CSS, pouze pomocí tabulek můžete vytvářet stránky se složitým designem. Pokud jste absolvovali sérii lekcí Tvorba webu – první kroky, pak chápete, o čem mluvíme.

    Jakákoli tabulka je sada řádků a sloupců, na jejichž průsečíku jsou buňky. Například:

    Podívejme se na naši tabulku z pohledu HTML:

    • samotná tabulka je specifikována pomocí značek
      ,
    • tabulka má název - visačky ,
    • tabulka se skládá z řádků - značek ,
    • každý řádek se skládá ze sloupců - značek ,
    • sloupce mají názvy umístěné v prvním řádku - tagy .
    Vytvořme tabulku, kde jako obsah označíme průsečík čísel řádků a sloupců:

    Výsledek:

    Jak vidíte, moc se to nepovedlo, ozdobíme.

    Parametry HTML tabulky: odsazení, šířka, barva pozadí, rámeček

    Pro tento účel tag

    Existuje několik parametrů:

    • šířka- nastavuje šířku tabulky (v pixelech nebo % šířky obrazovky),
    • bgcolor- nastavuje barvu pozadí buněk tabulky,
    • pozadí- vyplní pozadí stolu vzorem,
    • pohraniční- nastaví ohraničení zadané šířky (v pixelech) kolem celé tabulky,
    • vycpávka buněk- nastaví výplň v pixelech mezi okrajem buňky a jejím obsahem.
    Aplikujme tyto parametry:

    Výsledek:

    To je lepší, ale naše tabulka je přitisknuta k levému okraji okna, stejně jako text v ní. Pojďme to opravit přidáním dalších tří parametrů:

    • zarovnat- nastavuje zarovnání tabulky: vlevo (vpravo), vpravo (vlevo), na střed (uprostřed),
    • rozmístění buněk- nastavuje vzdálenost mezi buňkami tabulky (v pixelech),
    • vycpávka buněk- nastavuje vzdálenost mezi textem a vnitřním okrajem buňky tabulky (v pixelech).
    Aplikujme tyto parametry:

    Výsledek:

    Upozorňujeme, že tabulka má dvojité okraje. Pokud upřesníte cellspacing="0", pak budou mít hranice obvyklou podobu:

    Výsledek:


    Obecně jsou za hranice zodpovědné dva parametry:

    • rám- nastavuje typ rámce kolem stolu a může nabývat následujících hodnot:
      • prázdnota- bez rámu,
      • výše- pouze horní rám,
      • níže- pouze spodní rám,
      • hsides- pouze horní a spodní rám,
      • vsides- pouze levý a pravý rám,
      • lhs- pouze levý rám,
      • rhs- pouze pravý rám,
      • krabice- všechny čtyři části rámu.
    • pravidla- nastavuje typ vnitřních hranic tabulky a může nabývat následujících hodnot:
      • žádný- mezi buňkami nejsou žádné hranice,
      • skupiny- hranice pouze mezi skupinami řádků a skupinami sloupců (bude diskutováno o něco později),
      • řádky- hranice pouze mezi řádky,
      • sloupce- hranice jsou pouze mezi sloupci,
      • vše- zobrazit všechny okraje.
    Pomocí těchto parametrů můžete nastavit hranice tak, jak chcete. Zde uvedeme pouze jeden příklad, experimentujte se všemi sami.

    Výsledek:


    Je třeba poznamenat, že okraje se v různých prohlížečích zobrazují mírně odlišně.

    HTML značky tr a td

    Tabulky jsou tvořeny řádek po řádku. Parametry uvedené v řádku (tr) proto rozšiřují svůj účinek na všechny buňky (td) řádku. Řetězce mohou mít tři parametry:

    • zarovnat- zarovnává text v buňkách vodorovně, může nabývat hodnot: vlevo (vpravo), vpravo (vlevo), na střed (uprostřed),
    • valign- zarovnává text v buňkách svisle, může nabývat následujících hodnot: nahoře (nahoře), dole (dole), na střed (uprostřed),
    • bgcolor- nastaví barvu čáry.
    Podívejme se na příklad:
    • šířka- nastavuje šířku sloupce (v pixelech nebo v procentech, kde se šířka tabulky bere jako 100 %),
    • výška- nastaví výšku buňky a všechny buňky ve stejném řádku budou mít tuto výšku.
    Například, pojďme přidat do našeho kódu, ve značkách

    Výsledek:


    Nutno podotknout, že pokud nenastavíte šířku a výšku, bude se tabulka tvořit podle obsahu (tak tomu bylo v předchozích příkladech).

    Tato lekce je u konce, procvičte si tvorbu a navrhování tabulek, tyto dovednosti budete potřebovat v další lekci, kde budeme tvořit tabulky složitých struktur.

    Tabulky v HTML jsou natolik funkční, že je můžete použít k rozložení celých webových stránek (čtení). Nyní budeme hovořit o vkládání jednoduchých HTML tabulek na webovou stránku, analyzujeme pouze označení, ale nedotýkáme se designu, protože je lepší zdobit tabulky pomocí stylů CSS.

    Tabulkové značky a atributy

    Zde jsou základní prvky, které potřebujete k vytvoření tabulek:

    tyto parametry
    1 2 3
    - kontejner, uvnitř kterého je umístěn stůl (stejný jako
      pro označené popř
        pro číslované seznamy).
      1. pohraniční- atribut, který určuje tloušťku rámečků. Je lepší místo toho použít vlastnost border CSS.
    určuje podpis tabulky. Nemusíte použít kontejner, ale pokud se přesto rozhodnete tabulku pojmenovat, umístěte ji hned za značku , mimo buňky a řádky.
  • - párový tag obsahující řádek tabulky (buňky umístěné na stejné horizontální úrovni).
  • , bude v něm tolik buněk: jedna značka - jedna buňka.
  • umožňuje seskupit sloupce, rychle a bez ucpání kódu, přiřadit jim společné vlastnosti. Pomocí kontejneru můžete oddělit logické části tabulky od sebe. Umístěno za štítkem vytvoří nový řádek. Dále ve vnořených
    - značka, která vytvoří buňku záhlaví tabulky. Navenek se jeho obsah liší od obsahu v ostatních buňkách – obvykle text uvnitř Prohlížeč jej zvýrazní tučně a umístí doprostřed.
  • - nádoba, se kterou se vytvoří jednoduchá buňka. Kolik takových značek bude řádek obsahovat (tag
    , pokud tam není, tak po .
  • používá se ke stejnému účelu jako . může obsahovat , ale ne naopak.
  • rozpětí- atribut, který určuje počet sloupců, na které se použijí vlastnosti kontejneru
  • .
  • , A - kontejnery, které umožňují rozdělit tabulku na horní (nadpisy), hlavní (tělo) a spodní (konečnou) část. V tabulce HTML je sekvence těchto značek stejná jako sekvence kontejnerů , A
    v dokumentu HTML.
  • colspan potřebné ke spojení buněk v řadě. Hodnota atributu obsahuje číslo, které určuje počet buněk, které mají být sloučeny.
  • rozpětí řádků sloučí buňky do sloupců.
  • Příklad vytvoření tabulky

    Vytvořte dokument HTML a zkopírujte do něj následující kód:

    Příklad tabulky

    Nástroje pro tvorbu webových stránek
    ÚčelNástroj
    OznačeníHTMLXHTML
    RegistraceCSS
    RozvojPHPKrajta


    V prohlížeči bude dokument vypadat takto:

    Pojďme zjistit, které řádky kódu jsou za co zodpovědné.

    • - otevřel stůl a dal mu tloušťku rámů.
    • - pojmenovali to.
    • - otevřel linku.
    • - vytvořili buňku s designem záhlaví.
    • - vytvořila druhou buňku záhlaví v řádku. Parametr colspan indikoval, že tato buňka by měla pokrývat dvě vodorovně.
    • - zavřel linku. Zbývající řádky byly vytvořeny stejným způsobem.
    • - přidán druhý řádek tabulky s běžnými buňkami, nikoli s hlavičkami. Následující řádky a buňky byly vloženy podobně.
    • Nástroje pro tvorbu webových stránek
      Účel Nástroj
      Označení HTML XHTML
      - zavřel stůl.
    tělo stolu se nachází. Tělo se skládá z řádků a sloupců. Tabulka se vyplňuje řádek po řádku.

    Každá značka

    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

    Zde je 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 udává počet sloupců, které mají být sloučeny. Existuje také analog tohoto atributu: tag (záhlaví tabulky), kde je také potřeba zadat colspan. Výsledek bude stejný. Ale často používají běžné td.

    Nyní se podíváme blíže na všechny atributy značek

    .

    Atributy a vlastnosti značek

    K otevření štítku

    Můžete zadat různé atributy.

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

    Ve výše uvedeném příkladu jsme tabulku zarovnali na střed align="center" .

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

    . Zarovnání se tedy bude v různých buňkách lišit.

    Například

    , , , nebo
  • cols - čára je zobrazena mezi sloupci
  • žádné - všechny hranice jsou skryté
  • řádky - mezi řádky tabulky vytvořené pomocí značky se nakreslí hranice
  • 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 by měly být zapsány v úvodní značce

    A K dispozici jsou stejné možnosti jako pro budou hierarchicky aplikovány na všechny
    nebo čáry
    ... ... ...

    2. Vlastnost background="URL" - nastaví obrázek na pozadí. Místo URL by měla být napsána adresa obrázku na pozadí.

    Příklad

    Příklad tabulky
    Sloupec 1 Sloupec 2

    Na stránce se převede na následující:

    Ve výše uvedeném příkladu je náš obrázek na pozadí umístěn ve složce img (která je ve stejném adresáři jako stránka html) a obrázek se nazývá fon.gif. Upozorňujeme, že do značky jsme přidali style="color:white;" . Vzhledem k tomu, že pozadí je téměř černé, abychom zabránili splynutí textu s pozadím, udělali jsme text bílý.

    3. Vlastnost bgcolor="color" - nastavuje barvu pozadí tabulky. Můžete si vybrat libovolnou barvu z celé palety (viz kódy a názvy html barev)

    4. Vlastnost border="číslo" - nastavuje tloušťku ohraničení tabulky. V předchozích příkladech jsme zadali border="1" , což znamená, že tloušťka okraje je 1 pixel.

    5. Vlastnost bordercolor="color" - nastavuje barvu ohraničení. Pokud je border="0", pak nebude žádné ohraničení a barva ohraničení nebude mít žádný význam.

    6. Vlastnost cellpadding="číslo" - odsazení od rámečku k obsahu buňky v pixelech.

    7. Vlastnost cellspacing="číslo" - vzdálenost mezi buňkami v pixelech.

    8. Vlastnost cols="číslo" - počet sloupců. Pokud jej nenastavíte, určí počet sloupců prohlížeč sám. Jediný rozdíl je v tom, že zadání tohoto parametru velmi pravděpodobně urychlí načítání tabulky.

    9. Vlastnost frame="parameter" - jak zobrazit okraje kolem tabulky. Může nabývat následujících hodnot:

    • void - nekreslit hranice
    • border - hranice kolem stolu
    • nad - okraj podél horního okraje tabulky
    • dole - okraj v dolní části tabulky
    • hsides - přidat pouze vodorovné ohraničení (horní a spodní část tabulky)
    • vsides - nakreslete pouze svislé okraje (vlevo a vpravo od tabulky)
    • rhs - ohraničení pouze na pravé straně tabulky
    • lhs - ohraničení pouze na levé straně tabulky

    10. Vlastnost height="number" - nastavuje výšku tabulky: buď v pixelech nebo v procentech.

    11. Vlastnost rules="parameter" - kde zobrazit hranice mezi buňkami. Může nabývat následujících hodnot:

    • vše - kolem každé buňky tabulky je nakreslena čára
    • skupiny - mezi skupinami tvořenými tagy je zobrazena čára
    .

    Atributy a vlastnosti

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

    • zarovnání vlevo - vlevo
    • střed - zarovnání na střed
    • zarovnání vpravo - vpravo

    2. Vlastnost background="URL" - nastaví obrázek na pozadí buňky. Místo URL by měla být napsána adresa obrázku na pozadí.

    3. Vlastnost bgcolor="color" - nastavuje barvu pozadí buňky.

    4. Vlastnost bordercolor="color" - nastavuje barvu ohraničení buňky.

    5. Vlastnost char="letter" - určuje písmeno, od kterého má být zarovnání provedeno. Hodnota atributu align musí být nastavena na char.

    6. Vlastnost colspan="číslo" - nastavuje počet horizontálních buněk, které mají být sloučeny.

    7. Vlastnost height="number" - nastavuje výšku tabulky: buď v pixelech nebo v procentech.

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

    9. Vlastnost rowspan="číslo" - nastavuje počet vertikálních buněk, které mají být sloučeny.

    10. Vlastnost valign="parameter" - vertikální zarovnání obsahu buňky.

    • top - zarovná obsah buňky k hornímu okraji řádku
    • střed - střed zarovnání
    • dole - zarovnání ke spodnímu okraji
    • baseline - zarovnání k základní linii
    Poznámka 1

    Pro značku

    . Parametry pro jeden tag
    uvnitř něj

    Jak zabránit slepování okrajů buněk v tabulce

    Pokud mezi buňkami použijete ohraničení (okraj buňky) a nulové odsazení, budou stále slepené a získáte dvojitý rámeček . Abyste tomu zabránili, musíte ve stylech tabulky zadat border-collapse: Collapse:

    ...

    Vážení čtenáři, nyní jste se dozvěděli mnohem více o značce html tabulky. Nyní vám radím přejít k další lekci.

    L jakýkoli tabulka v HTML je množina řádků a sloupců, na jejichž průsečíku jsou buňky. Vytváření tabulek v HTML je celkem jednoduché, stačí si jen představit výsledný model. V HTML se tabulky používají nejen k prezentaci dat, lze je použít k umístění textových bloků, obrázků atd. na webové stránce, tzn. s jejich pomocí můžete vytvořit rozložení samotné stránky.

    Element TABLE, vytvořte tabulku

    Chcete-li vytvořit tabulky v HTML, element tabulka a celý kód (jeho obsah) tabulky jsou umístěny mezi tagy . Atributy tohoto prvku nastavují hodnoty pro celou tabulku:

    • pozadí- je zadán obrázek (URL), který může být pozadím pro celou tabulku;
    • bgcolor- barva pozadí tabulky, nastavte, pokud není zadáno pozadí ve formě obrázku;
    • pohraniční- tloušťka čar tabulky, pokud jsou požadovány viditelné okraje;
    • bordercolor- barva čar tabulky;
    • vycpávka buněk- vzdálenost od textu uvnitř buněk k okrajům buněk;
    • rozmístění buněk- vzdálenost od okrajů tabulky k vnějším okrajům buněk (uvnitř tabulky);
    • šířka- nastaví šířku stolu v px nebo % .

    Napišme příklad kódu pro tabulku s modrým pozadím, tloušťkou čáry 1px v bílé barvě, výplň uvnitř a vně buněk 2px, šířka 100 % stránky:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    Přidejte řádek

    Každá tabulka musí mít alespoň jeden řádek, je určen tagy . V následujícím příkladu se podíváme na příklad přidání řádku:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    Přidávání buněk

    Buňky tvoří svislé sloupce tabulky, jsou označeny značkami . Přidejte buňky do naší tabulky:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    Buňka č. 1
    Buňka č. 2
    Buňka č. 3

    Uvidíme výslednou tabulku:

    Zřetězení řetězců

    V některých případech může být nutné roztáhnout jeden sloupec přes několik řádků, používá se k tomu atribut rozpětí řádků, jehož hodnota určuje počet řádků potřebných pro sloučení. Podívejme se na příklad:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    rowspan="2" >Řádky č. 1 a č. 2 jsou sloučeny
    Buňka č. 1
    Buňka č. 2

    Buňka č. 3
    Buňka č. 4

    Linka č. 3
    Buňka č. 5
    Buňka č. 6

    Prohlížeč zobrazí:

    Řádky #1 a #2 jsou sloučeny Buňka č. 1 Buňka č. 2
    Buňka č. 3 Buňka č. 4
    Linka č. 3 Buňka č. 5 Buňka č. 6

    Sloučení sloupců

    Sloupce jsou kombinovány pomocí stejného principu, pouze pomocí atributu colspan. Podívejme se na příklad:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    colspan="2" >Sloupce #1 a #2 jsou sloučeny
    Sloupec č. 3

    Buňka č. 1
    Buňka č. 2
    Buňka č. 3

    Buňka č. 4
    Buňka č. 5
    Buňka č. 6

    Prohlížeč zobrazí:

    Atributy colspan A rozpětí řádků lze použít současně. V prohlížeči to bude vypadat takto:

    Nebo takhle:

    Zkuste si kód napsat sami!

    Rozměry a zarovnání stolu

    Výšku a šířku lze nastavit jak pro celou tabulku jako celek, tak pro jednotlivé řádky a sloupce, a to pomocí již známých atributů šířka A výška, hodnoty jsou zadány v pixelech i procentech.

    Vodorovné zarovnání tabulky je určeno atributem zarovnat, významy jsou vám již známé: vlevo, uprostřed, vpravo. A za účelem zarovnání textu v buňkách tabulky, atribut horizontálního zarovnání zarovnat musí být aplikováno na každou značku td. Pomocí CSS je to mnohem jednodušší. Chcete-li svisle zarovnat obsah buněk, použijte atribut valign. Má také své vlastní hodnoty - vertikální zarovnání na střed střední, nahoře nahoře a podél dna dno baseline (řádek, na kterém je umístěn text aktuálního řádku).

    Pozadí tabulky

    Obrázek nebo barvu pozadí lze také nastavit pro celý stůl nebo pro jednotlivou buňku, vše závisí na tom, jaké cíle sledujete. To se nastavuje – u obrázku – atributem pozadí, jehož hodnota určuje cestu k požadovanému grafickému souboru. Pro barvu pozadí - atribut bgcolor, zde je hodnotou název barvy.

    Na závěr

    To je v podstatě vše, co potřebujete pro vstupní úroveň. Na konci části o vytváření tabulek v HTML vaše první seznámení s jazykem HTML končí. Pomocí tabulky v HTML Můžete vytvářet jednoduché šablony webových stránek, takže vám doporučuji vytvořit si první úplnou šablonu hned teď. Pokrytý materiál je na to docela dost. Vpřed k dobývání hyperprostoru!


    / Bez čeho nemůžete vytvořit web: ∼ ∼