Kurz HTML – tvorba tabulek 2.

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:

<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>

<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:

<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>.

<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ě:

<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>

<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:

<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).

<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.