Jak vytvářet www stránky - 12. díl

V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.
V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.

Jaké tagy tedy ještě můžete v tabulkách použít:

Tag CAPTION
Tento párový tag, určující titulek tabulky, lze zapsat výhradně za tag TABLE. Umístění nadpisu definujete parametrem align, který může mít hodnoty:

  • top - nadpis je umístěn nad tabulkou
  • bottom - nadpis je umístěn pod tabulkou
  • left - nadpis je umístěn vlevo od tabulky
  • right - nadpis je umístěn vpravo od tabulky

Tagy THEAD, TBODY a TFOOT
Tyto tagy jsou podporované od HTML 4.0 a jejich význam spočívá v rozdělení tabulky do logických sekcí. Sekce THEAD specifikuje hlavičku tabulky, TBODY samotnou tabulku a TFOOT patičku. Pokud se rozhodnete pro tento způsob definování tabulky, pak mějte na paměti, že tyto tagy se zapisují v pořadí hlavička - patička - tabulka (nebo tabulky). Tabulka by podle nové normy měla vypadat následujícím způsobem:

<TABLE>
<THEAD>
<TR> hlavička tabulky
</THEAD>
<TFOOT>
<TR> patička tabulky
</TFOOT>
<TBODY>
<TR> první řádek první části tabulky
<TR> druhý řádek první části tabulky
</TBODY>
<TBODY>
<TR> první řádek druhé části tabulky
<TR> druhý řádek druhé části tabulky
<TR> třetí řádek druhé části tabulky
</TBODY>
</TABLE>
Všechny tyto tagy dovolují definovat vlastnosti vybrané oblasti.
  • align - horizontální zarovnání textu.
  • valign - vertikální zarovnání textu.
  • char - znak, na který bude text v buňce zarovnán (např.: char="," zarovná všechny buňky v dané oblasti na desetinou čárku).
  • charoff - odsazení znaku specifikovaného v atributu char.

Tagy COLGROUP a COL
Zatímco k horizontálnímu rozdělení tabulky na logické celky slouží tagy THEAD, TFOOT a TBODY, k vertikálnímu dělení se používají tagy COLGROUP a COL, které je nutné zařadit ještě před první řádek tabulky.

Zjednodušeně řečeno - COLGROUP spojuje sloupce, které spolu logicky souvisejí, do větších celků, tag COL pak využijeme k jemnějšímu definování vlastností sloupců (často se používá pouze tag COLGROUP, který k definování sloupců plně postačuje).

U obou tagů lze definovat vlastnosti pro několik sloupců současně, k čemuž slouží atribut span, který prohlížeči říká, na kolik sloupců se příslušné nastavení vztahuje.

Kromě zarovnávacích parametrů, které jsme si vysvětlili u předchozích tagů, lze v tomto tagu pomocí atributu width nastavit ještě šířku sloupců.

Použití tagu COLGROUP si nejlépe vysvětlíme na příkladu

<TABLE border=1>
<COLGROUP span=1 align="left" width=100><COLGROUP span=3 align="right" width=75>
<TR align="center"><TH>Zboží</TH><TH>říjen</TH><TH>listopad</TH><TH>prosinec</TH></TR>
<TR><TD>jablka</TD><TD>10</TD><TD>20</TD><TD>15</TD></TR>
<TR><TD>hrušky</TD><TD>15</TD><TD>25</TD><TD>35</TD></TR>
<TR><TD>pomeranče</TD><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR><TD>citróny</TD><TD>16</TD><TD>18</TD><TD>20</TD></TR>
</TABLE>
Jak můžete poznat ze zdrojového kódu, bude text v prvním sloupci zarovnán doleva a tento sloupec bude široký 100 pixelů, zbývající tři sloupce budou zarovnány doprava a budou široké 75 pixelů. Výjimkou je obsah buněk v prvním řádku, který je diky parametru align="center" v tagu TR vycentrován.

Výsledek vypadá následovně:

Zbožíříjenlistopadprosinec
jablka102015
hrušky152535
pomeranče555
citróny161820

Slučování buněk
HTML umožňuje slučování buněk z více řádků a/nebo sloupců do jedné buňky. K tomu slouží atributy colspan a rowspan, jež můžete zapsat do tagu TH nebo TD. Hodnota těchto atributů udává, přes kolik řádek a/nebo sloupců se buňka rozkládá. Je možné použít jeden nebo oba atributy - v druhém případě se buňka bude rozkládat přes více řádků i více sloupců. Místo dlouhého popisu bude lepší použít názorný příklad:

<TABLE border="1">
<TR><TH rowspan="2"> </TH><TH colspan="2">Průměr</TH><TH rowspan="2">Hnědé oči</TH></TR>
<TR><TH>váha</TH><TH>výška</TH></TR>
<TR><TH>muži</TH><TD>75</TD><TD>182</TD><TD>40%</TD></TR>
<TR><TH>ženy</TH><TD>60</TD><TD>170</TD><TD>43%</TD></TR>
</TABLE>
Výsledek vypadá takto:

 PrůměrHnědé oči
váhavýška
muži7518240%
ženy6017043%

Poznámka: V tabulkách není vhodné definovat prázdné buňky stylem <TD></TD> ani <TD> </TD> (tedy s mezerou), neboť takové buňky nezobrazí všechny prohlížeče shodně. Použijte raději neviditelnou mezeru  , která zajistí, že prázdná buňka bude vždy zobrazena korektně.

Využití tabulek
Tabulky můžete využít především k přesnému umístění textu a grafiky na stránku. Budete-li například chtít, aby text začínal 100 pixelů od levého okraje stránky a končil 150 pixelů od pravého okraje, je nejlepším způsobem vytvořit si tabulku s nulovou šířkou rámečků. Důležité je v tomto případě nezapomenout nastavit šířku tabulky na 100% šířky stránky.

<TABLE border=0 width=100%>
<TR><TD width=100>nbsp;</TD><TD>sem přijde vlastní text</TD><TD width="150> </TD></TR>
</TABLE>
Další způsob využití tabulky je vytvoření ovládacích prvků, u kterých záleží na přesném umístění. Například vodorovnou navigační lištu lze vytvořit tímto způsobem.

<TABLE border=0 width=100%>
<TR><TD width=10% align="center"><a href="odkaz1.htm">popis1</A></TD>
<TD width=10% align="center"><a href="odkaz2.htm">popis2</A></TD>
<TD width=10% align="center"><a href="odkaz3.htm">popis3</A></TD>
. . . . .
<TD width=10% align="center"><a href="odkaz9.htm">popis9</A></TD>
<TD width=10% align="center"><a href="odkaz10.htm">popis10</A></TD></TR>
</TABLE>
Díky tomu, že jsme nepoužili absolutní ale procentuální určení šířky buněk, bude při libovolném rozlišení ovládací lišta zabírat celou šíři obrazovky a jednotlivé ovládací prvky budou vždy stejně široké.

V případě, že se místo prostých textových odkazů rozhodnete použít jako odkaz obrázek, můžete pomocí tabulek vytvořit například obrázkovou mapu složenou z několika částí, které budou odkazovat na různé objekty. V takovém případě doporučujeme určovat nejen velikost jednotlivých buněk, ale i samotných obrázků - zajistíte tím rychlejší zobrazení stránky v prohlížeči.

Využití tabulek při navrhování vzhledu stránek je skutečně široké - stačí se podívat na zdrojové kódy stránek několika serverů. Uvidíte, že ačkoli jednotlivé weby vypadají zcela odlišně, v drtivé většině případů jsou stránky tvořeny tabulkami.

Diskuze (2) Další článek: Ďábelsky rychlé disky

Témata článku: Software, Prohlížeče, Programování, Sloupec, První případ, Textový odkaz, Jednotlivá buňka, Rozdělená stránka, Druhá sekce, Příslušné nastavení, Buňka, Libovolné rozlišení, Jak, Šířka, Přesná hodnota, Díl, První parametr, Stráň, Str


Určitě si přečtěte

10 míst na mapách Googlu, která nesmíte vidět. Nahradily je čtverečky

10 míst na mapách Googlu, která nesmíte vidět. Nahradily je čtverečky

** Deset míst, které nesmíte vidět ve webových mapách ** Jsou to letiště, základny i elektrárny ** Nejvíce míst tají Francie

Jakub Čížek | 21

Jakub Čížek
Mapy GoogleMapy
Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

Vážně dnes ještě někdo krade Adobe? Video můžete stříhat zdarma v Resolve a fotky i vektory zvládne Affinity

** Kde jsou ty doby, kdy měl skoro každý doma Photoshop ** Photoshop a Premiere Pro od kamaráda nebo z warezu ** Dnes už to nemá smysl, existuje totiž hromada laciných alternativ

Jakub Čížek | 90

Jakub Čížek
Grafický editorStřih videa
Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Karel Kilián
Jak na InternetTipyProhlížeče
Air Bank, Fio banka a MONETA zakládají alianci pro bankovní identitu
Jakub Čížek
BankaČeskoeGovernment
Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook
Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

** Reddit se začíná plnit zkušenostmi se Starlinkem ** Při přímé viditelnosti dá i 120 Mb/s ** Klasický satelitní internet už teď dalece překonává

Jakub Čížek | 48

Jakub Čížek
StarlinkPoskytovatelé internetu
Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

** Získejte děti pro matematiku a základy techniky ** Kupte jim hračku nebo stavebnici, které vdechnou vlastní život ** Vybrali jsme stavebnice pro malé caparty i budoucí experty

Jakub Čížek | 10

Jakub Čížek
Stavebnice
Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

** V nových mobilech se začíná objevovat tajemná zkratka UWB ** Jde o další technologii, jak navzájem propojit různá zařízení ** Oproti Wi-Fi a Bluetooth má řadu výhod

Lukáš Václavík | 36

Lukáš Václavík
UWBIoTTechnologie
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5