Ohje:Taulukot

Wikipedia
Loikkaa: valikkoon, hakuun
Wikipedian ohjekirja
Viisi pilaria
  1. Tietosanakirja
  2. Neutraali näkökulma
  3. Tekijänoikeudet
  4. Käytösohjeet
  5. Älä palvo sääntöjä
Käytännöt
Sisällön tuottaminen
Sisällön rajoitteet
Yleiset
Eriävät mielipiteet
Ylläpito
Käytösohjeet
Tyyliopas
Ohjeet
Tekniikka
Wikipedian käyttö
Mielipiteet
Yleiset
Kanssakäyminen
Sisällön kehittäminen
Vältettävät
Wikismit
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]

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]

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]

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

Yksinkertainen esimerkki [muokkaa]

Yksinkertainen taulukko on seuraavanlainen: [muokkaa]

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

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

Taulukon perusrakenne [muokkaa]

Yksinkertainen perustaulukko [muokkaa]

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

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

Kertotaulu-esimerkki [muokkaa]

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

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]

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]

abc def ghi jkl

Toinen esimerkki [muokkaa]

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

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]

Wiki-koodi [muokkaa]

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]

cell1 cell2 cell3

Leveys ja korkeus [muokkaa]

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]

abc def ghi
jkl mno pqr
stu vwx yz

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

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]

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

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]

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

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

Solujen tekstin muotoilu [muokkaa]

Keskittäminen [muokkaa]

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]

<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]
432 .1
43 .21
4 .321

Wikitaulu HTML:nä [muokkaa]

Wikitaulu tuottaa aina HTML:ää Wikipedian systeemissä.

Taulukot [muokkaa]

Taulukon määritelmä:

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

Rivit [muokkaa]

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]

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]

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]

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]

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]

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

  • Drenthe
  • Flevoland
  • Friesland
  • Gelderland
  • Groningen
  • Limburg
  • North Holland
  • Overijssel
  • South Holland
  • Utrecht
  • Zeeland

Kelluva taulukko [muokkaa]

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]

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]

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]

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]

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]

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]

Kaksisarakkeisen taulukon teko ei yleensä kannata.

Älä tee näin [muokkaa]

1980 Yksi
1988 Kaksi
1994 Kolme
1994 Neljä

Tee mieluummin näin [muokkaa]

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

Wikitable [muokkaa]

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

{| class="wikitable"
|-

Aiheesta muualla [muokkaa]

Haettu osoitteesta http://fi.wikipedia.org/w/index.php?title=Ohje:Taulukot&oldid=12835746