HTML 5 – Lekce 5

V této lekci si povíme něco o tabulkách, k čemu se dají využít (budete překvapeni) a i když se to nezdá, tabulky budete využívat poměrně často.

 

Zde je tradiční přehled mluvnice:

<table> – párový – Označuje začátek tabulky

<th> – párový – Označuje záhlaví tabulky

<tr> – párový – Označuje řádek v tabulce

<td> – párový – Označuje buňku tabulky

(Tagů je více, ale tyto pro běžné používání plně stačí)

 

Začněme hezky postupně a to párovým tagem <table> označujícím tabulku. Tento tag je samotným začátkem tabulky a má spoustu atributů. Vypíši vám sem jen ty, co by se vám mohli hodit:

 

cellpadding – vnitřní okraj buněk – hodnotou jsou pixely

cellspacing – vnější okraj buněk – hodnotou jsou pixely

 

Ostatní hodnoty nastavujeme pomocí CSS stylů.

 

Dříve používaný atribut align je tedy nahrazen CSS vlastnostmi text-align nebo vertical- align pro text v buňkách. Jen pro připomenutí, tento atribut zarovnává text- doleva (left), doprava (right) a na střed (center), vertical-align zarovnává nahoru, doprostřed a nebo dolu.

Pokud hýbeme s celou tabulkou, používáme margin, float, případně jiné CSS vlastnosti.

CSS vlastnosti width a height slouží k zadání minimální šířky a výšky tabulky. Hodnotou je buďto procento, nebo počet pixelů.

CSS vlastnost background-color je další vlastností, kterou zde můžeme použít. Slouží k určení barvy na pozadí tabulky. Lze do jeho hodnoty napsat barvu (např.: red, yellow, blue, black, atd… ).

Dalším na řadě je vlastnost border-color. Pomocí tohoto atributu můžete nastavit barvu rámečku tabulky (taktéž red, blue, atd…).

 

Dále se ale věnujme atributům, které ještě dnes přes nástup CSS vidíme. Jedním z nich je atribut cellpadding. Díky tomuto atributu určíte velikost vnitřního okraje buněk. Hodnotou jsou pixely. U atributu cellspacing určujeme zase vnější okraj buněk, rovněž pixely.

Atribut summary není povinný, ale je (řekl bych až) slušností ho k tabulce psát. V HTML 5 však již není podporován, přesto se s ním i dnes můžeme setkat. Pomocí tohoto atributu dáte totiž možnost slepým lidem alespoň trochu nahlédnout do tabulky pomocí popisu, který do summary vložíte. Spousta slepých lidí totiž používají čtečky webů, ale co se jedná tabulek, tam jsou čtečky v koncích. Pokud tedy čtečka narazí na tabulku, přečte místo ní hodnotu summary. Summary by měl být něco jako popis tabulky, nebo stručné shrnutí obsahu. Já summary k tabulkám připisuji automaticky ze zásady.

Toto jsou tedy všechny atributy párového tagu <table>.

 

Tag <th> nám popisuje hlavičku tabulky. Text v ní je tučně zvýrazněný a větší. Používáme ho na buňky, které uvádí sloupce – v záhlaví tabulky. Má opět pár atributů, které můžeme použít:

 

scope – specifikace toho, jestli je to hlavička sloupce nebo řádku

rowspan – přesah tabulky na další řádek

colspan – přesah tabulky na další sloupec

 

Dalším tagem, který je na řadě je párový (i když nepovinně, ale zůstaňme u párovosti, zdá se mi to validnější) tag <tr>, který označuje jeden řádek v tabulce. Tento tag musí být vždy vložen v oblasti tagu <table> a může obsahovat pouze buňky tabulky. Tento tag nemá žádné podporované atributy.

 

Posledním tagem je párový tag <td>. Tento tag označuje jednu buňku tabulky. U tohoto tagu platí, že vždy musí být v obsahu tagu <tr>, tedy v řádku tabulky. Má jen pár podporovaných atributů, které vám zde vypíši (většina z nich je stejná jako u tagu <table>, proto je nebudu znovu rozepisovat):

 

rowspan – přesah buňky na další řádek – hodnotou je počet přesahujících řádků

colspan – přesah buňky na další sloupec – hodnotou je počet přesah. sloupců

 

Výšku a šířku můžeme opět nastavit pomocí CSS vlastností width a height. Starším atributem, který se však dnes už nepoužívá je atribut valign, tedy vertikální zarovnání buňky. Místo něj se používá CSS vlastnost vertical-align . Zde vám tedy vypíši hodnoty tohoto, dnes již nepoužívaného atributu:

 

middle – zarovnání buňky na střed stránky

top – zarovnání buňky nahoru

bottom – zarovnání buňky dolu

 

Další atribut je atribut rowspan, tedy přesah buňky do dalších řádků. Jde vlastně o sloučení buněk (stejně jako kdekoliv jinde). Hodnotou tohoto atributu je počet řádků kam má buňka přesahovat. Atribut colspan je prakticky to samé, ale jedná se o sloupce.

 

Tabulky se dají využít na webu prakticky kdekoliv. Hlavním využitím jsou asi na menu. V menu se využijí buňky tak, že slouží vlastně jako jednotlivé položky v menu, které většinou obsahují obrázek. Tabulku také samozřejmě můžete použít na různé rozvrhy, atd …

 

Tak to je o tabulkách asi vše. Doufám, že se vám lekce líbila a že vám tabulky nebudou činit žádné problémy.