TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Obsah lekce 3
- 3.1 Tabulky – Základní
- 3.2 Tabulky – Pokročílé
- 3.3 Tabulky – Ostatní
- 3.3.1 – Sloučení buněk tabulky
- 3.3.2 – Obarvení pozadí tabulky
- 3.4 Domácí úkol
3.1 – Tvorba základních tabulek
Celá tabuka se musí uzavřít do párového tagu <TABLE> a </TABLE>. To je důležité, ale potom jsou další tagy, které musí prohlížeči říci, jak má udělat řádky a sloupce. K tomuto účelu slouží tyto tagy, všechny párové:
- <TR> a </TR>
- Tyto tagy začínají a zakončují řádek a jejich obsah se pak dělí na buňky.
- <TD> a </TD>
- Tyto tagy začínají a ukončují jednu buňku v řádku.
- <TH> a </TH>
- Tyto tagy udělají speciální buňku. Dávájí se obvykle do prvního řádku tabulky, používají se pro nazvání toho, co obsahují další buňky pod nimi. Tyto tagy nejsou povinné.
Doporučení: Pokud každý řádek tabulky napíšete na zvláštní řádek v HTML kódu, nemůžete se v kódu ztratit.
Na závěr této části lekce uvedu příklad:
Internet:
<TABLE>
<TR><TH>ADSL</TH><TH>Wifi</TH></TR>
<TR><TD>Po drátě</TD><TD>Vzduchem</TD></TR>
</TABLE>
Tento příklad udělá toto:
Internet:| ADSL | Wifi |
|---|---|
| Po drátě | Vzduchem |
3.2 – Tvorba pokročilejších tabulek
A máme jednoduchou tabulku. Ale ještě není dokonalá, například nemá žádné okraje. Proto nám poslouží další parametry, které se přidávají k tagu <TABLE>. Jsou to tyto:
| Parametr | Hodnota parametru | Význam hodnoty |
|---|---|---|
| border | číslo (v px) | tloušťka okraje (0 = žádný) |
| cellpading | číslo (v px) | Vzdálenost písma a okraje buňky |
| cellspacing | číslo (v px) | vzdálenost buňky od okraje tabulky |
Tímto jsme vylíčili některé parametry a jejich hodnoty. Nyní je použijeme v praxi.
Uděláme si jednoduchou tabulku 2×2 + nadpis:
<TABLE border="1" cellpading="1" cellspacing="1">
<TR><TH>Prohlížeč</TH><TH>Oblíbenost</TH></TR>
<TR><TD>Mozilla Firefox</TD><TD>5/10</TD></TR>
<TR><TD>Microsoft Internet Explorer</TD></TR>
A tady máme výsledek:
| Prohlížeč | Oblíbenost |
|---|---|
| Mozzila Firefox | 5/10 |
| Microsoft Internet Explorer | 4/10 |
Jak jste zjistili z příkladu, tag <TH> písmo také zarovná na střed. Aby bylo i ostatní písmo zarovnané na střed, stačí zadat k tagu <TABLE> parametr align s příslušnou hodnotou (viz lekce Formátování textu). Tímto jsme vytvořili pokročilejší tabulku, jinak řečeno tabulku, která už vypadá lépe.
3.3 – Tvorba ostatních věcí do tabulky
3.3.1 – Sloučení buněk tabulky
Tato věc je praktická, pokud chcete dvěma řádkům přiřadit v jednom sloupci jen jednu hodnotu. Zde je důležité si uvědomit další fakt – rows = řádky, cols = sloupce.
Důležité je, zapamatovat si to! Budeme to potřebovat v dalších lekcích.
Kód pro sloučení dvou buněk je takovýto:
<TABLE border="1" cellpading="1" cellspacing="1">
<TR><TH>Prohlížeč</TH><TH>Oblíbenost</TH></TR>
<TR><TD>Mozilla Firefox</TD><TD rowspan="2">5/10</TD></TR>
<TR><TD>Microsoft Internet Explorer</TD></TR>
Výsledek:
| Prohlížeč | Oblíbenost |
|---|---|
| Mozilla Firefox | 5/10 |
| Microsoft Internet Explorer |
Jak jste asi zjistili, když se parametru span přidá předpona col nebo row, tak něco sloučí. Když zadáte tedy rowspan, sloučí x (x = hodnota) řádků ve sloupci. Když zadáte colspan, sloučíte sva sloupce v jednom řádku.
3.3.2 – Obarvení pozadí tabulky
Toto je věc naprosto jednoduchá. Stačí dodat k tagu <TABLE> hodnotu bgcolor s hodnotou barvy v angličtině. Ano, je to stejný parametr, jaký se dává do tagu <BODY>, pokud chcete obarvit pozadí stránky.
3.4 – Domácí úkol
Udělejte zdrojový kód stránky se smysluplnou tabulkou 3×3 + nadpis, která bude mít oranžové pozadí a někde spojené řádky a sloupce.
Příště:
Příště se začneme věnovat obrázkům a vytvoříme první odkazy.
