Wikipedia:Taulukoiden lisääminen.html



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

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

muokkaa Wikitaulu-muoto

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

• Taulu alkaa merkeillä "{| taulun lisämääreet" ja loppuu riviin "|}".
• Taulun otsikko on "|+ caption " mikä kirjoitetaan välittömästi taulukon alkumerkin "{|" jälkeen.
• Taulukon rivi alkaa merkillä "|- taulukon lisämääreet eli parametrit ", ja sarakkeet merkeillä rivinvaihto tai "|"
• |:n tai rivinvaihtojen erottamat solut voivat tekstin lisäksi myös sisältää määritteitä.

Solun tiedot:  "| Solun sisältö " tai "| solun määritteet | Solun sisältö " 

• Ensimmäinen rivin solu aloitetaan huutomerkillä ! jos kyseessä on sarakkeen otsikko
• Määritteet ovat normaalia HTML-koodia, esimerkiksi color="#FFFFFF"

muokkaa Taulukon tyyli

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

muokkaa Yksinkertainen esimerkki

muokkaa Yksinkertainen taulukko on seuraavanlainen:

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

{| {{prettytable}}
|-
| Solu 1, rivi 1 || Solu 2, rivi 1 
|- 
| Solu 1, rivi 2 || Solu 2, rivi 2 
|}

muokkaa Yllä olevat taulukkolistaukset näyttävät seuraavanlaiselta:

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

muokkaa Taulukon perusrakenne

muokkaa Yksinkertainen perustaulukko

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

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

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

muokkaa Kertotaulu-esimerkki

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

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

Kertotaulu

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

muokkaa 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, yellow eli punainen, vihreä ja keltainen). RGB-merkintä menee #RRGGBB, jossa RR on värin punainen osa, GG vihreä ja BB keltainen 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
|}

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

abc

def

ghi

jkl

muokkaa Toinen esimerkki

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

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta

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

muokkaa Monen määritteen asettaminen

muokkaa Wiki-koodi

{|
|-
| bgcolor=red|cell1 || width=300px bgcolor=blue
<!-- sarakkeen leveys ja taustaväri asetetaan yhtä aikaa-->
|cell2 || bgcolor=green|cell3
|}

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

cell1

cell2

cell3

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

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

muokkaa 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 solun alueelle, ja rowspan=3 pidentää solua kahden rivin alueelle. Colspanin ja rowspanin käyttö vaatii taitoa.

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

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

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

muokkaa Suurempi esimerkki

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

muokkaa Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

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

muokkaa Solujen tekstin muotoilu

muokkaa Keskittäminen

Solun sisällä olevan tekstin keskittäminen käy seuraavalla tavalla:

<center>Solu</center>

Se käy pipe-syntaksissa helpommin tyyliin:

center | Solu

muokkaa Wikitaulukoodi

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

muokkaa Ylläoleva taulukkolistaus näyttää seuraavanlaiselta:

432 .1

43 .21

4 .321

muokkaa Wikitaulu HTML:nä

Wikitaulu tuottaa aina HTML:ää Wikipedian systeemissä.

muokkaa Taulukot

Taulukon määritelmä:

 {| ''määritteet''
 |}

Jota vastaa HTML:n

 <table ''määritteet''>
 </table>

Välilyönti oltava {|;:n jälkeen.

muokkaa Rivit

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>

muokkaa Solut

Uusia soluja tuotetaan kirjoitamalla 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>

muokkaa Otsakkeet

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

muokkaa Otsikot

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>

muokkaa Wikin ja HTML:n vertailu

Wikitaulu-putkimuoto ja HTML vertailtuna.

Taulukkosyntaksien vertailu

{| määritteet 
|}

|+ otsikko

|- määritteet 

| solu
| solu2

|solu1||solu2||solu3

! otsake

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

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

muokkaa Galleria

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

muokkaa Yllä oleva listaus näyttää seuraavanlaiselta:

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

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

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

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

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

</nowiki>

Tämä tuottaa seuraavan taulukon:

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.

muokkaa Aakkostava taulukko

Tarvittaessa voidaan talukkoon liittää automaattinen aakkostus. Sarakkaiden otsikoiden vieressä olevilla painikkeilla voidaan tällaisen taulukon rivit aakkostaa valitun sarakkeen mukaan nousevasti tai laskevasti.

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

muokkaa HTML-taulukon muuttaminen wikitaulukoksi

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:

• http://www.uni-bonn.de/~manfear/html2wiki-tables.php

Voi katsoa, vastaavatko nämä tarpeitasi:

• http://jannenau.50megs.com/codexyz/htwiki/hotwiki.html HotWiki poistaa värit ja fontit taulusta.
• http://www.cnic.org/html2mediawiki.html Nopea!
• http://diberri.dyndns.org/html2wiki.html
• http://area23.brightbyte.de/csv2wp.php
• http://www.wackyboy.com/ConvertHtmlTableToWikiTable.html

muokkaa Ohjelma, joka vaihtaa wikitaulun sarakkeita

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

• http://jannenau.50megs.com/codexyz/htwiki/htwiki.html

muokkaa Milloin taulukon tekeminen ei kannata

Kaksisarakkeisen taulukon teko ei yleensä kannata.

muokkaa Älä tee näin

1980	Yksi
1988	Kaksi
1994	Kolme
1994	Neljä

muokkaa Tee mieluummin näin

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

muokkaa Wikitable

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

{| class="wikitable"
|-