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

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ů

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

11.2.2018 23:11 /Petr Ježek
Hledáte lehký a rychlý prolížeč PDF souborů? Pokud vás již omrzelo čekat na načítání stránek či jiné nešvary, zkuste xreader.
Přidat komentář

11.2.2018 20:35 /Redakce Linuxsoft.cz
Třetí ročník odborné IT konference na téma Cloud computing v praxi proběhne ve čtvrtek 1. března 2018 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 hod. dopoledne do cca 16 hod. odpoledne. Konference o trendech v oblasti cloud computingu nabídne i informace o konkrétních možnostech využívání cloudů a řešení vybraných otázek souvisejících s provozem IT infrastruktury.
Přidat komentář

15.1.2018 0:51 /František Kučera
První letošní pražský sraz se koná již tento čtvrtek 18. ledna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Vítáni jsou všichni příznivci svobodného softwaru a hardwaru, ESP32, DIY, CNC, SDR nebo dobrého piva. Prvních deset účastníků srazu obdrží samolepku There Is No Cloud… just other people's computers. od Free Software Foundation.
Přidat komentář

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

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

> Poslední diskuze

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

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

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