Tabulky

Tabulky slouží k zobrazování odpovídajících si hodnot, přesněji k jejich názornějšímu vypsání korespondujících dat, taktéž jich lze využít k zarovnání údajů na stránce a mnoha dalším věcem.

Zásadní informace je, že tabulku vyplňujeme po řádcích shora dolů, v rámci řádku pak vyplňujeme od nejlevější dosud nevyplněné buňky (přianektované buňky se přeskakují).
K výrobě tabulek užíváme zejména tagů TABLE, TR, TD a th (a jejich četných atributů).

Tag TABLE

Zahajuje, resp. </table> ukončuje tabulku, oba tagy jsou povinné (bez </table> tabulku neukončíte)!
Tag TABLE má tyto atributy:

• summary - má obsahovat shrnutí, tedy obsah a smysl tabulky pro nevizuální prohlížeče, jako například Braillův terminál či mluvená řeč,
• align - určuje polohu tabulky na stránce; povolené hodnoty jsou:
  • left - zarovnej doleva,
  • center - vycentruj,
  • right - zarovnej doprava (a jiné ne!)
• width - tento atribut určuje šířku tabulky jednou z následujících možností
  1. procentem - tedy relativně vůči šířce okna browseru,
  2. absolutně v puntících (počtu budů použitých tabulkou (což při neznalosti použitého fontu není zrovna ideální),
  3. není-li šířka zadána, prohlížeč si ji určí sám.
• border - šířka okraje (přesněji čar ohraničujících buňky v počtu bodů),
• cellspacing, cellpadding - určují velikost "vycpávek" každé buňky. První veličina určuje, jak daleko od sebe mají být jednotlivé buňky (tedy jak daleko se mají rozjet čáry je ohraničující), druhá určuje, jaké místo kolem čáry ohraničující buňku zevnitř má zůstat prázdné. Má-li čára šířku 0, má smysl zkoumat součet těchto veličin,
• frame, rules...

Když otevřeme prostředí pro výrobu tabulky, můžeme nad tabulku chtít vypsat popisku. Tu získáme pomocí párového tagu CAPTION, který má atribut align, který určuje, kam se má nadpis zarovnat.

Tabulka sestává z hlavičky, těla a paty. Hlavičku oznámíme tagem <THEAD>, tělo <TBODY> a patu <TFOOT>, všechny tři tagy jsou párové (a pozor, TFOOD by bylo něco úplně jiného 8-) ). Tagy TFOOT a THEAD jsou povinné, ostatní jsou volitelné. Neuvedeme-li nic, má se za to, že se jedná o tělo.

Nyní, když víme, jak definovat hlavičku, tělo a patu, postupme k definování jednotlivých buněk. Řádky zahajujeme tagem <TR>, jednotlivé buňky pak buďto <TD> (datové buňky), nebo <TH> - hlavičkové buňky. Poslední dva tagy mají syntaxi téměř stejnou, liší se jen tím, že v případě nutnosti lze říci, které hlavičkové buňky korespondují se kterými datovými, což ovšem člověk příliš často nepotřebuje, viditelnější rozdíl je třeba v zarovnávání.

Tagy TD a TH mají zejména atributy rowspan a colspan. První určuje přes kolik řádků se má současná buňka natáhnout, druhý přes kolik sloupců. Vždycky zabereme prostor o velikosti kartézského součinu velikostí těchto atributů, čili <TD rowspan=2 colspan=2> vyrobí buňku roztaženou přes dva řádky i sloupce, tedy obsadí dohromady 4 místa (tato místa se už znovu nevyplňují!). Hodnoty těchto atributů mají být kladná celá čísla.

Dále mají tagy TD a TH zamítnuté atributy width a height, kterými jde určit rozměry buněk, ale tyto atributy jsou zamítnuté proto, že si je má určit sám prohlížeč tak, aby se mu do buněk vešel předepsaný obsah. Dále je k dispozici značně účelný atribut align, který určuje, jak má být (horizontálně) zarovnán obsah buňky. V tomto případě může nabývat těchto hodnot:

• left - doleva,
• right - doprava,
• center - na střed,
• justify - na obě strany,
• char - na společný znak (třeba desetinnou tečku),
• charoff - pozice znaku v buňce.

1. Tento zdrojový text

<TABLE border="1">
<CAPTION>Spotřeba kávy vybranými americkými senátory</CAPTION>
<TR><TH>Jméno<TH>Hrnků<TH>Druh<TH>Sladí?
<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>Ne
<TR><TD>J. Dinnen<TD>5<TD>Decaf<TD>Ano
<TR><TD>A. Soria<TD colspan="3"><em>Není k dispozici</em>
</TABLE>

V posledním řádku vidíte, že jsou vyplněny jen dva údaje, protože ten druhý je roztažen přes tři buňky horizontální.

2. Následující příklad demonstruje roztažení vertikální:

<TABLE border="1" align="center">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

vyrobí tuto tabulku:

1	2	3
4		6
7	8	9

Všimněte si, že buňka, ve které bychom očekávali číslo 5 se nevyplňuje, jelikož ji přianektovala buňka s číslem dvě.

3. Zkuste pochopit (s pomocí normy nebo jiné vhodné literatury) akrobacii použitou v následující tabulce:

<TABLE border="2" frame="hsides" rules="groups"
          summary="Code page support in different versions
                   of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

která se zobrazí takto:

CODE-PAGE SUPPORT IN MICROSOFT WINDOWS

Code-Page ID	Name	ACP	OEMCP	Windows NT 3.1	Windows NT 3.51	Windows 95
1200	Unicode (BMP of ISO/IEC-10646)			X	X	*
1250	Windows 3.1 Eastern European	X		X	X	X
1251	Windows 3.1 Cyrillic	X		X	X	X
1252	Windows 3.1 US (ANSI)	X		X	X	X
1253	Windows 3.1 Greek	X		X	X	X
1254	Windows 3.1 Turkish	X		X	X	X
1255	Hebrew	X				X
1256	Arabic	X				X
1257	Baltic	X				X
1361	Korean (Johab)	X			**	X
437	MS-DOS United States		X	X	X	X
708	Arabic (ASMO 708)		X			X
709	Arabic (ASMO 449+, BCON V4)		X			X
710	Arabic (Transparent Arabic)		X			X
720	Arabic (Transparent ASMO)		X			X

Rámečky

Rámečky alias hezky česky framy jsou jednou z možností (dle mého názoru možností nejméně násilnou), jak zobrazit více stránek najednou. Při použití rámečků postupujeme tak, že na jedné stránce popíšeme, jak se má okno prohlížeče nakrájet a které stránky se mají zobrazit ve kterém rámečku. Jelikož budeme používat rámečky, použijeme Framesetový typ dokumentu!

K výrobě stránek s rámečky používáme zejména tagy FRAMESET, FRAME a NOFRAMES. Tagem FRAMESET definujeme, jak se má okno prohlížeče rozdělit na jednotlivé rámečky, mezi tagy <FRAMESET> a </FRAMESET> popíšeme pomocí několika použití tagu FRAME obsah jednotlivých rámečků. Pak uvedeme sekci <NOFRAMES>, do které umístíme variantu stránky pro prohlížeče, které nepodporují rámečky. Dnes je v módě do sekce NOFRAMES dávat akorát poznámku, že váš prohlížeč nepodporuje rámečky, pořiďte si nový a přijďte jindy. Tento přístup je projevem jisté arogance autora demonstrujícího svou neznalost situace. Ony existují i rozumné důvody, proč člověk nepodporuje rámečky. Kupříkladu na již zmíněném Braillově terminálu, či při použití zvukového výstupu není vůbec rozumně možné rámečky implementovat.

Tag FRAMESET má zejména tyto atributy:

• rows - určuje seznamem délek rozdělení okna horizontálně, celkový součet šířek by měl být 100 % je-li určen relativně. Možno určit i absolutně v bodech.
• cols - seznam výšek pro vertikální dělení okna. V obou případech se položky seznamu oddělují čárkami (např. "20%, 80%", což rozdělí okno na dva rámečky velikosti jedné a čtyř pětiny, nebo "200,*", čímž řekneme, že první frame má být 200bodový a hvězdička u druhého říká, že má dostat zbytek).
• onload, onunload - události pro účely skriptování.

Tag FRAME má atributy:

• NAME - jméno rámečku,
• SRC - URI stránky, která se v něm má zobrazit,
• scrolling - přepínač scrollování,
• ...

Chceme-li změnit obsah jiného rámečku, použijeme atribut target tagu a. Tedy chceme-li do rámečku Karel nahrát soubor nesmysly.html, otevřeme odkaz na něj asi takto:
<a href="nesmysly.html" target="Karel">
Nyní se podívejte na názorný příklad stránky s rámečky.