V tomto článku série o XHTML si řekneme něco o sloupcích v tabulce – představíme si elementy colgroup a col.

Asi jste si již stačili všimnout, že v XHTML tabulce stačí nadefinovat pouze řádky tabulky – sloupce pak vzniknou automaticky. Někdy se ale hodí označit nějak i sloupce tabulky – jednak i v nich může být jistá struktura (různé sloupce se mohou týkat různého tématu), jednak se často hodí zvýraznit vybrané z nich pomocí stylů.

Právě v takové chvíli přichází na pomoc elementy colgroup a col. Jak již víte, zapisují se v tabulce hned za element caption. Narozdíl od řádků se do nich ale nevnořují buňky tabulky (ty se v XHTML nacházejí pouze uvnitř řádků). Tyto elementy jsou jednoduše prázdné a jejich jediným účelem je aplikovat určité společné vlastnosti na sloupec (či sloupce).

V následujícím textu se naučíte elementy colgroup a col používat.

Element colgroup – skupiny sloupců

Povolený obsah: (col)*

Atributy:

%attrs;
Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
span       %Number;       "1"
Tento atribut nastavuje, kolik sloupců daná skupina obsahuje. Jeho hodnotou musí být celé číslo větší než nula, výchozí hodnotu 1 není třeba nastavovat. Pokud daný element colgroup obsahuje nějaké elementy col (viz dále), určují počet sloupců tyto elementy a obsah atributu span je ignorován.
width       %MultiLength;       #IMPLIED
Tento atribut určuje šířku každého ze sloupců, které skupina obsahuje. Pro tento účel byste již ale dnes měli používat styly.
align       (left|center|right|justify|char)       #IMPLIED
Tento atribut určuje vodorovné zarovnání obsahu v buňkách, které se nachází v dané skupině sloupců. Má zde stejný význam jako u skupin řádků.
char       %Character;       #IMPLIED
Tento atribut nastavuje znak, podle kterého se má zarovnat obsah v buňkách, které patří do daného sloupce. Také jsme se jím již zabývali u skupin řádků.
charoff       %Length;       #IMPLIED
Atribut charoff určuje odsazení zarovnávacího znaku, má také stejný význam jako u skupin řádků.
valign       (top|middle|bottom|baseline)       #IMPLIED
Atribut valign určuje svislé zarovnání obsahu v buňkách, které patří do dané skupiny sloupců. Také jsme se jím již zabývali.

Element colgroup v XHTML 1.0 Strict DTD

Element colgroup vytváří skupinu sloupců v tabulce. Počet sloupců, které do této skupiny patří, se určuje buď pomocí atributu span nebo pomocí elementů col, které se uvnitř colgroup nacházejí.

Sloupce se počítají samozřejmě od prvního. Pokud tedy chcete pojmenovat skupinu od desátého k dvacátému sloupci, musíte ještě před ni vložit skupinu o devíti sloupcích:

<table …>
  <caption>…</caption>
  <colgroup span=“9″></colgroup>
  <colgroup span=“11″ id=“nase-sloupce“></colgroup>
  …
</table>

Poznámka: Protože v tomto příkladu neobsahují elementy colgroup žádný obsah, bylo by je možné ukončit i pomocí zápisu <colgroup />. Elementy colgroup ale nějaký obsah mít mohou, a proto by s tímto zápisem mohly mít některé prohlížeče problémy – z toho důvodu je lepší zápis, který jsem použil v příkladu.

Element colgroup je element se strukturálním významem – to znamená, že byste pomocí něj neměli sdružovat sloupce tak, jak se vám to zrovna hodí. Sdružené sloupce by měly mít jakousi logickou spojitost, měly by se týkat stejného tématu.

Např. pokud budu mít ceník s položkami „hrušky“, „jablka“, „mrkve“ a „cibule“, potom by měla první skupina obsahovat první dvě položky (protože se jedná o ovoce) a druhá skupina třetí a čtvrtou položku (protože se jedná o zeleninu). Pokud potřebujete označit sloupce nezávisle na jejich struktuře, měli byste k tomu použít element col.

Element col – sloupce

Povolený obsah: EMPTY (žádný obsah)

Atributy:

%attrs;
Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
span       %Number;       "1"
Tento atribut nastavuje, kolik sloupců daný element col zahrnuje. Jeho hodnotou musí být celé číslo větší než nula, výchozí hodnotu 1 není třeba nastavovat.
width       %MultiLength;       #IMPLIED
Tento atribut určuje šířku sloupců, které daný element col zahrnuje. Pro tento účel byste již ale dnes měli používat styly.
align       (left|center|right|justify|char)       #IMPLIED
Tento atribut určuje vodorovné zarovnání obsahu v buňkách, které patří do sloupců zahrnutých pomocí daného elementu col. Má zde stejný význam jako u skupin řádků.
char       %Character;       #IMPLIED
Tento atribut nastavuje znak, podle kterého se má zarovnat obsah v buňkách, které patří do sloupců zahrnutých pomocí daného elementu col. Také jsme se jím již zabývali u skupin řádků.
charoff       %Length;       #IMPLIED
Atribut charoff určuje odsazení zarovnávacího znaku, má také stejný význam jako u skupin řádků.
valign       (top|middle|bottom|baseline)       #IMPLIED
Atribut valign určuje svislé zarovnání obsahu v buňkách, které patří do sloupců zahrnutých pomocí daného elementu col. Také jsme se jím již zabývali.

Element col v XHTML 1.0 Strict DTD

Element col je velmi podobný elementu colgroup. Narozdíl od něj však nenese žádnou strukturální informaci – dá se říct, že jeho význam je podobný jako význam elementů div a span. Slouží tedy hlavně k označování sloupců pro účely stylů a skriptů, ne k logickému seskupování sloupců.

Element col se může nacházet přímo uvnitř elementu table (v takovém případě již nesmí být u této tabulky použity elementy colgroup) nebo uvnitř skupiny sloupců (colgroup).

V následujícím příkladu rozdělíme pět sloupců tabulky na první a druhé (díky tomu budeme moct pomocí stylů vytvořit „pruhované“ zobrazení):

<table …>
  <caption>…</caption>
  <col class=“prvni“ />
  <col class=“druhy“ />
  <col class=“prvni“ />
  <col class=“druhy“ />
  <col class=“prvni“ />
  …
</table>

V tomto příkladu uděláme to samé, sloupce v tabulce ale navíc rozdělíme pomocí skupin sloupců:

<table …>
  <caption>…</caption>
  <colgroup id=“tabulka-sloupce-ovoce“>
    <col class=“prvni“ />
    <col class=“druhy“ />
  </colgroup>
  <colgroup id=“tabulka-sloupce-zelenina“>
    <col class=“prvni“ />
    <col class=“druhy“ />
  </colgroup>
  …
</table>

Shrnutí

Pokud máte tabulku, kde se nachází více tématických skupin sloupců, zapište tuto strukturu pomocí elementů colgroup. Pokud potřebujete specifické sloupce označit pro potřeby stylů, skriptů apod. a toto označené nesouvisí se strukturou tabulky, udělejte to pomocí elementu col.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět