HTML prvi koraci - lekcija 5 - Tabele

26/05/2025, by Ivan

Jedan od važnih načina čuvanja informacija su tabele. U tabelama se čuvaju podaci u Excelu, Accessu i drugim bazama podataka. Tabele vrlo jasno predstavljaju podatke, na osnovu njih je lako praviti grafikone i dijagrame.
U ovoj lekciji ćemo naučiti kako praviti tabele u HTML-u. Za to ćemo koristiti tagove <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>.

Tag table

TABLE je glavni tag tabele, u njega se smeštaju ostali tagovi tabele.

<table>
</table>

Svi ostali tagovi idu unutar ovog taga.

Tag tr

TR je tag reda, svaki red se piše u paru tagova <tr></tr>. Ako želimo tri reda u tabeli, biće tri para tagova:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Tag td

TD je tag ćelije, svaka ćelija treba da bude unutar reda. Da tabela bude ispravno prikazana, broj ćelija u svakom redu treba da bude isti. Napravićemo tabelu sa četiri ćelije po redu:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Sada ćemo popuniti tabelu podacima:

<table>
  <tr>
    <td>Broj</td>
    <td>Prezime</td>
    <td>Ime</td>
    <td>Srednje ime</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Ivanov</td>
    <td>Ivan</td>
    <td>Ivanović</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Petrov</td>
    <td>Petar</td>
    <td>Petrović</td>
  </tr>
</table>

Sada možemo tabelu logički organizovati tako što ćemo je podeliti na tri dela: thead - zaglavlje, tbody - telo tabele, tfoot - podnožje tabele.

Tag tbody

TBODY nije obavezan, ali se koristi da označi glavni deo tabele.

<table>
  <tbody>
    <tr>
      <td>Broj</td>
      <td>Prezime</td>
      <td>Ime</td>
      <td>Srednje ime</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanović</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petar</td>
      <td>Petrović</td>
    </tr>
  </tbody>
</table>

Tag thead

THEAD se koristi za kreiranje zaglavlja tabele, stavimo prvi red u thead.

<table>
  <thead>
    <tr>
      <td>Broj</td>
      <td>Prezime</td>
      <td>Ime</td>
      <td>Srednje ime</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanović</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petar</td>
      <td>Petrović</td>
    </tr>
  </tbody>
</table>

Sada ćemo umesto ćelija td koristiti ćelije th da označimo nazive kolona:

<table>
  <thead>
    <tr>
      <th>Broj</th>
      <th>Prezime</th>
      <th>Ime</th>
      <th>Srednje ime</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanović</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petar</td>
      <td>Petrović</td>
    </tr>
  </tbody>
</table>

Ako imate dobar pregledač, nazivi kolona će biti podebljani. Ostaje nam još tag tfoot za podnožje tabele.

Tag tfoot

TFOOT definiše donji deo tabele.

<table>
  <thead>
    <tr>
      <th>Broj</th>
      <th>Prezime</th>
      <th>Ime</th>
      <th>Srednje ime</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanović</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petar</td>
      <td>Petrović</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Kreiranje tabele 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Atribut colspan

Jedan od važnih atributa taga td je colspan, koji omogućava spajanje ćelija. Pogledajmo podnožje tabele. Imamo četiri ćelije, ali je samo jedna popunjena, pa možemo spojiti te četiri ćelije. Koristićemo atribut colspan.

<table>
  <thead>
    <tr>
      <th>Broj</th>
      <th>Prezime</th>
      <th>Ime</th>
      <th>Srednje ime</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanović</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petar</td>
      <td>Petrović</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Kreiranje tabele 2012</td>
    </tr>
  </tfoot>
</table>

Sada imamo jednu veliku ćeliju širine četiri ćelije. Vrednost atributa colspan je broj spojenih ćelija.

Dodatni tipovi blokova (EBT) - Novo iskustvo rada sa Layout Builder-om❗

❗Dodatni tipovi pasusa (EPT) – Novo iskustvo rada sa pasusima