Ohje:Taulukot

Wikipediassa voi kirjoittaa HTML- ja XML-tauluja, mutta sitä ei suositella. Käytä mieluimmin wiki-formaattia, jota kutsutaan myös nimellä putkimuoto (engl. pipe-format). Wikitaulu on helppo kirjoittaa, mutta mutkikkaita tauluja on silläkin vaikea luoda.

Taulukoita voi muokata ja tehdä myös visuaalisella muokkaimella, jolloin muokkaajan ei tarvitse ymmärtää taulukon koodia.

Mikä on taulukko

Taulukko on riveistä ja sarakkeista koostuva kokonaisuus. Rivin ja sarakkeen risteyskohdassa on solu. Monesti taulukossa on myös otsikko ja sarakkeiden otsikot. Usein monta solua on yhdistetty joko vaaka- tai pystysuunnassa.

Wikitaulu-muoto

Wikitauluissa käytetään niin sanottua putkisyntaksia (engl. pipe syntax)

Taulu alkaa merkeillä: {| taulun lisämääreet, jossa lisämääreet on normaalisti class="wikitable"
Taulu loppuu riviin: |}
Taulun otsikko on |+ otsikko mikä kirjoitetaan seuraavalle riville taulukon alkumerkin {| jälkeen.
Taulukon rivi alkaa uudelta riviltä merkillä |- rivin lisämääreet.
Rivin solut merkitään seuraaville riveille putkimerkillä |.
Useamman solun voi kirjoittaa samalle riville käyttämällä solujen välissä tuplaputkea ||
Solut voivat tekstin lisäksi sisältää myös määritteitä. Määritteen ja solun sisällön välissä on aina yksinkertainen putkimerkki |

| Solun sisältö tai | solun määritteet | Solun sisältö
| 1. solu || 2. solu tai | 1. solun määritteet | 1. solun sisältö || 2. solun määritteet | 2. solun sisältö
| 1. solu || 2. solun määritteet | 2. solun sisältö || 3. solu || 4. solu

Jos solu on otsake, niin solu aloitetaan huutomerkillä !. Jos otsikkosoluja halutaan kirjoittaa samalle riville käytetään solujen erottimena tuplahuutomerkkiä !!, mutta määritteen ja sisällön erottimena kuitenkin putkea.

! Solun sisältö tai ! solun määritteet | Solun sisältö
! 1. solu !! 2. solu tai ! 1. solun määritteet | 1. solun sisältö !! 2. solun määritteet | 2. solun sisältö
! 1. solu !! 2. solun määritteet| 2. solun sisältö !! 3. solu !! 4. solu

Määritteet ovat normaalia HTML-koodia, esimerkiksi color="#FFFFFF"

Toisinaan voi olla selkeintä kirjoittaa jokainen solu omalle rivilleen.

Taulukon tyyli määritellään kuin HTML:n tyylitagissa (style sheet).

Yksinkertainen esimerkkitaulukko

Solut voidaan luetella allekkain tai samalla rivillä, jolloin niiden väliin laitetaan kaksi pystyviivaa:
{| class="wikitable"
|-
| Solu 1, rivi 1 
| Solu 2, rivi 1 
|- 
| Solu 1, rivi 2 
| Solu 2, rivi 2 
|}
{| class="wikitable"
|-
| Solu 1, rivi 1 || Solu 2, rivi 1 
|- 
| Solu 1, rivi 2 || Solu 2, rivi 2 
|}
Koodin tulostama taulukko molemmilla tavoilla:

Solu 1, rivi 1 Solu 2, rivi 1

Solu 1, rivi 2 Solu 2, rivi 2

Taulukon yksinkertainen perusrakenne

{| class="wikitable"
|+ Otsikko
! Sarakkeen 1 otsake
! Sarakkeen 2 otsake
|-
| Solu 1, rivi 1 || Solu 2, rivi 1
|- 
| Solu 1, rivi 2 || Solu 2, rivi 2
|}
Koodin tulostama taulukko:

Otsikko
Sarakkeen 1 otsake Sarakkeen 2 otsake

Solu 1, rivi 1 Solu 2, rivi 1

Solu 1, rivi 2 Solu 2, rivi 2

Kertotauluesimerkki

<!-- taulukon määritteet: luokka wikitable ja tekstin tasaus keskelle eli text align:center -->
{| class="wikitable" style="text-align:center"
|+Kertotaulu
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Koodin tulostama taulukko:

Kertotaulu
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

Väri, määritteen ulottuvuus

Solun määrite on solun ominaisuus, esimerkiksi yksittäisen solun väri. Wikissä voidaan väri ulottaa koko tauluun, yksittäiseen riviin tai yksittäiseen soluun. Väreistä käytetään englanninkielisiä nimiä red, green, yellow ja niin edelleen, tai heksadesimaalikoodeja, jotka ovat muotoa #000000 (musta, black). Heksadesimaaliväri esitetään RGB-muodossa (red, green, blue eli punainen, vihreä ja sininen). RGB-merkintä menee #RRGGBB, jossa RR on värin punainen osa, GG vihreä ja BB sininen osa. 00 ei väriä, FF täysi väriannos. Heksadesimaaliluvut eli 16-järjestelmän luvut ovat 0–9, A–F.

Esimerkiksi kirkkaan punainen on #FF0000, himmeämmän punainen #7F0000. Keltainen on #FFFF00, koska keltaisessa on punaista ja vihreää. Katso luettelo väreistä.

{| 
| bgcolor=red | <span style="color:white"> abc </span>
| def
<!-- punainen taustaväri ulottuu yhteen soluun-->
| style="background:red; color:white"| ghi
| jkl
|}

Koodin tulostama taulukko:

abc

def

ghi

jkl

<syntaxhighlight lang="wikitext">
<!-- taustaväri keltainen (yellow) ulottuu koko riville, samoin kuin tekstin vihreä (green) -->
{| style="background:yellow; color:green"
|- 
| abc
| def
| ghi
|- style="background:red; color:white" <!-- ulottuu koko riville -->
| jkl
| mno
| pqr
|-
| stu
| style="background:silver"| vwx
| yz
|}

Koodin tulostama taulukko:

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

HTML 4.01 määrittää 16 esimääriteltyä väriä, joiden heksadesimaalitunnukset ovat:

black #000000 silver #c0c0c0 maroon #800000 red #ff0000

navy #000080 blue #0000ff purple #800080 fuchsia #ff00ff

green #008000 lime #00ff00 olive #808000 yellow #ffff00

teal #008080 aqua #00ffff gray #808080 white #ffffff

Monen määritteen asettaminen

Sarakkeen leveys ja taustaväri asetetaan yhtä aikaa rivin toiselle solulle

{|
|-
| bgcolor=red| Solu 1 || width=150px bgcolor=blue| Solu 2 || bgcolor=green| Solu 3
|}

Koodin tulostama taulukko:

Solu 1

Solu 2

Solu 3

Leveys ja korkeus

Koko taulukon ja rivin sekä taulukon solujen leveyttä ja korkeutta (width, height) voi säädellä.

{| style="width:75%; height:200px" border="1"
|- 
| abc
| def
| ghi
|- style="height:100px" 
| jkl
| style="width:50px"| mno
| pqr
|-
| stu
| vwx
| yz
|}

Koodin tulostama taulukko:

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Yksittäisten rivien ja sarakkeiden leventäminen toisten solujen alueelle

Wikitaulussa käytetään samaan tapaan kuin HTML:ssä solujen yhdistämiseen. Esimerkiksi colspan=2 leventää taulukon solua kahden sarakkeen alueelle, ja rowspan=3 pidentää solua kolmen rivin alueelle. Colspanin ja rowspanin käyttö vaatii taitoa.

Colspan (sarakkeiden ulottaminen toisiin soluihin)

{| border=1
| Sarake 1, rivi 1 
| rowspan=2| Sarake 2, rivi 1 (ja myös 2) 
| Sarake 3, rivi 1 
|- 
| Sarake 1, rivi 2 
| Sarake 3, rivi 2 
|}
Koodin tulostama taulukko:

Sarake 1, rivi 1 Sarake 2, rivi 1 (ja myös 2) Sarake 3, rivi 1

Sarake 1, rivi 2 Sarake 3, rivi 2

Suurempi esimerkki

{| border="1" cellpadding="5" cellspacing="0"
|-
! Otsake 1 || Otsake 2 || Otsake 3
|-
| rowspan=2| A
| colspan=2 align="center"| B
|-
| C
| D
|-
| E
| colspan=2 align="center"| F
|- 
| rowspan=3| G
| H
| I
|- 
| J
| K
|-
| colspan=2 align="center"| L
|}

Koodin tulostama taulukko:

Otsake 1	Otsake 2	Otsake 3
A	B
A	C	D
E	F
G	H	I
	J	K
	L

Solujen tekstin muotoilu

Solun sisällä olevan tekstin keskittäminen käy seuraavalla tavalla Wikipediassa:
<div class="center">Solu</div>
Se käy pipe-syntaksissa helpommin näin:
center| Solu

Huomaa, että suositeltavinta on käyttää tyyliasetusta rivillä tai koko taulukkoon sen sijaan että sitä toistetaan taulukon soluissa.

Wikitaulukoodi

{| cellpadding=0 cellspacing=0
| align=right| 432 || .1
|-
| align=right| 43 || .21
|-
| align=right| 4 || .321
|}

Koodin tulostama taulukko:

432	.1
43	.21
4	.321

{| border=1 cellpadding=4 cellspacing=2 width=72
|
{|cellpadding=0 cellspacing=0 width="100%"
| align=right width="50%"| 432 || width="50%"| .1
|}
|-
|
{| cellpadding=0 cellspacing=0 width="100%"
| align=right width="50%"| 43 || width="50%"| .21
|}
|-
|
{| cellpadding=0 cellspacing=0 width="100%"
| align=right width="50%"| 4 || width="50%"| .321
|}
|}

Koodin tulostama taulukko:

432

.1

43

.21

4

.321

Galleria

<gallery>-tagilla voidaan tehdä kuvagalleriaa muistuttava taulukko:
<gallery>
Example dot jaypeg without just an.jpg
Image Test.png
</gallery>
Yllä oleva listaus näyttää seuraavanlaiselta:

Kelluva taulukko

Kelluva taulukko määritellään esimerkiksi float=right. Normaalisti kelluvia taulukoita ei kannata käyttää, ne ovat häiritsevän näköisiä.

Koodi

{| class="wikitable" style="float: right; margin: 0 0 0.5em 0.5em; text-align: center;"
|-
! x !! 1 !! 2
|-
! A
| A1 || A2
|-
! B
| B1 || B2
|}

Koodin tulostama taulukko:

x	1	2
A	A1	A2
B	B1	B2

Tekstin tasaus, text align

Jos taulukolle on asetettu yleinen tekstintasaus, se vaikuttaa oletusarvoisesti kaikkiin soluihin. Jos tällaisen taulukon solun tekstiä halutaan tasata eri tavalla, on tasaus asetettava kullekin solulle erikseen, koska tasausta ei voi asettaa sarakkeittain. Tasauksen voi tehdä sarakkeille mallineella {{Table alignment}}. Jos soluja on yhdistetty, niin yksittäisille soluille joutuu tekemään tasauksen.

Seuraavassa esimerkissä taulukko, jossa käytetään yleistä tasausta keskelle, mutta oikeanpuoleisin kommenttikenttä tasataan vasemmalle. Huomaa, että align=right on taulukolle yleensä suuressa taulukossa huono valinta taulukon määritteisin, koska se siirtää kaiken taulukon jälkeen tulevan tekstin taulukon leveyden verran oikealle.

{| class="wikitable" style="text-align:center"
|-
! Otsake !! Lukuarvo 1 !! Lukuarvo 2 !! Lukuarvo 3 !! style="text-align:left"| Kommentteja			
|-
! 1. otsake 
| 5–20 || 25–35 || 50–70 || style="text-align:left"| Lorem ipsum dolor sit amet…
|-
! 2. otsake 
| 40 || 30 || 30 || style="text-align:left"| Duis autem vel eum iriure dolor…
|}

Koodin tulostama taulukko:

Otsake	Lukuarvo 1	Lukuarvo 2	Lukuarvo 3	Kommentteja
1. otsake	5–20	25–35	50–70	Lorem ipsum dolor sit amet…
2. otsake	40	30	30	Duis autem vel eum iriure dolor…

Aakkostava taulukko

Tarvittaessa voidaan taulukkoon liittää automaattinen aakkostus. Sarakkeiden otsikoiden vieressä olevilla painikkeilla voidaan tällaisen taulukon rivit aakkostaa valitun sarakkeen mukaan nousevasti tai laskevasti. Lajittelu aakkostaa asiat tekstinä ja jos halutaan aakkostaa lukuja tai jonkin muun lajitteluavaimen kuin näkyvän tekstin mukaan, niin sarakkeeseen sijoitettu sisältö pitää sijoittaa lajittelumallineen sisään. Yksittäisen sarakkeen lajittelu voidaan poistaa lisäämällä class="unsortable"| sarakeotsikon eteen.

Lajittelumalline luvuille on {{Nts}} ja vapaasti määriteltäville lajitteluavaimille on malline {{Lajiteltava}}.

Koodi
{| class="wikitable sortable" style="margin: 0.5em 0 0 0;"
|-
! Otsake 1 !! Otsake 2 !! Otsake 3
|-
| Solu 1, rivi 1 || Solu 2, rivi 1 || Solu 3, rivi 1
|-
| Solu 1, rivi 2 || Solu 2, rivi 2 || Solu 3, rivi 2
|-
| || ||
|-
| || ||
|}
Koodin tulostama taulukko:

Otsake 1 Otsake 2 Otsake 3

Solu 1, rivi 1 Solu 2, rivi 1 Solu 3, rivi 1

Solu 1, rivi 2 Solu 2, rivi 2 Solu 3, rivi 2

Avattava ja suljettava taulukko

Edellisen tavoin toimiva ”wikitable collapsible” tekee taulukosta oletuksena näkyvän, joka on mahdollista piilottaa. "wikitable collapsible collapsed" piilottaa taulukon oletuksena, ja sen voi avata ”näytä”-linkkiä painamalla. Huomaa, että liialliset avaamiset ja sulkemiset voivat haitata käytettävyyttä. Katso Ohje:Tyyliopas.

Koodi:
{| class="wikitable collapsible" border="1"
|+ Otsikko
! Otsake 1 !! Otsake 2 !! Otsake 3
|-
| Solu 1, rivi 1 || Solu 2, rivi 1 || Solu 3, rivi 1
|-
| Solu 1, rivi 2 || Solu 2, rivi 2 || Solu 3, rivi 2
|}
Koodin tulostama taulukko:

Otsikko
Otsake 1 Otsake 2 Otsake 3

Solu 1, rivi 1 Solu 2, rivi 1 Solu 3, rivi 1

Solu 1, rivi 2 Solu 2, rivi 2 Solu 3, rivi 2

Milloin taulukon tekeminen ei kannata

Kaksisarakkeisen taulukon teko ei yleensä kannata.

Älä tee näin:

1980 Yksi

1988 Kaksi

1994 Kolme

1994 Neljä

Tee mieluummin näin:

1980: Yksi

1988: Kaksi

1994: Kolme

1994: Neljä

Katso myös

Taulukot ja HTML

Aiheesta muualla

Collapsing (englanniksi)