HTML tablice : HTML tables


Tablice, redci i podatci : Tables, rows and data

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

Napravimo odmah tablicu s dva retka i tri stupca.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </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 početnim elementom <table>. Elementom </table> završavamo unos tablice.

Ćelije u tablici su označene parom <td>...</td>. Kratica 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 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 promijenjenim širinama stupaca i cijele tablice.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </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 tablice nego do onih 70%), drugi 50% a treći 40%.