 |
| Ovaj je članak dio HIE-ina Uvodnog tečaja |
| Tečaj |
|
Naslovna stranica |
| Vidi |
Tablice na HIE možete napraviti na dva načina:
- koristeći posebne Wiki-šifre (preporučeni način, wiki markup je jako jednostavan)
- koristeći standardne HTML elemente: <table>, <tr>, <td> ili <th>...
Do tablice u 4 koraka
- Tablica počinje lijevom vitičastom zagradom i okomitom crtom "
{|" - Svako polje u tablici počinje okomitom crtom: "
|" - Redovi tablice odvajaju se okomitom crtom i crticom "
|-" - Tablica završava suprotnom kombinacijom od početne: "
|}"
Koraci 2 i 3 se ponavljaju koliko puta je potrebno.
Dodatni elementi
Iako se osnovna tablica može dobiti u 4 koraka, obično se u tablicu dodaju još neki elementi za prikazivanje i oblikovanje.
- Oblikovanje (kôd za formatiranje) čitave tablice navodi se u istom redu bez razdvajanja; na isti način, kod znaka za novi red oblikuje se samo taj red.
- Za naslov iznad tablice dodaje se odmah na početku red s okomitom crtom i znakom plus: "
|+" - Istaknuta polja (zaglavlja i sl.) započinju uskličnikom: "
!" - Ovisno o preglednosti, polja se mogu pisati na dva načina:
- ako se svako polje tablice piše na početku novog reda, tj. jedno polje=jedan red, u tom se slučaju samo na početku reda piše jedna okomita crta: "
|" (preporučeni način); - ako se sva polja pišu u jednom redu (zbog preglednosti kod uređivanja, kad su odgovarajuća polja iz dva reda jedno ispod drugog), onda se međusobno odvajaju dvjema okomitim crtama: "
||". Kod istaknutih polja umjesto okomite crte udvaja se uskličnik "!!".
- ako se svako polje tablice piše na početku novog reda, tj. jedno polje=jedan red, u tom se slučaju samo na početku reda piše jedna okomita crta: "
- Oblikovanje polja se stavlja ispred polja na koje se odnosi i odvaja se od polja samo jednom okomitom crtom
Ovo je primjer usporedbe osnovne i proširene tablice, koja se može dobiti navedenim kodom:
| Osnovna | Proširena | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
{| (oblikovanje) - početak tablice, sa ili bez oblikovanja
|+ Naslov tablice - naslov tablice
|- (oblikovanje) - novi red, može imati oblikovanje
| polje A - pisanje polja u novom redu
| (oblikovanje) | polje B - oblikovanje polja B
| polje C -
|- - novi red, može imati oblikovanje
| polje 1 ||(oblikovanje) | polje 2 || polje 3 - pisanje polja u jednom redu, s formatiranjem polja 2
|} - kraj tablice
U donjim primjerima detaljnije je obrađeno oblikovanje tablica.
Primjeri
Standardna tablica s okvirom i istaknutim retkom
Preporučuje se koristiti ovakvu tablicu, jer je grafički najbolje prilagođena izgledu HIE.
Upišite class="wikitable", a svako polje istaknutog retka započnite s "!" umjesto "|".
Istaknuti redak se koristi ako sadrži objašnjenja stupaca.
{| class="wikitable"
! Prvi red, prvi stupac
! Prvi red, drugi stupac
! Prvi red, treći stupac
|-
| Drugi red, prvi stupac
| Drugi red, drugi stupac
| Drugi red, treći stupac
|-
| Treći red, prvi stupac
| Treći red, drugi stupac
| Treći red, treći stupac
|}
Rezultat:
| Prvi red, prvi stupac | Prvi red, drugi stupac | Prvi red, treći stupac |
|---|---|---|
| Drugi red, prvi stupac | Drugi red, drugi stupac | Drugi red, treći stupac |
| Treći red, prvi stupac | Treći red, drugi stupac | Treći red, treći stupac |
Obična tablica s okvirom
Ovakva je tablica dosta neusklađena s izgledom HIE, ovdje je samo kao primjer.
{|border='1'
| Prvi red, prvi stupac
| Prvi red, drugi stupac
| Prvi red, treći stupac
|-
| Drugi red, prvi stupac
| Drugi red, drugi stupac
| Drugi red, treći stupac
|}
Rezultat:
| Prvi red, prvi stupac | Prvi red, drugi stupac | Prvi red, treći stupac |
| Drugi red, prvi stupac | Drugi red, drugi stupac | Drugi red, treći stupac |
Obična tablica bez okvira
Ne želite okvir oko polja i tablice? Uklonite border='1'
{|
| Prvi red, prvi stupac
| Prvi red, drugi stupac
| Prvi red, treći stupac
|-
| Drugi red, prvi stupac
| Drugi red, drugi stupac
| Drugi red, treći stupac
|}
Rezultat:
| Prvi red, prvi stupac | Prvi red, drugi stupac | Prvi red, treći stupac |
| Drugi red, prvi stupac | Drugi red, drugi stupac | Drugi red, treći stupac |
Prozirna tablica
Često želite tablicu koja nema nikakve rubove, ali je problem u tom što "obična tablica bez okvira" ima bijelu pozadinu. Na ovaj način možete kreirati tablicu s prozirnom pozadinom:
{| style="background:none;"
| Prvi red, prvi stupac
| Prvi red, drugi stupac
| Prvi red, treći stupac
|-
| Drugi red, prvi stupac
| Drugi red, drugi stupac
| Drugi red, treći stupac
|}
Rezultat:
| Prvi red, prvi stupac | Prvi red, drugi stupac | Prvi red, treći stupac |
| Drugi red, prvi stupac | Drugi red, drugi stupac | Drugi red, treći stupac |
Tablica s pozadinom druge boje
Želite da tablica ima sivu pozadinu i plava slova? Napišite style="background:silver; color:blue" odmah iza "{|" (tamo gdje je pisalo "border='1'").
{|style="background:silver; color:blue"
| Prvi red, prvi stupac
| Prvi red, drugi stupac
| Prvi red, treći stupac
|-
| Drugi red, prvi stupac
| Drugi red, drugi stupac
| Drugi red, treći stupac
|}
Rezultat:
| Prvi red, prvi stupac | Prvi red, drugi stupac | Prvi red, treći stupac |
| Drugi red, prvi stupac | Drugi red, drugi stupac | Drugi red, treći stupac |
Za one koji vole neobične tablice
| Polje 1 1x1 | Polje 2 1x1 | Polje 3 1x1 | Polje 4 1x1 |
| Polje 1 1x1 | Polje 2 2x1 | Polje 4 1x2 | |
| Polje 1 1x1 | Polje 2 1x1 | Polje 3 1x1 | |
Slijedi kôd koji je proizveo gornju tablicu:
{| class="wikitable"
| Polje 1 1x1
| Polje 2 1x1
| Polje 3 1x1
| Polje 4 1x1
|-
| Polje 1 1x1
| colspan="2" | Polje 2 2x1
| rowspan="2" | Polje 4 1x2
|-
| Polje 1 1x1
| Polje 2 1x1
| Polje 3 1x1
|}
Sortirajuće tablice
Pogledajte odgovarajuće izabrane savjete:
Ako ni ovo nije dovoljno
...da vaša tablica bude savršena, pogledajte i Pomoć na Zakladi Wikimediji
Za vodoravno ravnanje brojeva (i drugog sadržaja) po stupcima pogledajte ovaj savjet.
Napomena
Hrvatska internetska enciklopedija je enciklopedija, ne pretjerujte s tablicama!