Ohje:Taulukot – Wikipedia

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.

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.

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 (caption) 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).

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

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

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

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:

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

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:

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

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.

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

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…

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

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

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ä