Nepravidelné tabulky

Většina tabulek bývá pravidelných. Tvoří je spořádaná síť protínajících se sloupců a řádků. Občas (zejména v záhlaví) se však vyskytne buňka, která tuto pravidelnost narušuje. Je roztažena přes několik řádků či sloupců, případně obojí.

I na takové situace HTML pamatuje. Slouží k tomu dvojice atributů:

colspan

Říká, že buňka má být roztažena přes několik sloupců. Hodnotou je jejich počet. Například buňku roztaženou do dvou sloupců vytvoříte takto:

<table border="1" rules="all">
<tr><td colspan="2">přes dva sloupce</td></tr>
<tr><td>první</td><td>druhý</td></tr>
</table>

a výsledek:

přes dva sloupce
první	druhý

rowspan

Roztáhne buňku přes několik řádků. Hodnotou atributu je opět počet řádků tabulky, do nichž se má roztáhnout. Na těchto řádcích se již odpovídající buňka vynechává, klient si pamatuje, že díky rowspan tam zasahuje buňka z předchozího řádku. Příklad dvouřádkové buňky:

<table border="1" rules="all">
<tr><td rowspan="2">přes dva řádky</td><td>první</td></tr>
<tr><td>druhý</td></tr>
</table>

a výsledek:

přes dva řádky	první
	druhý

Oba atributy můžete zkombinovat. V tom případě vznikne buňka velikosti M × N, například:

<table border="1" rules="all">
<tr><td rowspan="2" colspan="3">buňka 2 × 3</td>
    <td>první řádek</td></tr>
<tr><td>druhý řádek</td></tr>
<tr><td>první sloupec</td>
    <td>druhý sloupec</td>
    <td>třetí sloupec</td>
    <td></td></tr>
</table>

která vypadá takto:

buňka 2 × 3			první řádek
			druhý řádek
první sloupec	druhý sloupec	třetí sloupec

Příklad

Praktická ukázka použití v záhlaví tabulky, tentokrát v obráceném pořadí. Nejprve formátovaný výsledek:

Měsíc	Výnosy		Náklady
	prodej zboží	služby	materiál	mzdy	ostatní
Leden	12 368	19 219	8 314	11 906	2 137

a jeho zdrojový kód:

<table border="1" rules="all">
<tr><th rowspan="2">Měsíc</th>
    <th colspan="2" align="center">Výnosy</th>
    <th colspan="3" align="center">Náklady</th>
</tr>
<tr><th>prodej zboží</th>
    <th>služby</th>
    <th>materiál</th>
    <th>mzdy</th>
    <th>ostatní</th>
</tr>
<tr align="right">
    <th align="left">Leden</th>
    <td>12 368</td><td>19 219</td>
    <td>8 314</td><td>11 906</td><td>2 137</td></tr>
</table>