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: ceník. Obsahuje dva sloupce – v levém jsou názvy položek zarovnané doleva, v pravém pak jejich ceny zarovnané doprava.

Takto upravit tabulku základními formátovacími prostředky je za trest. V každém řádku musíte použít dva atributy align, abyste první buňku zarovnali doleva (dobrá, ten by šel vynechat, zarovnání doleva je implicitní) a druhou doprava.

Prvek col

K usnadnění tohoto úkolu slouží sloupce. Jsou reprezentovány prvky <col>. Nemají žádné tělo, slouží jen jako avízo, že v tabulce bude určitý počet sloupců a mají se určitým způsobem formátovat. Umožňují také sloupce zařadit do tříd či označit identifikátory a jejich vzhled pak snadno řídit pomocí CSS.

Chcete-li je použít, musíte prvky <col> umístit před tabulková data. Tedy hned za <caption>, pokud je použit (jestliže tabulka nemá popisek, umisťují se prvky pro sloupce za úvodní <table>).

Prvku <col> můžete nastavit následující atributy:

span

Standardně každý prvek <col> odpovídá jednomu sloupci. Pomocí span můžete předepsat, že stejné parametry má mít několik po sobě jdoucích sloupců. Hodnotou je jejich počet.

width

Šířka sloupce. Udává se buď číslem (pak znamená absolutní šířku v pixelech), nebo v procentech (pak udává podíl na celkové šířce řádku). Uvedete-li šířku jen některých sloupců, klient dopočítá zbytek podle potřeby. Malý příklad – tabulka se třemi sloupci, z nichž druhý a třetí mají nastavenu šířku na 25 %, první klient dopočítá:

<table border="1" rules="all">
  <col />
  <col width="25%" span="2" />
<tr>
  <td>Raz</td>
  <td>Dva</td>
  <td>Popokatepetl</td>
</tr>
</table>

a výsledek:

Raz

Dva

Popokatepetl

valign, align, char, charoff

Řídí zarovnání obsahů buněk ve sloupci. Jejich význam jsem popsal při formátování buňky. Nastavíte-li je zároveň pro některou z buněk, má definice v buňce přednost před definicí pro celý sloupec.

Příklad

Vzpomeňte si na příklad z kapitoly o formátování tabulky. Pomocí sloupců lze jeho formátování podstatně zjednodušit:

<table>
  <col align="left" />
  <col align="right" span="2" />
<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>

Škoda, že to nefunguje zcela spolehlivě (například Firefox se nechová, jak by měl):

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