Tablice

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.

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 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!

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:

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.

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

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.

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.

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>.

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>

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.