XHTML – sloupce
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;
(atributyid
,class
,style
atitle
),
%i18n;
(atributylang
,xml:lang
adir
) a
%events;
(atributyonclick
,ondblclick
,onmousedown
,onmouseup
,onmouseover
,onmousemove
,onmouseout
,onkeypress
,onkeydown
aonkeyup
). 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ý elementcolgroup
obsahuje nějaké elementycol
(viz dále), určují počet sloupců tyto elementy a obsah atributuspan
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;
(atributyid
,class
,style
atitle
),
%i18n;
(atributylang
,xml:lang
adir
) a
%events;
(atributyonclick
,ondblclick
,onmousedown
,onmouseup
,onmouseover
,onmousemove
,onmouseout
,onkeypress
,onkeydown
aonkeyup
). 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í hodnotu1
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 elementucol
. 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.
Mohlo by vás také zajímat
-
Proč investovat do nejvýkonnějších VPS s AMD EPYC procesory
14. června 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024 -
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024 -
AI a internetové podvody
29. října 2024
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024