Taulukot

Taulukon käyttämistä nettisivuilla kannattaa harkita tarkkaan ja miettiä, voidaanko tieto esittää jollain muulla tavalla. Taulukot skaalautuvat huonosti ja niitä on hankala lukea, kun nettisivustoa luetaan kännykällä. Taulukot ovat usein myös hankalia näkövammaisille ruudunlukuohjelmia käyttäville.

Luo uusi taulukko

Pikaohje

Kirjaudu sisään Lukkariin. Valitse sisältöportletti, johon haluat luoda taulukon, ja siirry portletin muokkaustilaan.
Luo taulukko painamalla tekstieditorin Taulu-kuvaketta. Syötä haluamasi rivi- ja sarakemäärä.
Valitse Ylätunnisteet-pudotusvalikosta vaihtoehto ”Molemmat”.
Lisää taulukolle selite Otsikko-kentässä. Paina lopuksi OK.
Syötä taulukkoon haluamasi sisältö ja julkaise lopuksi portlettiin tehdyt muutokset.

Varmista taulukon saavutettavuus

Jos taulukoita käyttää, niille on tärkeä merkitä otsikot taulukon riveille ja sarakkeille sekä seliteteksti.

Otsikot riveille ja sarakkeille (<th>-elementti) otetaan käyttöön taulukon ominaisuuksista Ylätunnisteet-valikosta valitsemalla ”Molemmat”. Ruudunlukuohjelma lukee otsikot käyttäjälle. Otsikkotekstiin tulee automaattisesti lihavointi.
Seliteteksti (<caption>-elementti), joka kuvaa taulukon sisältöä, kirjoitetaan Otsikko-nimiseen kenttään. Selitettä ei välttämättä tarvitse täyttää, jos taulukkoa ennen on otsikko tai teksti, joka kuvailee taulukon sisällön.

Responsiivinen taulukko (edistyneemmille käyttäjille)

Responsiivinen taulukko

Lukkarin tekstieditorin Taulu-työkalulla voi luoda taulukoita, mutta oletuksena ne eivät ole mobiiliystävällisiä eli responsiivisia. On kaksi tapaa tehdä responsiivisia taulukoita: lisäämällä Taulu-työkalulla luodulle <table>-taulukolle erityistyylimääreitä tai tekemällä taulukon manuaalisesti <div>-elementtien avulla.

Muistakaa, ettei taulukko ole lähtökohtaisesti saavutettava ja siksi kannattaa välttää taulukkojen käyttöä nettisivuilla.

Responsiivinen taulukko <table>-elementin tyylimääreitä muuttamalla

Muokkaamaton taulukko:

eka rivi, solu 1	eka rivi, solu 2
toka rivi, solu 1	toka rivi, solu 2
kolmas rivi, solu 1	kolmas rivi, solu 2

Muokattu taulukko (eron huomaa selainikkunaa pienentämällä) :

eka rivi, solu 1	eka rivi, solu 2
toka rivi, solu 1	toka rivi, solu 2
kolmas rivi, solu 1	kolmas rivi, solu 2

Muokatun taulukon koodi:

...

</table>

.responsive_table{width:100%;max-width:500px !important;}

@media screen and (max-width: 480px) {

.responsive_table, .responsive_table tbody, .responsive_table tr, .responsive_table td{border:none;display:block;}

.responsive_table tr td:last-child{margin-bottom:10px;}

}

</style>

Responsiivinen taulukko <div>-elementtien avulla

Lukkarissa on mahdollista hyödyntää Bootrstap-frameworkin tarjoamia tyyliluokkia. Ohessa muutamia esimerkkejä siitä, miten esim. reponsiivisen taulukon voi rakentaa <div>-elementtien ja Bootsrap-grid tyyliluokkien avulla. Gridissä sivun leveys on jaettu 12 palstaan, jotka voidaan esittää erikseen tai yhdistettynä.

Lyhyt selostus esimerkeissä käytetyistä tyyliluokista:

<div class="row"> - määrittelee rivi-elementin, jonka sisällä voi olla haluttu määrä taulukoita
<div class="col-md-6"> - määrittelee palsta-elementin, jonka leveys on 50% tietokoneen näytöllä. HUOM! Jotta gridi toimisi oikein, tulee palstojen yhteissumma joka rivillä olla 12.
<div class="col-md-8"> - määrittelee solu-elementin, jonka leveys on 66.6% tietokoneen näytöllä
<div class="col-md-4"> - määrittelee solu-elementin, jonka leveys on 33.3% tietokoneen näytöllä

Palsta, jonka leveys on "col-md-xx", muuttuu tablet- ja mobiilinäkymässä automaattisesti 100% leveäksi. Jos halutaan, että palsta muuttuu 100% leveäksi vain mobiilikoossa, voi käyttää palstan määrittelyssä sm-tunnistetta md-tunnisteen sijaan, esim. "col-sm-6".

Esimerkkitaulukko 1

eka rivi, solu 1

eka rivi, solu 2

toka rivi, solu 1

toka rivi, solu 2

toka rivi, solu 3

Tämän taulukon koodi:

Esimerkkitaulukko 2

Taulukkojen <div class="row">-elementeille voi antaa myös lisämääreitä, esim. jos rivin taustaväri halutaan korostaa.

eka rivi, solu 1

eka rivi, solu 2

toka rivi, solu 1

toka rivi, solu 2

kolmas rivi, solu 1

kolmas rivi, solu 2

Tämän taulukon koodi:

<div class="taulukko">
<div class="row">
<div class="col-md-8">eka rivi, solu 1</div>
<div class="col-md-4">eka rivi, solu 2</div>
</div>
<div class="row harmaa">
<div class="col-md-8">toka rivi, solu 1</div>
<div class="col-md-4">toka rivi, solu 2</div>
</div>
<div class="row">
<div class="col-md-8">kolmas rivi, solu 1</div>
<div class="col-md-4">kolmas rivi, solu 2</div>
</div>
</div>

Lisätietoa Bootstrap gridistäLinkki avautuu uudessa välilehdessä