Ohje:Taulukot

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.

Taulukoita voi muokata ja tehdä myös visuaalisella muokkaimella, jolloin muokkaajan ei tarvitse ymmärtää taulukon koodia.

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 (engl. pipe syntax)

  • Taulu alkaa merkeillä: {| taulun lisämääreet, jossa lisämääreet on normaalisti class="wikitable"
  • Taulu 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 määritellään kuin HTML:n tyylitagissa (engl. style sheet).

Yksinkertainen esimerkki

Yksinkertainen taulukko on seuraavanlainen:

{| class="wikitable"|-| Solu 1, rivi 1 | Solu 2, rivi 1 |- | Solu 1, rivi 2 | Solu 2, rivi 2 |}

Vaihtoehtoisesti solut voidaan luetella 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 |}
Yllä olevat taulukot näyttävät seuraavanlaiselta
Solu 1, rivi 1Solu 2, rivi 1
Solu 1, rivi 2Solu 2, rivi 2

Taulukon perusrakenne

Yksinkertainen perustaulukko

{| class="wikitable"|+ Otsikko! Sarakkeen 1 otsikko! Sarakkeen 2 otsikko|-| rivi1, solu1 || rivi1, solu2|- | rivi2,solu 1|| rivi2, solu2|}
Yllä oleva taulukko näyttää seuraavanlaiselta
Otsikko
Sarakkeen 1 otsikkoSarakkeen 2 otsikko
rivi1, solu1rivi1, solu2
rivi2,solu 1rivi2, solu2

Kertotaulu-esimerkki

<!-- taulukon määritteet: luokka wikitable ja tekstin tasaus keskelle eli 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
×123
1123
2246
3369
44812
551015

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, 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ää. Kts. Luettelo väreistä

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

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
abcdefghi
jklmnopqr
stuvwxyz
HTML 4.01 määrittää 16 esimääriteltyä väriä, joiden heksadesimaalitunnukset ovat:
black#000000silver#c0c0c0maroon#800000red#ff0000
navy#000080blue#0000ffpurple#800080fuchsia#ff00ff
green#008000lime#00ff00olive#808000yellow#ffff00
teal#008080aqua#00ffffgray#808080white#ffffff

Monen määritteen asettaminen

Wiki-koodi

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
cell1cell2cell3

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
abcdefghi
jklmnopqr
stuvwxyz

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 sarakkeen alueelle, ja rowspan=3 pidentää solua kolmen 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 1Sarake 2, rivi 1 (ja myös 2)Sarake 3, rivi 1
Sarake 1, rivi 2Sarake 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 1Sarake 2Sarake 3
AB
CD
EF
GHI
JK
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 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>

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>DrentheFlevolandFrieslandGelderlandGroningenLimburgNorth Brabant (capital: [[Den Bosch]]) <!--ei tule näkyviin, galleria ei tue wikilinkitettyä tekstiä-->North HollandOverijsselSouth HollandUtrechtZeeland</gallery>
Yllä oleva listaus näyttää seuraavanlaiselta

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

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

x12
AA1A2
BB1B2


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

OtsikkoLukuarvo 1Lukuarvo 2Lukuarvo 3Kommentteja
Ensimmäinen otsikko5-2025-3550-70Lorem 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 otsikko403030Duis 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

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.

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

tulostaa sivulle

Sarake1Sarake2Sarake3
rivi1sarake1rivi1sarake2rivi1sarake3
rivi2sarake1rivi2sarake2rivi2sarake3


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

class="unsortable"|

sarakeotsikon eteen.

Avattava/suljettava taulukko

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

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

Ohjelma, joka vaihtaa wikitaulun sarakkeita

Koeohjelma, joka vaihtaa haluttaessa wikitaulun sarakkeita ja luoHTML-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

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ä

Aiheesta muualla

🔥 Top keywords: