Print bookPrint book

Tablice

Kako postaviti tablicu i koje joj atribute možemo postaviti. Posebno, koje atribute možemo postaviti pojedinim ćelijama.

Site: Nacionalni portal za učenje na daljinu "Nikola Tesla"
Course: Osnove HTML-a
Book: Tablice
Printed by: Guest user
Date: Saturday, 21 September 2019, 10:47 AM

O ovom poglavlju




Nakon upoznavanja s prethodnim poglavljima ovog tečaja na vašim se stranicama elementi nižu redom, jedan ispod drugog, a sadržaj se unutar svakog elementa prostire slijeva nadesno, sve do ruba prozora nakon čega prelaze u sljedeći red. Vrijeme je da upoznate tablice!

Ishodi učenja

Nakon ovog ćete poglavlja moći:

  • postaviti tablicu sa željenim brojem redaka i stupaca te je popuniti podacima
  • neke ćelije tablice, obično ćelije prvog retka i(li) prvog stupca, proglasiti zaglavljem i istaknuti ih u odnosu na ostale ćelije
  • spojiti nekoliko ćelija jednog retka, odnosno jednog stupca
  • namjestiti debljinu ruba tablice, odnosno ćelija
  • namjestiti razmak među ćelijama
  • namjestiti odmak sadržaja ćelije od njezinog ruba
  • poravnati sadržaj ćelije vodoravno, odnosno vertikalno
  • namjestiti širinu tablice.

Aktivnosti u ovom poglavlju

U ovom ćete poglavlju prvo pročitati kako se postavlja tablica, a nakon toga ćete sastaviti svoju prvu jednostavnu tablicu.

Slijedi čitanje poglavlja o atributima te još jedna vježba ‑ uljepšavanje napisane tablice.

CARNet - puni naziv i logo

Tablice

     

Primarna namjena tablica je svrstavanje podataka u stupce i retke. Programi manifestacija, nazočnost na predavanjima, kalendari – sve su to primjeri tablica u kojima možemo imenovati stupce i retke. Tako u programu neke manifestacije u svakom retku može biti jedan termin, u svakom stupcu jedna pozornica, a u svakoj ćeliji zbivanje u određenom terminu i na određenoj pozornici.

primjer tablice
Primjer tablice s jasnim sadržajem stupaca i redaka.

Iako su tablice namijenjene za situacije u kojima možemo imenovati svaki redak i svaki stupac, one se upotrebljavaju i u druge svrhe. Još je uvijek jedan od najjednostavnijih načina raspoređivanja sadržaja na stranicama pomoću tablica. Iako ta metoda ima svojih nedostataka, zbog svoje jednostavnosti i manje potrebe za poznavanjem CSS-a (stilova), tablice ćete naći na mnogim stranicama, i to ne samo početničkima.

Ljepota tablica je i u tome što zapravo uopće ne moraju biti vidljive – dovoljno je vrijednosti debljina rubova tablice staviti na „0”. I tako, pametnim rasporedom ćelija tablice, možemo svoje tekstove, slike, navigaciju i sve ostalo što čini našu stranicu, rasporediti tako da budu uredno poravnati..

Sada se možda pitate koji je drugi način raspoređivanja sadržaja na stranicama i zašto taj način zahtijeva poznavanje stilova. Odgovor su se krije u uvođenju potpuno novih HTML elemenata, div, koji mogu potpuno slobodno plutati po stranici, pa ih je teže ukrotiti nego tablice. Upoznajmo zato prvo tablice!

CARNet - puni naziv i logo

Izrada tablice

Svaku tablicu definiraju najmanje tri HTML oznake, od kojih svaka ima svoj početni i završni dio. To su redom: <table>, oznaka koja označava početak i kraj tablice, <tr> koja označava redak tablice (engl. table row), i <td>, oznaka za ćeliju unutar retka (engl. table data).

U skladu s time, minimalna tablica izgleda ovako:

<table border="1">
<tr>
<td>Ovo je sadržaj ćelije</td>
</tr>
</table>

primjer 26

U ovom primjeru definirali smo debljinu rubova tablice atributom border, jer u protivnome tablica ne bi bila vidljiva i naš bi tekst izgledao kao da tablice uopće nema.

U novom dokumentu definirajte tablicu nalik tablici iz primjera. Dokument spremite pod imenom tablice.htm te pogledajte stranicu u web pregledniku.

Promijenite sad vrijednost atributa border tako da ga postavite na 0 ili ga u potpunosti uklonite. Usporedite rezultat s prethodnim.

U datoteci zadaci.htm, u kojem imate linkove na sve datoteke s vježbama, stvorite vezu na tablice.htm.

Tablica, naravno, može sadržavati i više redaka te u svakom retku više ćelija:

<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>

primjer 27

Spajanje ćelija

Ponekad ćemo htjeti da se ćelije protežu kroz nekoliko stupaca (engl. column). Tada ćemo odabranoj ćeliji dodati atribut colspan i definirati broj stupaca kroz koji se ona proteže.

<table border="1">
<tr>
<td colspan="2">1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td><td>5</td>
</tr>
</table>

primjer 28

Poželimo li definirati raspon ćelije kroz nekoliko redaka (engl. row), odabranoj ćemo ćeliji dodati atribut rowspan i definirati kroz koliko redaka se ona proteže.

<table border="1">
<tr>
<td>1</td><td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td><td>5</td>
</tr>
</table>

primjer 29

Zaglavlje tablice

Koristimo li umjesto oznake <td> znaku <th> definirat ćemo zaglavlje tablice, a tekst napisan u zaglavlju prikazuje se kao podebljan. Ova oznaka ima i svoj završni dio – </th>.

U dokumentu tablice.htm sastavite dolje prikazanu tablicu. Zaglavlje definirajte oznakom <th>.

UPUTA:

Tablica bi trebala imati tri stupca i četiri retka. Ćelija na početku prvog reda će se prostirati kroz dva stupca, a druga ćelija u trećem retku kroz dva retka.

CARNet - puni naziv i logo

Oblikovanje tablice

     

Budući da se tablica sastoji od tri vrste elemenata od kojih je svaki od njih podređen onom iznad, njezin izgled možemo definirati na tri različite razine. Tako ćemo određenim atributima postići različit učinak ovisno o tome hoćemo li ih dodati oznaci tablice, retka ili ćelije.

Oblikovanje na razini tablice

Na razini tablice određuju se parametri koji vrijede za tablicu, odnosno za sve ćelije.

border

Određuje debljinu vanjskog ruba tablice u pikselima. Stavimo li vrijednost atributa na „0”, rub tablice neće biti vidljiv.

cellpadding

Udaljenost sadržaja ćelija od ruba ćelije iskazana u pikselima.

cellpadding="10"

cellspacing

Udaljenost između ćelija iskazana u pikselima.

cellspacing="5"

width

Širina. Vrijednost atributa može biti iskazana u pikselima ili u postocima širine stranice ili drugog elementa unutar kojeg se tablica nalazi.

<table border="1" width="200"
 cellspacing="5" cellpadding="3">
<tr>
   <td>Ovo je sadržaj ćelije</td>
</tr>
</table>

primjer 33

Oblikovanje na razini ćelije

Oblikovanje na razini ćelije primjenjuje se jednako na ćelije s podacima, td, kao i na ćelije zaglavlja, th. Isti se atributi mogu primijeniti i na cijeli redak tablice, dakle oznaku tr.

align

Definira horizontalno poravnavanje elemenata unutar ćelija. Može poprimiti vrijednosti left, center, right i justify.

valign

Definira vertikalno poravnavanje elemenata unutar ćelija. Može poprimiti vrijednosti top, middle i bottom.

Izmijenite tablicu iz prethodne vježbe tako da širinu tablice postavite na 50% širine stranice.

Elemente u prvom retku centrirajte vodoravno. Razmak od sadržaja do ruba ćelija (cellpadding) namjestite na 10 piksela, a razmak između ćelija postavite na 0 piksela.

Pazite u koju oznaku stavljate koji atribut!

CARNet - puni naziv i logo