NovΘ formßtovacφ mo╛nosti tabulek

Ve ΦtvtΘ verzi HTML se objevily n∞kterΘ novΘ zp∙soby vykreslovßnφ tabulek. Prohlφ╛eΦe Internet Explorer verze 4 a 5 jsou jedinΘ, kterΘ alespo≥ Φßst z toho podporujφ. Proto╛e ale tyto dva prohlφ╛eΦe dnes (duben 2000) v Φesk²ch zemφch naprosto dominujφ, je mo╛no nov²ch vlastnostφ tabulek bez obav vyu╛φvat. Stejn∞ jde jenom o parßdu a o usnadn∞nφ si prßce.

Vykreslovßnφ m°φ╛ky - Formßtovßnφ sloupc∙ - Skupiny °ßdk∙ - Co nefunguje

Vykreslovßnφ m°φ╛ky - FRAME a RULES

M°φ╛ka a rßmeΦek se kolem bun∞k tabulky normßln∞ vykreslujφ. NovΘ atributy frame a rules umo╛≥ujφ p°edepsat, ╛e n∞kterΘ Φßry (nap°. Φßry mezi sloupeΦky) se vykreslovat nebudou. Atribut FRAME p°itom kontroluje zobrazenφ vn∞j╣φho okraje tabulky, RULES popisujφ zobrazovßnφ vnit°nφch Φar.

Frame - vykreslenφ rßmeΦku

Jako hodnotu atributu frame m∙╛u zadat n∞kolik hodnot:

Aby to fungovalo, musφm navφc zadat nenulovou ╣φ°ku okraje (border), jinak se nezobrazφ nic. P°φklad:

<table border="2" cellpadding="6" cellspacing="0" width="90%" frame="hsides">

Tato tabulka by nem∞la mφt zobrazen prav² a lev² okraj.

Rules - vykreslenφ m°φ╛ky

Atribut RULES se pou╛φvß ·pln∞ stejn∞ jako FRAME. P°esto╛e mß mΘn∞ mo╛n²ch hodnot, p°ipadß mi vyu╛iteln∞j╣φ:

Kup°φkladu ukß╛u, jak tato tabulka zaΦφnala:

<table border="2" cellpadding="6" cellspacing="0" width="90%" frame="vsides" rules="rows">

Tato tabulka by mem∞la mφt zobrazen hornφ a spodnφ rßmeΦek a m°φ╛ku by m∞la mφt pouze mezi °ßdky. Op∞t je nutnΘ mφt nenulov² atribut border, jinak se samoz°ejm∞ nevykreslφ v∙bec nic.

Pokud se vßm nezobrazily efekty, kterΘ popisuji, patrn∞ pou╛φvßte prohlφ╛eΦ, kter² je nepodporuje. Z toho mimo jinΘ vypl²vß, ╛e se na tyto efekty nikdy nem∙╛ete spolehnout. Na╣t∞stφ jde o takovou jenom lib∙stku, jejφ╛ nefunkΦnost zase tak nebolφ.

Formßtovßnφ sloupc∙ - <col>

Kdo n∞kdy ruΦn∞ zadßval ╣φ°ky a zarovnßnφ bun∞k v n∞jakΘ v∞t╣φ tabulce, asi mu vadilo, jak je to pracnΘ. P°itom v ka╛dΘm sloupeΦku se zadßvajφ v╣em bu≥kßm stejnΘ hodnoty! Trochu nßm situaci usnadnily wysiwyg editory, kterΘ tam ty atributy (width="236" align="center" t°eba) doplnily automaticky, ale stejn∞ je pak ten k≤d p°φli╣ "nafouknut²". ╚as dozrßl na jednoduchΘ formßtovßnφ sloupc∙. Jsou na to novΘ tagy <col> a <colgroup> (ten jenom oΦas). P°φklad:

Tabulka mß tento k≤d:

<table border="2" cellpadding="6" cellspacing="0" width="300">

<col align="left" width="20">

<col align="center">

<col align="right">

<tr> <td>A</td> <td>B</td> <td>C</td> </tr>

<tr> <td>D</td> <td>E</td> <td>F</td> </tr>

</table>

 Krßtk² popis: tagy <col> se dßvajφ hned za tag <table> a m∞lo by jich b²t tolik, kolik je sloupc∙. Ka╛d² jeden tag popisuje formßtovßnφ jednoho sloupce. Pou╛itelnΘ atributy u <col> jsou ╣φ°ka width, align, bgcolor, valign a style. Mo╛nß by fungovaly i jinΘ, ale na to se nelze spolehnout. ⌐φ°ku lze krom∞ pixel∙ (zßpis bez jednotky) a procent zadßvat tΘ╛ v nßsobku: nap°. sloupec <col width="3*"> bude z p°φpadnΘho zbylΘho mφsta nßrokovat 3 dφly pro sebe (z celkovΘho souΦtu dφl∙ nßrokovan²ch v╣emi sloupci). 

Pokud se mß t°eba p∞t sousednφch sloupc∙ formßtovat stejn∞, je mo╛nΘ u <col> pou╛φt atribut span: <col span="5" align="right">.

Namφsto tagu <col> je mo╛no pou╛φt tag <colgroup>. (Dokonce by se to sprßvn∞ m∞lo d∞lat v╛dy.) Jedin² rozdφl spoΦφvß ve vykreslovßnφ m°φ╛ky, pokud u tabulky pou╛iji atribut rules="groups". (Dal╣φ teoretick² rozdφl je v tom, ╛e za tag <colgroups> se dajφ vno°ovat <col>.)

Skupiny °ßdk∙

Mßme t°i novΘ pßrovΘ tagy: <tbody>, <thead> a <tfoot>. Mohou se jimi logicky odd∞lovat °ßdky, kterΘ pat°φ k sob∞. V dne╣nφ dob∞ to nemß jinΘ uplatn∞nφ ne╛ p°i vykreslovßnφ m°φ╛ky. V budoucnosti se takto budou pravd∞podobn∞ vymezovat hlaviΦky a patiΦky, kterΘ se budou tisknout na ka╛dΘ strßnce nebo budou p°i rolovßnφ z∙stßvat na obrazovce. Nic z toho ale dne╣nφ prohlφ╛eΦe nepodporujφ.

Shrnujφcφ p°φklad:

Tato tabulka se v HTML zapφ╣e takto:

<table border="2" cellpadding="6" cellspacing="0" rules="groups">

  <colgroup span="2" align="center" valign="bottom" width="40">

  <colgroup bgcolor="#00FFFF">

<thead>

  <tr><td>╚aj</td><td>Druh</td><td>Nßzor</td></tr>

</thead>

<tbody bgcolor="red" align="right">

  <tr><td>lipov²</td><td>bylinky</td><td>sla∩ouΦk²</td></tr>

  <tr><td>t°ezalky</td><td>bylinky</td><td>na spanφ</td></tr>

</tbody>

<tbody>

  <tr><td>Cherry tea</td><td>Φern² s ovocnou v∙nφ</td><td>nic moc</td></tr>

  <tr><td>⌐φpkov²</td><td>vlastn∞ ovocn²</td><td>jedin∞ s cukrem</td></tr>

</tbody>

<tfoot>

  <tr><td>znßm je╣t∞ dal╣φ</td><td>r∙zn²ch druh∙</td><td>p°ij∩te popφt</td></tr>

</tfoot>

</table>

PoprvΘ jsme si zkusili vykreslovßnφ m°φ╛ky po oddφlech (rules="groups"). Opravdu d∙le╛itou v∞cφ je spojenφ dvou prvnφch sloupc∙ do jednΘ skupiny atributem span="2". Za pozornost stojφ vertikßlnφ zarovnßnφ na spodek (normßln∞ je na st°ed) u prvnφho a druhΘho sloupce a barva pozadφ sloupce t°etφho. Dßle atributy tagu <tbody>, kterΘ tak zformßtujφ n∞kolik °ßdk∙ najednou (kdyby se to dalo k <tr>, tak to ovlivnφ jen jeden °ßdek). U bun∞k "sla∩ouΦk²" a "na spanφ" si v╣im∞te, ╛e barva pozadφ je p°evzata z <tbody> a nikoliv z <colgroup>.

Co nefunguje

V p°φruΦkßch a textech o HTML se objevujφ n∞kterΘ novΘ mo╛nosti formßtovßnφ tabulek, kterΘ jsou sice v norm∞ HTML, ale prost∞ nikde nefungujφ. Jednß se o:

• Zobrazovßnφ patiΦky automaticky na konci tabulky
• Zarovnßnφ sloupce na znak desetinnΘ Φßrky: <col align="charoff" char=",">

Dal╣φ: Design pomocφ tabulek P°edchozφ: Formßtovßnφ tabulek
Vizte tΘ╛: Zßklady tabulek

O tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek. Zßklady HTML CSS FrontPage Hledßnφ