Kurz HTML – tvorba tabulek 2.

1. února 2000

Po delší odmlce je tu opět další díl kurzu o tvorbě jazyka HTML. Jak jsem vám minule slíbil, dnešní díl bude především popisovat praktické příklady tvorby tabulek.

Nebudeme se příliš zdržovat a skočíme zrovna přímo do ukázek příkladů tvorby tabulek. Vysvětlení všech tagů pro tvorbu tabulek a jejich parametrů naleznete v minulém díle seriálu o tvorbě HTML, tak je tady pochopitelně nebudu popisovat.

Praktické příklady tvorba tabulek

Nejjednodušší tabulka, která má jedinou buňku, jediný sloupec a jeden jediný řádek, vypadá takhle:

Leden

<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD>Leden</TD>
</TR>
</TABLE>

Ti, co již tvorbu tabulek alespoň trochu ovládají, zjistí, že u tohoto příkladu je nastaveno orámování tabulky na jeden pixel (BORDER=“1″) dvoupixelové odsazení textu od všech čtyřech stěn buňky (CELLPADDING=“2″). Není definována velikost buňky (Width), což znamená, že tabulka bude dlouhá podle délky textu v ní obsaženém.

Jak je vidět, tvorba tabulky, která má pouze jedinou buňku, není nikterak náročná. Vytvoříme si teď tabulku, která bude mít celkem pět sloupců. K výše uvedenému příkladu pouze přidáme za definici buňky s obsahem Leden další čtyři tagy <TD> a </TD>

Leden Únor Březen Duben Květen

<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD>Leden</TD>
        <TD>Únor</TD>
        <TD>Březen</TD>
        <TD>Duben</TD>
        <TD>Květen</TD>
</TR>
</TABLE>

Tabulka obsahující řádky není rovněž nijak složitá. Jenom se přidávají tagy <TR> a </TR> mezi které vkládáme buňky pomocí tagů <TD> a </TD>. Tabulka, která tedy bude mít dva řádky a dvě buňky, bude vypadat tahle:

Pondělí
Úterý

<TABLE CELLSPACING=“2″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD>Pondělí</TD>
</TR>
<TR>
        <TD>Úterý</TD>
</TR>
</TABLE>

Pravidlo při tvorbě tabulek, řádků a sloupců je zhruba následující: První vždy následuje definice tabulky Table, poté definice řádku TR, pak definice buňky/sloupce TD, ukončení definice buňky/sloupce, ukončení definice řádku a ukončení tabulky. Tagy <TD> a </TD> musí být přitom vždy umístněny mezi tagy <TR> a </TR>.

Do výše uvedeného příkladu si přidáme do každého řádku dvě další buňky, celkem jich bude šest. To provedeme přidáním tagů <TD> a </TD> za tag <TR>.

Pondělí Úterý Středa
Čtvrtek Pátek Sobota

<TABLE CELLSPACING=“2″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD>Pondělí</TD>
        <TD>Úterý</TD>
        <TD>Středa</TD>
</TR>
<TR>
        <TD>Čtvrtek</TD>
        <TD>Pátek</TD>
        <TD>Sobota</TD>
</TR>
</TABLE>

A jak udělat spojení jednotlivých řádků a sloupců? Rovněž to není nic těžkého – pro spojení sloupců použijeme parametr Colspan a pro spojení řádků použijeme parametr Rowspan. Vytvořme si tedy jednoduchou tabulku, která bude mít dva řádky, na jedné řádce celkem pět sloupců a všechny buňky prvního řádku budou spojeny do jediné. Tabulka bude vypadat následovně:

Pět dní v týdnu
Pondělí Úterý Středa Čtvrtek Pátek

<TABLE CELLSPACING=“2″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD COLSPAN=“5″>Pět dní v týdnu</TD>
</TR>
<TR>
        <TD>Pondělí</TD>
        <TD>Úterý</TD>
        <TD>Středa</TD>
        <TD>Čtvrtek</TD>
        <TD>Pátek</TD>
</TR>
</TABLE>

A jak třeba uděláme spojení pouze tří sloupců v prvním řádku? Jednoduše, hodnotu parametru Colspan změníme na tři (tři spojené buňky) a doplníme dvakrát tagy <TD> a </TD>

Sedm dní v týdnu Pondělí Úterý
Středa Čtvrtek Pátek Sobota Neděle

<TABLE CELLSPACING=“2″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD COLSPAN=“3″>Sedm dní v týdnu</TD>
        <TD>Pondělí</TD>
        <TD>Úterý</TD>
</TR>
<TR>
        <TD>Středa</TD>
        <TD>Čtvrtek</TD>
        <TD>Pátek</TD>
        <TD>Sobota</TD>
        <TD>Neděle</TD>
</TR>
</TABLE>

Obdobně postupujeme i v případě spojování řádků. Vytvořme si tabulku, která bude mít čtyři řádky, dva sloupce a z toho první sloupec bude spojen přes čtyři řádky sloupce druhého, tedy takhle:

Dny Pondělí
Úterý
Středa
Čtvrtek

<TABLE CELLSPACING=“2″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD ROWSPAN=“4″>Dny</TD>
        <TD>Pondělí</TD>
</TR>
<TR>
        <TD>Úterý</TD>
</TR>
<TR>
        <TD>Středa</TD>
</TR>
<TR>
        <TD>Čtvrtek</TD>
</TR>
</TABLE>

Ve výše uvedeném příkladu je uvedena definice Rowspan=“4″, která říká, že čtyři řádky v tomto sloupci budou spojeny do jediné buňky. Ve stejném řádku poté následuje definice buňky s obsahem Pondělí a poté už pravidelná definice řádků a buněk.

A nyní na závěr trošku složitější tabulka. Použijeme výše uvedenou tabulku s tím rozdílem, že spojíme dvě buňky posledního řádku. Tabulka je vytvořena za tímto odstavcem. Jak je vidět, jediným rozdílem oproti minulé tabulce je to, že v do poslední definice buňky v posledním řádku jsem doplnil parametr Colspan=“2″ a že jsem snížil číslo v parametru Rowspan na tři (tři spojené řádky).

Dny Pondělí
Úterý
Středa
Čtvrtek

<TABLE CELLSPACING=“2″ CELLPADDING=“2″ BORDER=“1″>
<TR>
        <TD ROWSPAN=“3″>Dny</TD>
        <TD>Pondělí</TD>
</TR>
<TR>
        <TD>Úterý</TD>
</TR>
<TR>
        <TD>Středa</TD>
</TR>
<TR>
        <TD COLSPAN=“2″>Čtvrtek</TD>
</TR>
</TABLE>

Shrnutí

Jak je z výše uvedených příkladů vidět, tvorba tabulek není nikterak náročná, nicméně začátečníkům může složitější tabulka způsobit problémy. Zkuste použít, alespoň ze začátku, pro tvorbu tabulek některý HTML editor, například Homesite, který konkrétně obsahuje výborného pomocníka pro tvorbu náročnějších tabulek.

Nezapomínejte, že u lépe vypadajících stránek se bez použití tabulek prostě neobejdete. Už jenom v jednoduchém případě, kdy chcete mít na jedné stránce dva sloupce, je použití tabulky nezbytné.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

4 komentářů

  1. Adam

    Pro 12, 2009 v 20:36

    Je to tu fakt dobrý..

    Odpovědět
  2. lukáš

    Led 2, 2011 v 22:22

    Ahoj, rád bych se zeptal zda lze v tabulce (v buňce), napsat sáhodlouhý text, který bude zarovnán (příkazem BLOCKQUOTE), tak aby v buňce byl text zarovnán jak do leva tak do prava. Děkuji

    Odpovědět
  3. Miroslav Kucera

    Led 3, 2011 v 8:36

    Proc by to nemelo jit? Jednoduse v  CSS stylech nadefinujte toto:

    blockquote {
    text-align: justify;
    }

    Odpovědět
  4. Student

    Bře 19, 2012 v 9:08

    Dobrý den,moc děkuji za zveřejnění tohoto článku.Hodně mi pomohl v hodinách informatiky.S těmito podrobnými návody jsou tabulky hračkou.Ještě jednou díky :)

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *