Načrtovanje in razvoj spletnih aplikacij

Kompleksnejše HTML tabele

Tabelam poleg osnovnih elementov dodamo lahko še opis caption, ki se prikaže nad tabelo sredinsko poravnan čez širino celotne tabele. Za opisom lahko z elementi col (angl. column) in colgroup (ang. column group) določimo lastnosti stolpcev. Pri zahtevnejših tabelah lahko vrstice združimo v skupine glava, telo in noga, ki jih opišemo z elementi thead, tbody in tfoot. Glavo tabele sestavljajo vrstice, ki se pri izpisu ponovijo na vrhu vsake strani, nogo tabele pa vrstice, ki se ponovijo na dnu vsake strani. Tabela ima lahko več teles.

<table border="1">
  <caption> <em>Rezultati izpita</em> </caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <colgroup span="4"></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>  
  <thead >
    <tr>
      <th colspan="3"> Dijak </th>
      <th colspan="4"> Test </th>
      <th rowspan="2"> Točke </th>
      <th rowspan="2"> Ocena </th>
    </tr>
    <tr>
      <th> EMŠO </th><th> Priimek </th><th> Ime </th>
      <th> 1. </th><th> 2. </th><th> 3. </th><th> 4. </th>
    </tr>
  </thead> 
  <tbody>
    <tr>
      <td> 0712998500123 </td><td> Novak </td><td> Janez </td>
      <td> 56 </td><td> 73 </td><td> 49 </td><td> 82 </td>
      <td> 260 </td><td> <b>3</b> </td>
    </tr>
    <tr>
      <td> 1206999505354 </td><td> Petrnel </td><td> Maja </td>
      <td> 83 </td><td> 95 </td><td> 92 </td><td> 87</td>
      <td> 357 </td><td> <b>4</b> </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td> </td><td> </td><td> Max. </td>
      <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td>
      <td> 400 </td><td> <b>5</b> </td>
    </tr>
  </tfoot>
</table>
Rezultati izpita
Dijak Test Točke Ocena
EMŠO Priimek Ime 1. 2. 3. 4.
Max. 100 100 100 100 400 5
0712998500123 Novak Janez 56 73 49 82 260 3
1206999505354 Petrnel Maja 83 95 92 87 357 4