Prvnφm z mocn²ch grafick²ch objekt∙ jsou tabulky, kterΘ nemusφ nutn∞ p°edstavovat jen seznam zbo₧φ.
Kapitola XI. Tabulky
Existuje bezpoΦet p°φpad∙, kdy vyu₧ijete jeden ze slo₧it∞jÜφch a takΘ mocn²ch objekt∙ na strßnce tabulky. Mo₧nostφ, jakΘ tabulky vytvo°it, a jak² jim dßt vzhled je v souΦasnΘ verzi HTML jazyka hned n∞kolik.
Ka₧dß tabulka je celek uzav°en² do pßrovΘho p°φkazu <TABLE>. Jemu p°edßme nejd∙le₧it∞jÜφ parametry, t²kajφcφ se vzhledu celΘ tabulky. Prvnφm parametrem je BORDER (okraj); ten definuje Üφ°ku rßmeΦku v bodech, pokud je "0" rßmeΦek nenφ zobrazen. Druh²m je WIDTH, kter²m se klasick²m zp∙sobem nastavuje Üφ°ka tabulky bu∩ v bodech, nebo procentußln∞ z Üφ°ky okna (za Φφslem je znak "%"). Parametr ALIGN urΦuje, jak bude tabulka na strßnce zobrazena hodnoty jsou t°i: Left (vlevo), Right (vpravo) a Center (uprost°ed okna).
Detailn∞jÜφ nastavenφ vzhledu umo₧≥ujφ jeÜt∞ dva parametry CELLSPACING (velikost mezery mezi bu≥kami v tabulce) a CELLPADDING (velikost mezery mezi st∞nou bu≥ky a jejφm obsahem).
Nov∞ do HTML p°ibyla mo₧nost definovat minimßlnφ v²Üku tabulky parametrem HEIGHT, a to op∞t procentußlnφm, nebo bodov²m vyjßd°enφm.
Nejzajφmav∞jÜφ mo₧nosti vÜak sk²tß parametr BGCOLOR, kter² dovoluje definovat barvu podkladu bun∞k v tabulce klasick²m Φφseln²m nebo jmenn²m vyjßd°enφm, jak bylo popsßno v ÜestΘ kapitole. Zde je tedy ukßzka kompletnφho uvozenφ tabulky, povinnΘ nejsou ₧ßdnΘ parametry:
<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=5 WIDTH="90%" HEIGHT="50" BGCOLOR="#FF8000">
SamotnΘ vklßdßnφ bun∞k do tabulek je jednoduÜÜφ, ne₧ byste mo₧nß Φekali. D∞je se tak pomocφ dvou pßrov²ch p°φkaz∙. Prvnφm z nich <TR> oznaΦφme ka₧d² nov² °ßdek v tabulce a druh²m <TD>, pak jednotlivΘ bu≥ky na °ßdce. P°φkaz <TR> obsahuje t°i zßkladnφ parametry spoleΦnΘ pro ka₧dou °ßdku (je mo₧nΘ je potom m∞nit jeÜt∞ na ·rovni jednotliv²ch bun∞k). T∞mi parametry jsou ALIGN (horizontßlnφ zarovnßnφ LEFT, RIGHT nebo CENTER), VALIGN (vertikßlnφ zarovnßnφ TOP, BOTTOM, CENTER a BASELINES) a BGCOLOR (barva podkladu). Pokud parametry nezadßte, budou pou₧ity standardnφ, nebo ty definovanΘ na celΘ °ßdce Φi v celΘ tabulce.
<TR ALIGN=LEFT VALIGN=TOP BGCOLOR="#008000">
Obsah jednotliv²ch bun∞k, jak ji₧ bylo °eΦeno, se uvozuje pßrov²m p°φkazem <TD>. Ten umo₧≥uje dalÜφmi parametry m∞nit vlastnosti ka₧dΘho jednotlivΘho okΘnka nezßvisle na zbytku tabulky. Pokud parametry nezadßte, budou pou₧ity standardnφ, nebo ty definovanΘ na celΘ °ßdce Φi v celΘ tabulce. Zde je kompletnφ v²pis parametr∙:
ALIGN (horizontßlnφ zarovnßnφ LEFT, RIGHT nebo CENTER)
VALIGN (vertikßlnφ zarovnßnφ TOP, BOTTOM, CENTER a BASELINES)
BGCOLOR (barva podkladu)
ROWSPAN (kolik °ßdk∙ zahrnuje bu≥ka na v²Üku)
COLSPAN (kolik sloupc∙ zahrnuje na Üφ°ku)
WIDTH (Üφ°ka sloupce danΘ bu≥ky v bodech nebo procentech z Üφ°ky tabulky)
NOWRAP (pokud je zadßn, tak se text v tabulce nezalamuje)
HEIGHT (v²Üka °ßdku bu≥ky v bodech nebo procentech z v²Üky tabulky).
PovÜimn∞te si zejmΘna parametr∙ COLSPAN a ROWSPAN, kterΘ umo₧≥ujφ vytvß°et i velmi slo₧itΘ tabulky, jejich₧ bu≥ky jsou r∙zn∞ velkΘ a navzßjem se p°ekr²vajφ.
Krom∞ klasick²ch °ßdek a bun∞k m∙₧ete v tabulce vytvß°et takΘ nadpis (bude zobrazen vycentrovan² nad tabulkou pßrov² p°φkaz <CAPTION>) a zßhlavφ ka₧dΘho sloupce.
Zßhlavφ se definuje pßrov²m p°φkazem <TH> a zahrnuje stejnΘ parametry, jako ka₧dß jinß bu≥ka, avÜak text uvnit° je oproti b∞₧n²m bu≥kßm zv²razn∞n. V tabulce takΘ bu≥ku nahrazuje.
Poznßmka:
Bu≥ka ka₧dΘ tabulky m∙₧e obsahovat libovoln² text, i formßtovan², obrßzky a dalÜφ objekty vΦetn∞ tabulek. Velikost bun∞k nelze ovliv≥ovat p°φmo, nebo¥ budou maximßln∞ tak velkΘ, aby se tam jejich obsah veÜel.
(p°φÜt∞ formulß°e, aneb u₧ivatelskΘ rozhranφ)
BED╪ICH SMETANA
7 0843
V²pis zdroje ukßzkovΘ strßnky
<HTML>
<HEAD>
<TITLE>Kapitola XI.</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 CELLSPACING=3 CELLPADDING=5 WIDTH="90%" HEIGHT="50" BGCOLOR="#FF8000" >
<CAPTION><P>Toto je<BR>klasick² nadpis tabulky.</P></CAPTION>
<TR>
<TH ALIGN=LEFT VALIGN=TOP WIDTH="10%" HEIGHT="10%" BGCOLOR="#0000FF">Zßhlavφ</TH>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ROWSPAN="2">5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
</TR>
<TR>
<TD>10</TD>
<TD>11</TD>
<TD COLSPAN="2" ROWSPAN="3">12</TD>
</TR>
<TR>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
</TR>
</TABLE>
</BODY>
</HTML>