Tabele v HTML

S HTML tabelami v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic.

Tabelo opišemo z elementom <table>. Tabela je razdelejna v vrstice, ki jih opišemo z elementi <tr> (angl. Table Row). Vrstice so sestavljene iz navadnih celic, ki jih opišemo z elementom <td> (angl. Table Data) ali pa iz naslovnih celic, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu, opišemo pa jih z elementom <th> (angl. Table Heading).

Primer tabele z dvema vrsticama in dvema stolpcema. Prva vrstica ima naslovne celice, druga pa običajne:

<table>
  <tr>
    <th>Mesec</th>
    <th>Prihranek</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>50 &euro;</td>
  </tr>
</table>

Združevanje celic HTML tabele

Več sosednjih celic lahko združimo v večjo celico, pri tem pa se nova celica lahko razteza čez več vrstic ali stolpcev.

Celici z lastnostjo colspan določimo, čez koliko stolpcev naj sega , pri tem pa moramo v tisti vrstici ustrezno zmanjšati število celic.

Z lastnostjo rowspan določimo, čez koliko vrstic naj sega, v tem primeru pa moramo paziti, da v naslednjih vrsticah zmanjšamo število celic. Pri naštevanju celic v vrstici preskočimo stolpec, ki ga zaseda celica iz prejšnje vrstice.

Primer združevanja celic v stolpcih:

<table border="1">
  <tr>
    <th colspan="3">Naslovna vrstica </th>
  </tr>
  <tr>
    <td>1. celica</td>
    <td>2. celica</td>
    <td>3. celica</td>
  </tr>
</table>

Primer združevanja celic v vrsticah:

<table border="1">
  <tr>
    <td>1. celica, 1. vrstica</td>
    <td>2. celica, 1. vrstica</td>
    <td>3. celica, 1. vrstica</td>
  </tr>
  <tr>
    <td rowspan="2">1. celica, 2. vrstica</td>
    <td>2. celica, 2. vrstica</td>
    <td>3. celica, 2. vrstica</td>
  </tr>
  <tr>
    <td>1. celica, 3. vrstica</td>
    <td>2. celica, 3. vrstica</td>
  </tr>
</table>