Tabulky

Tabulky jsou mocný nástroj (i když existují ještě mocnější, ale už ne v HTML). Dlouhou dobu byly jedinou možností, jak uspořádat stránku k obrazu svému. Což s sebou pochopitelně neslo hodně zauzlovaný kód a jeho téměř dokonalé znepřístupnění třebas nevidícím. Proto se snažte používat tabulky skutečně pouze pro tabulární data!

Centrování tabulek v následujících příkladech ve vodorovném směru je zajištěno CSS pravidlem: 
table {
  margin-left: auto;
  margin-right: auto;
}
To je univerzální způsob centrování blokových elementů podle standardu CSS. V IE má ovšem své mouchy...


Základní vykreslení (renderování)

<table border="1">
  <tr>
    <td>řádka 1 / buňka 1</td>
    <td>řádka 1 / buňka 2</td>
  </tr>
  <tr>
    <td>řádka 2 / buňka 1</td>
    <td>řádka 2 / buňka 2</td>
  </tr>
</table>
řádka 1 / buňka 1 řádka 1 / buňka 2
řádka 2 / buňka 1 řádka 2 / buňka 2


Nadpisy řádků/sloupečků

V základním nastavení jsou nadpisy vysázeny tučně a vycentrovány.

<table border="1">
  <tr>
    <th/>
    <th>sloupec 1</th>
    <th>sloupec 2</th>
  </tr>
  <tr>
    <th>řádka 1</th>
    <td>řádka 1 / buňka 1</td>
    <td>řádka 1 / buňka 2</td>
  </tr>
  <tr>
    <th>řádka 2</th>
    <td>řádka 2 / buňka 1</td>
    <td>řádka 2 / buňka 2</td>
  </tr>
</table>
sloupec 1 sloupec 2
řádka 1 řádka 1 / buňka 1 řádka 1 / buňka 2
řádka 2 řádka 2 / buňka 1 řádka 2 / buňka 2


Spojování buněk I. (v řádce)

<table border="1">
  <tr>
    <td>řádka 1 / buňka 1</td>
    <td colspan="2">řádka 1 / buňka 2+3</td>
  </tr>
  <tr>
    <td>řádka 2 / buňka 1</td>
    <td>řádka 2 / buňka 2</td>
    <td>řádka 2 / buňka 3</td>
  </tr>
  <tr>
    <td colspan="2">řádka 3 / buňka 1+2</td>
    <td>řádka 3 / buňka 3</td>
  </tr>
</table>
řádka 1 / buňka 1 řádka 1 / buňka 2+3
řádka 2 / buňka 1 řádka 2 / buňka 2 řádka 2 / buňka 3
řádka 3 / buňka 1+2 řádka 3 / buňka 3


Spojování buněk II. (ve sloupečku)

<table border="1">
  <tr>
    <td>řádka 1 / buňka 1</td>
    <td>řádka 1 / buňka 2</td>
    <td>řádka 1 / buňka 3</td>
  </tr>
  <tr>
    <td>řádka 2 / buňka 1</td>
    <td rowspan="2">řádka 2+3 / buňka 2</td>
    <td>řádka 2 / buňka 3</td>
  </tr>
  <tr>
    <td>řádka 3 / buňka 1</td>
    <td>řádka 3 / buňka 3</td>
  </tr>
</table>
řádka 1 / buňka 1 řádka 1 / buňka 2 řádka 1 / buňka 3
řádka 2 / buňka 1 řádka 2+3 / buňka 2 řádka 2 / buňka 3
řádka 3 / buňka 1 řádka 3 / buňka 3


Spojování buněk III. (ve sloupečku složitější)

<table border="1">
  <tr>
    <td>řádka 1 / buňka 1</td>
    <td>řádka 1 / buňka 2</td>
    <td rowspan="2">řádka 1+2 / buňka 3</td>
  </tr>
  <tr>
    <td>řádka 2 / buňka 1</td>
    <td rowspan="2">řádka 2+3 / buňka 2</td>
  </tr>
  <tr>
    <td>řádka 3 / buňka 1</td>
    <td>řádka 3 / buňka 3</td>
  </tr>
</table>
řádka 1 / buňka 1 řádka 1 / buňka 2 řádka 1+2 / buňka 3
řádka 2 / buňka 1 řádka 2+3 / buňka 2
řádka 3 / buňka 1 řádka 3 / buňka 3


Spojování buněk IV. (obojí)

<table border="1" cellpadding="5">
  <tr>
    <td>řádka 1 / buňka 1</td>
    <td>řádka 1 / buňka 2</td>
    <td>řádka 1 / buňka 3</td>
  </tr>
  <tr>
    <td>řádka 2 / buňka 1</td>
    <td colspan="2" rowspan="2">řádka 2+3 / buňka 2+3</td>
  </tr>
  <tr>
    <td>řádka 3 / buňka 1</td>
  </tr>
</table>
řádka 1 / buňka 1 řádka 1 / buňka 2 řádka 1 / buňka 3
řádka 2 / buňka 1 řádka 2+3 / buňka 2+3
řádka 3 / buňka 1


Další techniky (atributy frame a rules)

<table border="1" frame="void" rules="all">
  <tr>
    <td>řádka 1 / buňka 1</td>
    <td>řádka 1 / buňka 2</td>
    <td>řádka 1 / buňka 3</td>
  </tr>
  <tr>
    <td>řádka 2 / buňka 1</td>
    <td>řádka 2 / buňka 2</td>
    <td>řádka 2 / buňka 3</td>
  </tr>
  <tr>
    <td>řádka 3 / buňka 1</td>
    <td>řádka 3 / buňka 2</td>
    <td>řádka 3 / buňka 3</td>
  </tr>
</table>
řádka 1 / buňka 1 řádka 1 / buňka 2 řádka 1 / buňka 3
řádka 2 / buňka 1 řádka 2 / buňka 2 řádka 2 / buňka 3
řádka 3 / buňka 1 řádka 3 / buňka 2 řádka 3 / buňka 3