LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> HTML (8) - tabulky

Dnes začneme s další důležitou částí HTML: s tabulkami

29.7.2004 15:00 | Pavel Kácha | Články autora | přečteno 38609×

Začátek tabulky

Tabulky jsou v HTML velice důležité nejen proto, že se pomocí nich dají velice přehledně prezentovat různé informace, ale i proto, že si s nimi můžete občas vypomoci i při designu stránek, tenhle způsob by se ale už neměl používat. Na druhou stranu podpora CSS u některých prohlížečů ještě dost pokulhává, takže je to někdy bohužel nutnost, už proto byste měli tabulky znát.

Tabulky musíte uzavřít do párového tagu <table></table>, použití ukončovacího tagu je vyžadováno.

Vlastnosti tabulek můžete měnit pomocí mnoha atributů. Užitečnou funkci má atribut summary="", kterým definujete popis tabulky a její strukturu pro "nevizuální" média, tj. například pro čtečky pro zrakově postižené. Jeho hodnotou je libovolný řetězec.

Můžete také určit, jak má být na stránce tabulka zarovnána. K tomu využijete atribut align="", kterému můžete přiřadit jednu z těchto hodnot: left, right nebo center. Tím určíte jestli má být tabulka zarovnána k levé, pravé straně nebo do středu stránky. Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Atributem width="" můžete nastavit šířku tabulky. Jako hodnotu můžete použít buď celé číslo nebo procentuální část z šířky okna prohlížeče. Pokud tento atribut nepoužijete, nastaví si prohlížeč šířku tabulky sám.

Atribut bgcolor="" nám umožní nastavit pozadí celé tabulky. Jeho hodnotou může být buď pojmenovaná barva (např.: red) nebo hexadecimální zápis barvy uvozený # (např.: #c0cafd - vždy dvě hexadecimální čísla udávají intenzitu jedné ze základních barev, zleva jsou to červená, zelená a modrá, smícháním těchto tří barev vznikne výsledná barva, kterou vidíte na monitoru.). Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Jestliže chcete mít kolem tabulky rámeček, použijte atribut border="". Pro obyčejný jednoduchý rámeček stačí nastavit hodnotu 1.

U elementu <table></table> se můžeme setkat s těmito známými atributy:

  • id
  • class
  • lang
  • dir
  • title
  • style
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Můžete použít ještě několik atributů, ale o nich si povíme v příštím díle

Řádek tabulky

Prohlížeči už jsme pomocí tagu <table></table> sdělili, že chceme tvořit tabulku, a teď se konečně dostaneme k samotné tvorbě obsahu tabulky. Tabulky se v HTML vyplňují po řádcích, ve kterých se potom vyznačují jednotlivé buňky. Pro vyznačení řádku tabulky slouží párový tag <tr></tr>, který může obsahovat jen jednotlivé buňky tabulky.

I zde jsou ale atributy, kterými můžete ovlivnit data v tabulce. Atributem bgcolor="" můžete nastavit barvu pozadí pro celý řádek tabulky. Jako hodnotu můžete opět použít název barvy nebo její hexadecimální vyjádření. Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Můžete také nastavit zarovnání obsahu buněk na řádku horizontálně (atributem align="") a vertikálně (atributem valign=""). Pro align="" jsou povolené hodnoty

left
Text v buňkách bude zarovnán vlevo
center
Text v buňkách bude vycentrován
right
Text v buňkách bude zarovnán vpravo
justify
Text v buňkách bude zarovnán do bloku
char
Text v buňkách bude zarovnán podle znaku, který definujeme jako hodnotu atributu char="". Výchozí hodnotou je desetinná tečka resp. čárka (záleží na jazykovém prostředí). Pokud prohlížeč nepodporuje zarovnání "na znak" bude text v buňkách zarovnán jako by nebyla informace o zarovnání vůbec udána, tedy vlevo.

Pro valign="" jsou povolené hodnoty

top
Text v buňkách bude zarovnán "nahoru"
middle
Text v buňkách bude vertikálně vycentrován
bottom
Text v buňkách bude zarovnán dolů
baseline
Text v buňkách bude zarovnán na účaří (linka, na kterou se skládají písmena na řádku)

Kromě toho jsou povolené i tyto atributy

  • id
  • class
  • lang
  • dir
  • title
  • style
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

A existují ještě další, na které se zaměříme příště.

Buňky tabulky

HTML rozeznává dva typy buněk

Buňky se záhlavím tabulky
označujeme je párovým tagem <th></th>
Obyčejně buňky
označujeme je párovým tagem <td></td>

Pro oba dva platí ale v podstatě totéž, proto je probereme najednou.

U obou dvou můžeme atributem bgcolor="" nastavit barvu pozadí, která má vyšší prioritu než barva určená v elementech <table> a <tr> Tento atribut by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Dále můžete atributy width="" a height="" určit šířku a výšku buňky. Tyto atributy by se ale už neměly používat a v novějších verzích standardu už nebudou podporovány - lze je nahradit pomocí CSS.

Jsou zde povoleny nám už dobře známé atributy:

  • id
  • class
  • lang
  • dir
  • title
  • style
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

A ještě několik dalších, které si probereme v dalším díle.

Příklad

Ukážeme si jednoduchou tabulku zobrazující prodej imaginárního výrobku XY v letech 2001-2003

<table border="1" align="center">
  <tr>
    <th>Rok</th>
    <th>Prodáno kusů XY</th>
  </tr>
  <tr>
    <td>2001</td>
    <td>1243</td>
  </tr>
  <tr>
    <td>2002</td>
    <td>968</td>
  </tr>
  <tr>
    <td>2003</td>
    <td>1513</td>
  </tr>
</table>

A takhle bude náš příklad vypadat na stránkách

Rok Prodáno kusů XY
2001 1243
2002 968
2003 1513

Příště budeme pokračovat v tabulkách, podíváme se na různé způsoby jejich orámování.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

14.11.2017 16:56 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze