Ohje:Taulukot

Wikipedia
Loikkaa: valikkoon, hakuun
Wikipedian ohjekirja
n · k · m

Wikipediassa voi kirjoitella 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.

Sisällysluettelo

Mikä on taulukko[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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

  • Taulu alkaa merkeillä {| taulun lisämääreet ja 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 otsikko, 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"

Usein on selkeintä ja turvallisinta kirjoittaa jokainen solu omalle rivilleen.

Taulukon tyyli[muokkaa | muokkaa wikitekstiä]

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

Yksinkertainen esimerkki[muokkaa | muokkaa wikitekstiä]

Yksinkertainen taulukko on seuraavanlainen:[muokkaa | muokkaa wikitekstiä]

{| {{prettytable}} <!-taulukon määrite-->
|-
| Solu 1, rivi 1 
| Solu 2, rivi 1 
|- 
| Solu 1, rivi 2 
| Solu 2, rivi 2 
|}
tai
{| {{prettytable}}
|-
| Solu 1, rivi 1 || Solu 2, rivi 1 
|- 
| Solu 1, rivi 2 || Solu 2, rivi 2 
|}

Yllä olevat taulukkolistaukset näyttävät seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

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

Taulukon perusrakenne[muokkaa | muokkaa wikitekstiä]

Yksinkertainen perustaulukko[muokkaa | muokkaa wikitekstiä]

{|<!--taulukon määrite--> {{prettytable}}
|-
! Sarakkeen 1 otsikko
! Sarakkeen 2 otsikko
|-
<!-- taulukko alkaa tästä -->
| rivi1, solu1 || rivi1, solu2
|- 
| rivi2,solu 1|| rivi2, solu2
|}

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

Sarakkeen 1 otsikko Sarakkeen 2 otsikko
rivi1, solu1 rivi1, solu2
rivi2,solu 1 rivi2, solu2

Kertotaulu-esimerkki[muokkaa | muokkaa wikitekstiä]

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

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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

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

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

abc def ghi jkl

Toinen esimerkki[muokkaa | muokkaa wikitekstiä]

<!-- taustaväri keltainen, yellow, ulottuu koko riville,
samoin kuin tekstin vihreä (green) väri-->
{| 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
|}

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

Wiki-koodi[muokkaa | muokkaa wikitekstiä]

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

{|
|-
| bgcolor=red|cell1 || width=300px bgcolor=blue |cell2 || bgcolor=green|cell3
|}

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

cell1 cell2 cell3

Leveys ja korkeus[muokkaa | muokkaa wikitekstiä]

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:200px" |mno
| pqr
|-
| stu
| vwx
| yz
|}

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

abc def ghi
jkl mno pqr
stu vwx yz

Yksittäisten rivien ja sarakkeiden leventäminen toisten solujen alueelle[muokkaa | muokkaa wikitekstiä]

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

Colspan (sarakkeiden ulottaminen toisiin soluihin)[muokkaa | muokkaa wikitekstiä]

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

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

{| border="1" cellpadding="5" cellspacing="0"
|-
! Sarake 1 || Sarake 2 || Sarake 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
|}

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

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

Solujen tekstin muotoilu[muokkaa | muokkaa wikitekstiä]

Keskittäminen[muokkaa | muokkaa wikitekstiä]

Solun sisällä olevan tekstin keskittäminen käy seuraavalla tavalla:
<center>Solu</center>
Se käy pipe-syntaksissa helpommin tyyliin:
center | Solu

Wikitaulukoodi[muokkaa | muokkaa wikitekstiä]

<blockquote>
{| cellpadding=0 cellspacing=0
|align=right| 432 || .1
|-
|align=right| 43 || .21
|-
|align=right| 4 || .321
|}
</blockquote>
Ylläoleva taulukkolistaus näyttää seuraavanlaiselta:
432 .1
43 .21
4 .321
<blockquote>
{|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
|}
|}
</blockquote>
Ylläoleva taulukkolistaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]
432 .1
43 .21
4 .321

Wikitaulu HTML:nä[muokkaa | muokkaa wikitekstiä]

Wikitaulu tuottaa aina HTML:ää Wikipedian systeemissä.

Taulukot[muokkaa | muokkaa wikitekstiä]

Taulukon määritelmä:

 {| ''määritteet''
 |}
Jota vastaa HTML:n
 <table ''määritteet''>
 </table>
Välilyönti oltava {|;:n jälkeen.

Rivit[muokkaa | muokkaa wikitekstiä]

HTML:n <tr>:tä vastaava uusi rivi alkaa wikitaulussa

|-
<tr>

Määritteitä (väri jne) lisätään jokaista riviä koskien näin

|- määritteet

Joka tuottaa HTML:ään

<tr määritteet>

Solut[muokkaa | muokkaa wikitekstiä]

Uusia soluja tuotetaan kirjoittamalla näin.

|solu1
|solu2
|solu3

Tai myös näin

|solu1||solu2||solu3

Joista molemmat vastaavat HTML:n

<td>solu1</td><td>solu2</td><td>solu3 <td määritteet>solu2</td> <td määritteet>solu3</td>

Otsakkeet[muokkaa | muokkaa wikitekstiä]

Rivien otsakkeet toimivat kuin

HTML:n tagi TD, paitsi "!" :tä käytetään rivin tai sarakkeen otsikon tunnuksena "|". "!!" :ta voi käyttää "||":n tilalla. Määritteiden erottimena käytetään !:ta huolimatta "|"

 Esim:
!määritteet|solu1

Otsikot[muokkaa | muokkaa wikitekstiä]

A <caption> HTML-tagia vastaa

|+ Otsikko

Joka tuottaa

<caption>Otsikko</caption>

Voit myös käyttää määritteitä

|+ määritteet|Otsikko

Joka tuottaa

<caption määritteet>Otsikko</caption>

Wikin ja HTML:n vertailu[muokkaa | muokkaa wikitekstiä]

Wikitaulu-putkimuoto ja HTML vertailtuna.

Taulukkosyntaksien vertailu
  XHTML HTML & Wiki-td Wikiputki (engl. Wiki-pipe)
Taulu <table></table> <table></table>
{| määritteet 
|}
Otsikko <caption></caption> <caption></caption>
|+ otsikko
Rivi <tr></tr> <tr>
|- määritteet 
Tietosolu

<td>solu1</td>
<td>solu2</td>

<td>solu1
<td>solu2

| solu
| solu2
Tietosaulu <td>solu1</td> <td>solu2</td> <td>solu3</td> <td>solu1 <td>solu2 <td>solu3
|solu1||solu2||solu3
Otsikkosolu <th></th> <th>
! otsake
Esimerkkitaulu
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}
Esimerkkitaulu
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
| 1 || 2 
|- 
| 3 || 4 
|- 
| 5 || 6 
|}

Galleria[muokkaa | muokkaa wikitekstiä]

<gallery>-tagilla voidaan tuottaa kuvagalleriaa muistuttava taulukko:
<gallery>
Drenthe
Flevoland
Friesland
Gelderland
Groningen
Limburg
North Brabant (capital: [[Den Bosch]]) 
North Holland
Overijssel
South Holland
Utrecht
Zeeland
</gallery>

Yllä oleva listaus näyttää seuraavanlaiselta:[muokkaa | muokkaa wikitekstiä]

Kelluva taulukko[muokkaa | muokkaa wikitekstiä]

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

tulostaa sivulle

x 1 2
A A1 A2
B B1 B2



Tekstin tasaus, text align[muokkaa | muokkaa wikitekstiä]

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. Tasausta ei voi asettaa sarakkeittain.

Seuraavassa esimerkissä taulukko, jossa käytetään yleistä tasausta keskelle, mutta oikeanpuoleisin kommenttikenttä tasataan vasemmalle.

{| class="wikitable" style="text-align:center"
|-
!Otsikko !! Lukuarvo 1 !! Lukuarvo 2 !! Lukuarvo 3 !! style="text-align:left" | Kommentteja                       
|-
! Ensimmäinen otsikko 
| 5-20 || 25-35 || 50-70 || style="text-align:left" | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
|-
! Toinen otsikko 
| 40 || 30 || 30 || style="text-align:left" | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
|}

Tämä tuottaa seuraavan taulukon:

Otsikko Lukuarvo 1 Lukuarvo 2 Lukuarvo 3 Kommentteja
Ensimmäinen otsikko 5-20 25-35 50-70 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
Toinen otsikko 40 30 30 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat


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

Aakkostava taulukko[muokkaa | muokkaa wikitekstiä]

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 jonkun muun lajitteluavaimen kuin näkyvän tekstin mukaan, niin sarakkeeseen sijoitettu sisältö pitää sijoittaa lajittelumallineen sisään.

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

Koodi

{| class="wikitable sortable" style="margin: 0.5em 0 0 0;"
|-
! Sarake1 !! Sarake2 !! Sarake3
|-
| rivi1sarake1 || rivi1sarake2 || rivi1sarake3
|-
| rivi2sarake1 || rivi2sarake2 || rivi2sarake3
|-
| rivi3sarake1 || rivi3sarake2 || rivi3sarake3
|-
| rivi4sarake1 || rivi4sarake2 || rivi4sarake3
|-
| rivi5sarake1 || rivi5sarake2 || rivi5sarake3
|}

tulostaa sivulle

Sarake1 Sarake2 Sarake3
rivi1sarake1 rivi1sarake2 rivi1sarake3
rivi2sarake1 rivi2sarake2 rivi2sarake3
rivi3sarake1 rivi3sarake2 rivi3sarake3
rivi4sarake1 rivi4sarake2 rivi4sarake3
rivi5sarake1 rivi5sarake2 rivi5sarake3


Yksittäisen sarakkeen lajittelu voidaan poistaa lisäämällä

class="unsortable"|

sarakeotsikon eteen.

Avattava/suljettava taulukko[muokkaa | muokkaa wikitekstiä]

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 "show"-linkkiä painamalla.

Koodi

{| class="wikitable collapsible" border="1"
|+ taulukkoteksti
! otsikko !! otsikko !! otsikko
|-
| solu || solu || solu
|-
| solu || solu || solu
|}

Tulostaa sivulle

taulukkoteksti
otsikko otsikko otsikko
solu solu solu
solu solu solu

HTML-taulukon muuttaminen wikitaulukoksi[muokkaa | muokkaa wikitekstiä]

HTML-taulukon muuttaminen wikitaulukoksi onnistuu käsinkin mutta on työlästä touhua. Muuntaminen onnistuu helpoiten verkossa olevan muuntajan avulla. Se pyytää tekstiruutuun taulukon HTML:koodia (löytyy yleensä selaimen lähdekoodi-valikosta) ja antaa toiseen tekstiruutuun taulukon wikitaulu-esityksen, joka lisätään wikipedian sivulle. Joitain taulukkomuuntajia jotka muuntavat tauluja HTML:stä wikimuotoon on verkossa. Muuntamisen jälkeen taulukkoa voi siivota esimerkiksi tavalllisella tekstinkäsittelyohjelmalla. Jotkut konvertterit tuottavat tarpeetonta roskaa wikitaulu-koodiin. Jos on esimerkiksi ylimääräisiä <font size="+1">-tageja ja </font>-tageja, ne voi ottaa pois etsi-korvaa-toiminnalla. Näin wikitaulu tulee tiiviseen tilaan ja käyttää yleisiä fonttimäärityksiä.

Tämä näyttää varmimmalta:

Voi katsoa, vastaavatko nämä tarpeitasi:

Ohjelma, joka vaihtaa wikitaulun sarakkeita[muokkaa | muokkaa wikitekstiä]

Koeohjelma, joka vaihtaa haluttaessa wikitaulun sarakkeita ja luo HTML-taulusta prettytable-tauluun. Ohjelma hävittää monet taulukon solujen määreet ja taustavärit sekä fontit. Vain colspan ja rowspan jäävät. Ohjelmaa käytetään komentoriviltä eli ns. DOS-kehotteesta, ja siitä on myös Windows-versio. Ohjelmaa koskeva palaute osoitteeseen mailto:kiviapaja@hotmail.com (toivomukset, ehdotukset ja virheraportit). Ohjelma ei tue täysin läheskään kaikkia HTML:ssä olevia erilaisia taulukoita, mutta tekee useimmissa tapauksessa suurimman osan raskaasta muuntotyöstä ja siksi lienee hyödyllinen.

Ohjelmaan syötetään sisään html-koodi, jossa on yksi taulukko. Sisäänsyöttötiedoston on oltava puhdasta ASCII-tekstiä, ei esimerkiksi Wordin .DOCia.

ohjelman käyttö:

htwiki in.html

antaa out.txt:ssä wikitaulun.

HTWIKI:n "virallinen lataussivu":

Milloin taulukon tekeminen ei kannata[muokkaa | muokkaa wikitekstiä]

Kaksisarakkeisen taulukon teko ei yleensä kannata.

Älä tee näin[muokkaa | muokkaa wikitekstiä]

1980 Yksi
1988 Kaksi
1994 Kolme
1994 Neljä

Tee mieluummin näin[muokkaa | muokkaa wikitekstiä]

  • 1980: Yksi
  • 1988: Kaksi
  • 1994: Kolme
  • 1994: Neljä

Wikitable[muokkaa | muokkaa wikitekstiä]

Taulukon otsikkolohkoon lisättävä wikitable-luokka antaa taulukolle ulkoasun.

{| class="wikitable"
|-

Aiheesta muualla[muokkaa | muokkaa wikitekstiä]