Sloupce v tabulce

Tabulky jsou v HTML organizovány po řádcích. To je pevně dáno a nedá se s tím nic dělat. Problém spočívá v tom, že jejich formátování velmi často vychází ze sloupců. Typický příklad: tabulka s čísly. Může obsahovat ekonomické výsledky nebo třeba naměřené hodnoty. Obsahuje několik sloupců, nejčastěji jsou v prvním doleva zarovnané nadpisy jednotlivých řádků, zatímco ve zbývajících sloupcích jsou doprava zarovnaná čísla.

HTML obsahuje několik prvků, kterými lze se sloupci pracovat. Jenže je postupným vývojem omezilo natolik, že jsou reálně prakticky k ničemu. Jejich pomocí lze nastavit barvu pozadí ve sloupci a jeho šířku a to je tak všechno.

Skupiny sloupců

Sloupce jsou povinně organizovány do skupin, reprezentovaných prvkem <colgroup>. Mimo něj se nemohou vyskytovat. Skupina může být jen jedna a zahrnovat všechny sloupce, ale chcete-li s nimi pracovat, bez <colgroup> to nejde.

Vyskytuje se ve dvou variantách. Ta jednodušší se používá, pokud jsou všechny sloupce stejné. Je prázdná a atributem span stanoví, kolik sloupců zahrnuje. Dalším atributem bývá class, který poslouží pro nastavení vzhledu pomocí CSS.

Řekněme, že v CSS mám definovány třídy zluta a zelena pro danou barvu pozadí:

.zluta  { background-color: #ffff7e; }
.zelena { background-color: #bfe5a9; }

Tabulka se čtyřmi zelenými sloupci by mohla obsahovat definici:

<colgroup span="4" class="zelena" />

Druhá varianta prvku <colgroup> v sobě obsahuje prvky <col>, které definují vlastnosti jednotlivých sloupců. Hodí se pro případy, kdy sloupce ve skupině mají různé vlastnosti.

Obě varianty se navzájem vylučují. Obsahuje-li <colgroup> atribut span, nesmí obsahovat vnořené <col>, a naopak.

Sloupce

Prvek <col> definuje parametry sloupce. Smí se vyskytovat jen uvnitř <colgroup> a má stejné atributy. Pomocí span lze jeho definici roztáhnout na několik sloupců a pomocí class přiřadit třídu, která v CSS nastaví jeho podobu.

Ve skutečnosti je to trochu složitější, protože podle specifikace pokud se vyskytne skupina <col> bez obalujícího <colgroup>, obal se k nim automaticky doplní.

Lehce rozvinu předchozí příklad. Máme tabulku se čtyřmi sloupci a chceme, aby první byl žlutý, zatímco následující tři zelené. Máme dvě základní možnosti, jak to zařídit. Buď použijeme dvě prázdné skupiny se span:

<colgroup span="1" class="zluta" />
<colgroup span="3" class="zelena" />

Nebo vlastnosti jednotlivých sloupců nastavíme pomocí <col>:

<colgroup>
    <col class="zluta" />
    <col span="3" class="zelena" />
</colgroup>

Jsou-li mezi sloupci homogenní skupiny, bývá výhodnější první varianta. Zatímco pokud jsou sloupce každý pes jiná ves, nejspíš bude lepší použít <col>.

Umístění

Pokud definici sloupců použijete, musí se ve zdrojovém kódu tabulky nacházet před jejím tělem. Tedy buď za titulkem <caption>, nebo hned za otvírací značkou <table>, pokud tabulka titulek neobsahuje.

Vzhled

Původně značky <colgroup> a <col> obsahovaly několik atributů pro řízení jejich vzhledu, jako například align a valign pro vodorovné a svislé zarovnání. Později byly prohlášeny za opuštěné s tím, že vzhled má definovat CSS.

To je jistě koncepčně správně, jenže sortiment vlastností CSS dostupných pro sloupce je velmi omezený. Můžete používat jen:

background
width
border pokud má tabulka nastaveno border-collapse: collapse
visibility

Ostatní jsou ignorovány. Logika je taková, že buňky ve sloupci nejsou potomky prvku <col> nebo <colgroup>, proto jim nelze pomocí sloupce nastavovat vlastnosti. Jen se jeho pozadí a případné rámečky vykreslí do pozadí za tabulkou.

Mezi ignorované vlastnosti patří i text-align, což je přesně ta vlastnost, kterou by člověk chtěl sloupcům nastavovat nejčastěji. Smolík.

Příklad

Následující zdrojový kód:

<table>
<colgroup>
  <col class="zluta" />
  <col class="zelena" span="2" />
</colgroup>
<tr><th>Měsíc</th> <th>Výnosy</th><th>Náklady</th></tr>
<tr><th>Leden</th> <td>12360</td> <td>8619</td>   </tr>
<tr><th>Únor</th>  <td>9833</td>  <td>6587</td>   </tr>
<tr><th>Březen</th><td>14209</td> <td>10318</td>  </tr>
<tr><th>Celkem</th><td>36402</td> <td>25542</td>  </tr>
</table>

vede k tomuto výsledku:

Měsíc Výnosy Náklady

Leden 12360 8619

Únor 9833 6587

Březen 14209 10318

Celkem 36402 25542

Měsíc	Výnosy	Náklady
Leden	12360	8619
Únor	9833	6587
Březen	14209	10318
Celkem	36402	25542

zpět: tabulky v HTML