Tabulkový masakr

Určitě znáte HTML a tím pádem znáte i tabulky. Pro jistotu připomenutí. Tabulka se v HTML tvoří párovým tagem <table></table>, její řádky jsou <tr></tr> a buňky <td></td>. Buňky mají volitelné atributy rowspan a colspan. Tyto atributy určují, kolik bude buňka zabírat místa v řádce, resp. ve sloupci. Tyto znalosti stačí k pochopení pojmu „tabulkový paradox“.

Podívejte se na první ukázku:

A1 A2 A3
B1
C1 C3
D1 D3

Zde je vidět co se stane, když roztáhneme buňku A2 na tři řádky a zároveň roztáhneme buňku B1 na tři sloupce podle následujícího kódu:

<table border="1" cellpadding="6" cellspacing="2" width="400">
    <tr>
        <td width="33%">A1</td>
        <td width="33%" rowspan="4">A2</td>
        <td width="33%">A3</td>
    </tr>
    <tr>
        <td colspan="3">B1</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>D1</td>
        <td>D3</td>
    </tr>
</table>

Tam kde by měla být buňka B2 vzniká krásné okénko do Narnie, které je společné jako pro druhý sloupec, tak pro druhý řádek.

Důsledkem neopatrného zacházení se spojováním sloupců může být výsledek viditelný ve druhé ukázce:

A1 A2 A3 A4
B1 B2 B3 B4
C1 C2 C3 C4
D1 D2 D3 D4

A1 A2 A3 A4
B1 B2 B3 B4
C1 C2 C3 C4
D1 D2 D3 D4

A1 A2 A3 A4
B1 B2 B3 B4
C1 C2 C3 C4
D1 D2 D3 D4

Za domácí úkol se pokuste napsat alespoň jednu podobnou tabulku bez nahlédnutí do zdrojového kódu… :-)

A poslední perlička vyvracející tvrzení, že párový element <tr></tr> vytváří v tabulce novou řádku. Podívejte se na následující kód. Hádám, že už je vám jasné co se stane.

<table border="1" cellpadding="6" cellspacing="2" width="400">
    <tr><td width="33%" rowspan="4">Řádka_1</td></tr>
    <tr><td width="33%" rowspan="3">Řádka_1</td></tr>
    <tr><td width="33%" rowspan="2">Řádka_1</td></tr>
    <tr><td width="33%" rowspan="1">Řádka_1</td></tr>
</table>

Výsledek je vidět ve třetí ukázce:

Řádka1
Řádka1
Řádka1
Řádka1

Vyzkoušejte, že se tabulkový paradox vykresluje ve všech prohlížečích stejně. Mám to tedy chápat tak, že tolik oblíbený Chrome je stejný shit jako IE? Kdepak… Jedná se opravdu o paradox, který by sice měl (prapodivné) řešení, ale pak by byl porušen význam některých atributů buňek tabulky.

  • V komentářích jsou povolené HTML tagy <a href=""> <blockquote> <code> <em> <strong>
  • Kódy programů zapisujte takto pomocí <pre><code>alert('XSS');</code></pre>