9. lekce - jednoduché tabulky

Tabulky jsou velmi často používaným prvkem na stránkách, protože umožňují libovolně uspořádat obsah stránky. Design velké části stránek je tvořen právě pomocí tabulek, novější stránky ale používají pro design spíše tag div (o něm později). Stránky s tabulkami mají tu nevýhodu, že se jejich obsah zobrazí teprve po načtení celé tabulky, což u rozsáhlejších stránek trvá opravdu delší dobu. Tabulky také kopmlikují práci vyhledávačům nebo jsou málo vhodné pro jiná zobrazovací zařízení (mobily, palmtopy a další).

Tabulka se do stránky (html) vkládá pomocí párového tagu <table>. Tabulka je tvořena jednotlivými řádky a řádky obsahují buňky. Řádka tabulky je uzavřena mezi tagy <TR> a </TR>. Jednotlivé buňky v řádce se pak uzavírají mezi tagy <TD> a </TD> nebo <TH> a </TH>. Tag TD se používá pro normální buňky a TH pro buňky v hlavičce tabulky (TH se nepoužívá často, obsah hlavičkových buněk je tučný a vycentrovaný). Obsahem jednotlivých buněk může být text, obrázek nebo odkaz. Jednoduchou tabulku můžeme tedy zapsat takto (na vzhledu zápisu zdroje nezáleží, můžete například jeden řádek tabulky zapsat do jednoho řádku apod.) - na vedlejším obrázku je vidět, jak taková tabulka bude vypadat v prohlížeči:

<table border=1>
<tr><td>&nbsp;<td>1.<td>2.<td>3.<td>4.<td>5.<td>6.
<tr><td>pondělí<td>Čj<td>Ma<td>Aj<td>Ze<td>Vv<td>Vv
<tr><td>úterý<td>Čj<td>Ma<td>De<td>Hv<td>T<td>Inf
<tr><td>středa<td>Ov<td>Př<td>Ma<td>Aj<td>Pč<td>Pč
</table>

Do ukázky je přidaný ještě parametr tagu table border, což je rámeček tabulky, s číslem, které určuje jeho tloušťku. Nyní je rámeček doplněn hlavně proto, abyste viděli, jak je tabulka vytvořena, později budeme rámeček upravovat pomocí css. Všimněte si ještě buňky vlevo nahoře (první buňka v prvním řádku), ve zdroji je do ní zapsaná tzv. entita pro zápis pevné mezery &nbsp; , pokud by tam nebyla, buňka by byla prázdná a nezobrazil by se kolem ní rámeček (normální mezera by nestačila).


Pro tabulku, řádek nebo buňku tabulky můžeme ve stylu použít všechny vlastnosti, o kterých jsme se zatím učili: vlastnosti textu (barva, velikost, font ...), barva pozadí nebo obrázek na pozadí.

Ve stylu (css) by mohly být vlastnosti tabulky a textu v ní například tyto (vzpomeňte si na jejich význam):

table { font-size: 1.5em;
color: Red;
font-weight: 200;
background: #DDA0DD;}

Pokud bychom tyto vlastnosti určili pro řádek nebo buňku tabulky, výsledek by byl stejný, rozdíl by ale byl například při použití obrázku na pozadí pro tabulku, řádek nebo buňku.


Úkoly:

Úkol (3 body):

Ve složce Úkoly si udělejte novou složku s názvem SKOLA. Vytvořte novou stránku s názvem rozvrh.html, která bude obsahovat nadpis a tabulku s vaším rozvrhem. Ve stylu k této stránce mají být upravené vlastnosti body, nadpisu a tabulky. Tuto novou stránku (případně i styl) uložte do složky SKOLA, do stránky index.html přidejte nový odkaz na rozvrh.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_09_10B_tvorba www9
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.