Stejně široké sloupečky

Pokud v nějaké tabulce potřebujeme z estetických důvodů stejně široké sloupce, můžeme s výhodou použít atribut width jako v naší ukázce:

<table border="1">
<tr align="center">
  <th rowspan="2">Tab. 1</th>
  <td><var>x</var></td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
</tr>
<tr align="center">
  <td><var>x<sup>3</sup></var></td>
  <td width="30">1</td>
  <td width="30">8</td>
  <td width="30">27</td>
  <td width="30">64</td>
  <td width="30">125</td>
  <td width="30">216</td>
  <td width="30">343</td>
  <td width="30">512</td>
  <td width="30">729</td>
  <td width="30">1000</td>
</tr>
</table>

Pokud si chceme ušetřit práci a oželíme stejnou šířku sloupců ve starších prohlížečích, můžeme šířku nastavit pro všechny sloupce společně pomocí elementu colgroup:

<table border="1">
<colgroup span="2" align="center">
<colgroup span="10" width="30" align="center">
<tr>
  <th rowspan="2">Tab. 1</th>
  <td><var>x</var></td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
</tr>
<tr>
  <td><var>x<sup>3</sup></var></td>
  <td>1</td>
  <td>8</td>
  <td>27</td>
  <td>64</td>
  <td>125</td>
  <td>216</td>
  <td>343</td>
  <td>512</td>
  <td>729</td>
  <td>1000</td>
</tr>
</table>

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus