HTML tablice : HTML Tables

HTML tablice - struktura

Tablice se koriste za prikazivanje podataka u stupcima.

Tablice se više ne koriste za izradu strukture web stranice jer je tu zadaću preuzeo css.

HTML tablica je upisana između početne i završne oznake <table> elementa. Tablica može imati željeni broj redaka a svaki redak upisujemo između početne i završne oznake <tr> elementa.

Svaki redak ima jednaki broj ćelija koje omeđujemo oznakom elementa <td>...</td>.

HTML tablice - osnovni elementi

Označavanje početka i kraja tablice: <table> ... </table>

Početak i kraj dijela gdje se nalazi zaglavlje stupaca: <thead> ... </thead>

Početak i kraj zaglavlja stupaca: <th> ... </th>

Početak i kraj tijela stranice unutar kojeg se nalazi podatci: <tbody> ... </tbody>

Početak i kraj retka tablice: <tr> ... </tr>

Početak i kraj ćelije s podatcima: <td> ... </td>

Primjer tablice u HTML-u:

<table>
  <thead>
    <tr>
      <th>Naziv 1 </th>
      <th>Naziv 2 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ćelija 1 u 1. retku </td>
      <td>Ćelija 2 u 1. retku </td>
    </tr>
    <tr>
      <td>Ćelija 3 u 2. retku </td>
      <td>Ćelija 4 u 2. retku </td>
    </tr>
  </tbody>
</table>

Izgled gornjeg primjera na web stranici:


Tablice i web dizajn!

Tablice - svojstva stupca:

Korištenjem praznog elementa <col /> moguće je postaviti svojstva za pojedini stupac tablice.

Ove elemente umećemo iza elementa <table> a prije elementa <thead>

Najkorisnija uloga <col /> elementa je postavljanje širine stupaca.

Gornji primjer možemo preinačiti korištenjem <col /> elementa:

<table style="width:80%; border:1px solid black;">
  <col style="width:40%;" />
  <col style="width:30%;" />
  <col style="width:30%;" />

  <thead>
    <tr>
      <th>Stupac 1 </th>
      <th>Stupac 2 </th>
      <th>Stupac 3 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ćelija 1 u 1. retku </td>
      <td>Ćelija 2 u 1. retku </td>
      <td>Ćelija 3 u 1. retku </td>
    </tr>
    <tr>
      <td>Ćelija 1 u 2. retku </td>
      <td>Ćelija 2 u 2. retku </td>
      <td>Ćelija 3 u 2. retku </td>
    </tr>
  </tbody>
</table>

Izgled ovog primjera na web stranici:


U gornjem primjeru ukupna širina tablice će biti 80% širine roditeljskog elementa i obrubljena je s zadanim obrubom (1px solid black).

Prvi stupac ima 40%, drugi stupac 30% a treći stupac 30% od ukupne širine tablice.

Svojstvo border elementa <table>

Želimo li prikazati rubove tablice koristimo svojstvo border i dodjeljujemo mu vrijednost debljine crte ruba tablice. Ako svojstvo border nije definirano rubovi tablice ne će biti prikazani.

Svojstvo širine tablice : width Attribute

Zadano tablica zauzima prostor koji je dostatan kako bi bio prikazan sadržaj svih stupaca tablice.

U slučaju da je širina sadržaja manja od roditeljskog elementa i želimo je povećati moramo koristiti svojstvo width.

Roditeljski element je element u kojem je definirana tablica, najčešće je to <body> element koji zauzima cijeli prozor web preglednika).

Svojstvo width može biti izraženo kao apsolutna vrijednost u pikselima ili kao relativna vrijednost u postotcima u odnosu na roditeljski element.

Svojstvo rowspan tablice : rowspan Attribute

Kada želimo protegnuti stupac kroz više redaka koristimo svojstvo rowspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj redaka kroz koja se proteže stupac.

Primjer stupca koji se proteže kroz 3 retka:

<table border="1">
<tr>
  <td rowspan="3" width="160">Prvi stupac</td>
  <td width="160">Prvi redak</td>
</tr>
<tr>
  <td>Drugi redak</td>
</tr>
<tr>
  <td>Treći redak</td>
</tr>
</table>

Izgled ovog primjera na web stranici:


Svojstvo colspan tablice : colspan Attribute

Kada želimo protegnuti redak kroz više stupaca koristimo svojstvo colspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj stupaca kroz koja se proteže redak.

Primjer retka koji se proteže kroz 3 stupca:

<table border="1">
<tr>
  <td colspan="3" width="320">Prvi redak</td>
</tr>
<tr>
  <td>Prvi stupac</td>
  <td>Drugi stupac</td>
  <td>Treći stupac</td>
</tr>
</table>

Izgled ovog primjera na web stranici:


Prazna ćelija : Empty cell

Ćelije bez sadržaja mogu biti netočno prikazane u nekim web preglednicima. Kako bi to izbjegli potrebno je umetnuti jedan prazan znak (engl. non-break spacing): &nbsp; unutar prazne ćelije.