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 27573×

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ů

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