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 42970×
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
|
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ů
28.11.2018 23:56 /František Kučera Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1
12.11.2018 21:28 /Redakce Linuxsoft.cz 22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář
6.11.2018 2:04 /František Kučera Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář
4.10.2018 21:30 /Ondřej Čečák LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář
18.9.2018 23:30 /František Kučera Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář
9.9.2018 14:15 /Redakce Linuxsoft.cz 20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business.
Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář
12.8.2018 16:58 /František Kučera Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář
16.7.2018 1:05 /František Kučera Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář
Více ...
Přidat zprávičku
 Poslední diskuze
31.7.2023 14:13 /
Linda Graham iPhone Services
30.11.2022 9:32 /
Kyle McDermott Hosting download unavailable
13.12.2018 10:57 /
Jan Mareš Re: zavináč
2.12.2018 23:56 /
František Kučera Sraz
5.10.2018 17:12 /
Jakub Kuljovsky Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?
Více ...
|