HTML tablice

Tablice nam služe za razne potrebe na stranici, prvenstveno za prikaz nekih podataka u tabličnom obliku, ali se ponekad koriste i dizajn. Recimo da želimo imati web stranicu gdje je na lijevom dijelu izbornik, na desnom sadržaj to možemo napraviti uz pomoć tablice.

Primjer:

<table style="width:100%;">
     <tr>
          <td style="width:150px; background-color:#DEDEDE;" valign="top">
               OVO JE MENI
          </td>
          <td valign="top" style="background-color:#006699; color: #FFFFFF;">
               OVO JE SADRŽAJ
          </td>
     </tr>
</table>

U ovom primjeru smo napravili tablicu širine 100% (znači preko širine cijele stranice). Ispod imamo <tr> tag koji označava red (Table Row). I unutar <tr> imamo dva <td> taga koji označavaju stupac (Table Data). Svaki <td> ima atribut valign koji određuju kako će se tekst u stupcu prikazati u odnosu na vertikalu:

  • top - na vrhu stupca
  • middle - u sredini stupca (to je default vrijednost)
  • bottom - pri dnu stupca

Ovo je rezultat gornjeg koda:

OVO JE MENI OVO JE SADRŽAJ