Načrtovanje in razvoj spletnih aplikacij

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>
Mesec Prihranek
Januar 50 €

Vsi atributi s katerimi določamo lastnosti tabele, po HTML5 specifikaciji niso več podprti! Tako vse obrobe, širino in višino celic, vrstic in tabele, odmike vsebine od robov in barve določimo s CSS.

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>
Naslovna vrstica
1. celica 2. celica 3. celica

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>
1. celica, 1. vrstica 2. celica, 1. vrstica 3. celica, 1. vrstica
1. celica, 2. vrstica 2. celica, 2. vrstica 3. celica, 2. vrstica
1. celica, 3. vrstica 2. celica, 3. vrstica