Taulukoiden luominen

Kohteesta ExcaliburWiki
Siirry navigaatioonSiirry hakuun

Tämä sivu lainattu suomenkielisestä Wikipediasta lisenssillä GNU Free Documentation License. Alkuperäinen sivu osoitteessa: http://fi.wikipedia.org/wiki/Taulukoiden_luominen

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

Sisällysluettelo

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 (Malline:K-en)

  • 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, esim color="#FFFFFF"

Taulukon tyyli

Taulukon tyyli määritellään kuin HTML:n tyylitagissa (Malline:K-en).

Yksinkertainen esimerkki

Yksinkertainen taulukko on seuraavanlainen:

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

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

Taulukon perusrakenne

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

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

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

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

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

Väri, määritteen ulottuvuus

Solun määrite on solun ominaisuus, esim 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
|}

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

abc def ghi jkl

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

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

Monen määritteen asettaminen

Wiki-koodi

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

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

cell1 cell2 cell3

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

Yllä oleva taulukkolistaus näyttää seuraavanlaiselta:

abc def ghi
jkl mno pqr
stu vwx yz

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

Wikitaulussa käytettään samaa tapaa 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)

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

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

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

Solujen tekstin muotoilu

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

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>
Ylläoleva taulukkolistaus näyttää seuraavanlaiselta:
432 .1
43 .21
4 .321

Wikitaulu HTML:nä

Wikitaulu tuottaa aina HTML:ää Wikipedian systeemissä.

Taulukot

Taulukon määritelmä: 

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

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>

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>

ja niin "||" vastaa "rivinvaihto" + "|"

Parameters in cells can be used like this: 

|params|cell1||params|cell2||params|cell3

which will result in 

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

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

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>

Wikin ja HTML:n vertailu

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

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

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

Kelluva taulukko

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

Tekstin tasaus, text align

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.

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 esim tavalllisella tekstinkäsittelyohjelmalla. Jotkut konvertterit tuottavat tarpeetonta roskaa wikitaulu-koodiin. Jos on esim 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

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-kehoitteesta 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 esim. Wordin .DOCia.

ohjelman käyttö:

htwiki in.html

antaa out.txt:ssä wikitaulun.

HTWIKI:n "virallinen lataussivu":

Milloin taulukon tekeminen ei kannata

Kaksisarakkeisen taulukon teko ei yleensä kannata.

Älä tee näin

1980Yksi
1988Kaksi
1994Kolme
1994Neljä

Tee mieluummin näin

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

Wikitable

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

{| class="wikitable"
|-
Noudettu kohteesta ”http://xcalibur.cc.tut.fi/mediawiki/index.php?title=Taulukoiden_luominen&oldid=1597”