1. Naslovnica
  2. HTML za početnike
  3. HTML tablice

HTML tablice : HTML Tables

Tablice u html-u omogućuju redanje podataka u stupce. Osnovni elementi koje koristimo za umetanje hml tablice na web stranicu su: table, th, tr i td.

HTML za početnike
krivulja

Tečaj - Uvod u HTML

Uvod u html

Image by rawpixel.com on Freepik

4.5

Zašto ne sada?

HTML za početnike

Naša preporuka

Cloudinary oglas

Besplatne usluge:

CDN pohrana slika i videa.

Pretvorba formata slika: webp...

Vrhunsko AI povećanje slika!

25Gb podataka.

4.5

Zašto ne sada?

HTML tablice : HTML tables

Tablice, redci i podatci : Tables, rows and data

Tablice u HTML-u omogućavaju redanje podataka u stupcima.

Napravimo odmah tablicu s dva retka i tri stupca.

html-tablice.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML tablice</title>
  </head>
  <body>
    <h1>HTML tablice</h1>
    <table border="1">
      <tr>
        <td>1.</td>
        <td>Ivan</td>
        <td>Horvatović</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>Josip</td>
        <td>Petrica</td>
      </tr>
    </table>
  </body>
</html>

Pogledajmo što ovaj primjer prikazuje u web pregledniku i što se nalazi u html kôdu.

Iza glavnog naslova <h1>...</h1>, započinjemo unos tablice s početnim elementom <table>. Elementom </table> završavamo unos tablice.

Ćelije u tablici su označene parom <td>...</td>. Oznaka td dolazi od engleskih riječi table data (podatak u tablici).

Ćelije unosimo u tablicu redak po redak. Oznake redaka su <tr>...</tr>. Kratica tr dolazi od engleskih riječi table row (redak u tablici).

Tablica je obrubljena rubom širine 1 piksela što smo odredili dodavanjem svojstva border="1" u html elementu <table>.

Web dizajn i stupci

Širina tablice i stupaca : Table and columns width

Vjerojatno ste primijetili kako svaki stupac zauzima samo onoliko širine koliko je potrebno kako bi svi podatci u ćelijama tog stupca bili vidljivi. Ukupna širina tablice je zbroj širina svih stupaca.

Pogledajmo sada primjer sa promjenjenim širinama stupaca i cijele tablice.

html-sirina-tablice.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <h1>HTML sirina tablice</h1>
  </head>
  <body>
    <h1>HTML tablice</h1>
    <table width="70%" border="1">
      <tr>
        <td width="10%">1.</td>
        <td width="55%">Ivan</td>
        <td width="35%">Horvatović</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>Josip</td>
        <td>Petrica</td>
      </tr>
    </table>
  </body>
</html>

Što se dogodilo? Širina tablice je postavljena na 70% širine prozora web preglednika. Prvi stupac zauzima 10% širine tablice (ne ukupne širine roditeljskog elementa, nego od onih 70% širine koje zauzima tablica), drugi 50%, a treći 40%.