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

> HTML (9) - tabulky 2

Minule jsme začali pracovat s tabulkami, dnes si o nich řekneme více. Přidáme tabulkám nadpis, naučíme se nastavit vzdálenost mezi buňkami, odsazení textu od rámečku a budeme slučovat buňky.

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

Nadpis tabulky

Ať už vytváříte jednoduché nebo složité tabulky možná k nim chcete přidat nějaký nadpis. K tomuto účelu zavádí HTML párový element <caption></caption>. Koncový tag je povinný. Tento element můžete použít jen hned po tagu <table>, tzn. ještě před definicí řádek tabulky.

Pro určení kde chcete zobrazit nadpis tabulky můžete použít atribut align="", kterému můžete nastavit jednu z těchto hodnot:

top
Nadpis se zobrazí nad tabulkou. Tato hodnota je výchozí, pokud atribut align="" vynecháte, bude nadpis nad tabulkou.
bottom
Nadpis se zobrazí pod tabulkou.
left
Nadpis se zobrazí vlevo od tabulky.
right
Nadpis se zobrazí vpravo od tabulky

Tento atribut by se už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Další povolené atributy pro element <caption></caption> jsou stejné jako pro ostatní elementy. Jejich význam už byl několikrát vysvětlen, takže myslím není třeba je znovu opakovat:

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

Vzdálenost mezi buňkami tabulky

Při práci s tabulkami může nastat situace, kdy budete chtít změnit mezeru měnit jednotlivými buňkami. Žádný problém stačí jen do tagu <table> přidat atribut cellspacing="". Jako jeho hodnotu uvedeme počet pixelů, které mezi sebou mají mít buňky tabulky.

Pro lepší názornost ukáži, jak by vypadal příklad z předchozího dílu s použitím atributu cellspacing="" a s hodnotou 10. První řádek bude tedy vypadat takto:

<table border="1" align="center" cellspacing="10">
Rok Prodáno kusů XY
2001 1243
2002 968
2003 1513

Z příkladu je funkce tohoto atributu, myslím, úplně jasná.

Vzdálenost obsahu buňky od jejího okraje

Stejně tak jako jde měnit vzdálenost jednotlivých buněk mezi sebou, jde nastavit i vzdálenost obsahu buňky od okraje buňky. Slouží k tomu atribut cellpadding="", kterému jako parametr opět předáte počet pixelů určující vzdálenost obsahu buňky od jejího okraje. Tento atribut je potřeba téměř vždy, když pracujete s tabulkami, protože jinak jsou data v tabulce nehezky nalepená na rámeček buněk.

Opět zopakuji tabulku z minula, ale přidám do elementu <table> atribut cellpadding="" a jeho hodnotu opět nastavíme na 10. První řádek tabulky bude tedy vypadat takto:

<table border="1" align="center" cellpadding="10">
Rok Prodáno kusů XY
2001 1243
2002 968
2003 1513

Je jasně vidět, že kolem obsahu buněk se vytvořila prázdná oblast, která usnadňuje čtení dat.

Slučování buněk

Jednoduché tabulky, které mají stejný počet buněk ve všech sloupcích nebo řádcích už vytvořit umíme, ale dost často nastává situace, že potřebujete některé buňky sloučit s vedlejšími. Stačí jen uvést k definici buňky, tj. k tagu <td> nebo <th> správný atribut a jako jeho hodnotu uvést kolik buněk se má sloučit.

Pro slučování buněk v řádku je to atribut colspan="". Úplně stejně se používá i atribut rowspan="", který ale spojuje buňky v jednom řádku. Oba dva atributy se dají použít najednou u jedné buňky.

Naši ukázkovou tabulku poněkud rozšíříme a využijeme i atributy colspan="" a rowspan="".

<table border="1" align="center" cellpadding="5">
  <tr>
    <th rowspan="2">Rok</th>
    <th colspan="2">Informace o prodeji</th>
  </tr>
  <tr>
    <th>Prodáno kusů XY</th>
    <th>Předpokládaný prodej</th>
  </tr>
  <tr>
    <td>2001</td>
    <td>1243</td>
    <td>850</td>
  </tr>
  <tr>
    <td>2002</td>
    <td>968</td>
    <td>1250</td>
  </tr>
  <tr>
    <td>2003</td>
    <td>1513</td>
    <td>1300</td>
  </tr>
</table>

A tady je výsledek tak, jak jej zobrazí váš prohlížeč.

Rok Informace o prodeji
Prodáno kusů XY Předpokládaný prodej
2001 1243 850
2002 968 1250
2003 1513 1300

Prázdné buňky

Při práci s tabulkami může nastat i situace podobná té z následujícího příkladu. Máte tabulku, která nemá vyplněná všechna pole, ale vy je přesto chcete zobrazit. Teoreticky by to měl vyřešit následující kód

<table border="1">
  <tr>
    <td>1. buňka</td>
    <td>2. buňka</td>
  </tr>
  <tr>
    <td>3. buňka</td>
    <td></td>
  </tr>
</table>

Ve skutečnosti to dopadne jinak než jsme asi čekali:

1. buňka 2. buňka
3. buňka

Náprava je vcelku jednoduchá: musíme do buňky vložit nějaký obsah. Pokud chceme, aby buňka vypadala jako prázdná, je ideálním řešením nedělitelná mezera, kterou můžete zapsat pomocí její HTML entity &nbsp. Po úpravě bude tedy příklad vypadat takto:

<table border="1">
  <tr>
    <td>1. buňka</td>
    <td>2. buňka</td>
  </tr>
  <tr>
    <td>3. buňka</td>
    <td>&nbsp;</td>
  </tr>
</table>
1. buňka 2. buňka
3. buňka  

Příště se podíváme na různé způsoby rámování tabulek.

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ů

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ář

18.6.2018 0:43 /František Kučera
Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.
Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

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

> Poslední diskuze

20.9.2018 10:04 / Jan Ober
Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:00 / Jan Ober
Re: Gimp

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

Více ...

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