Taulukot

Näin teet taulukosta saavutettavan

Käytä taulukoita harkiten!

Taulukkoja kannattaa käyttää vain suurten tietomäärien esittämiseen, eikä niitä käytetä sisällön visuaaliseen muotoiluun. Taulukot skaalautuvat huonosti, ja niitä on hankala lukea, jos verkkosivua käytetään pieninäyttöisellä matkapuhelimella.

Erityisesti ruudunlukuohjelmia käyttävän näkövammaisen on usein vaikea hahmottaa taulukoita.

Taulukon tekeminen Wordilla

Tee taulukot Wordin Lisää taulukko -komennon avulla. Tee taulukoille otsikkorivi ja varmista, että taulukkojen solujen sisällön voi lukea järkevässä järjestyksessä.

Kun olet luonut taulukon, merkitse taulukon ylin rivi otsikkoriviksi seuraavasti:

• Laita kursori taulukon ylimmälle riville, jotta saat taulukkotyökalut näkyviin Wordin komentoriville.
• Valitse Taulukkotyökaluista Asettelu ja valitse päälle valinta Toista otsikkorivit. Näin taulukon otsikkorivi toistuu, vaikka taulukko jakautuisi useammalle sivulle.

Tarkista, että myös ne, jotka lukevat taulukkoa ruudunlukuohjelman kanssa, voivat lukea taulukon solut järkevässä järjestyksessä. Tämä on erityisen tärkeää, jos taulukossa soluja on yhdistetty toisiinsa. Ruudunlukuohjelmat lukevat solujen sisällöt vasemmalta oikealle ja ylhäältä alas.

• Aseta kursori taulukon ensimmäiseen soluun.
• Liiku solusta toiseen sarkainnäppäimen avulla.
• Jos kursori hyppii solusta toiseen väärin, tarkista että solut on yhdistetty oikein.

Huolehdi siitä, että taulukot ovat selkeitä ja rakenteeltaan yksinkertaisia. Jos taulukko on monimutkainen, tai siinä on useita otsikkorivejä, saavutettavuuden varmistaminen on vaikeaa.

Tarkista vielä, että word-tiedosto on saavutettava valitsemalla Tarkista → Tarkista helppokäyttöisyys. Oikeaan laitaan ilmestyy mahdolliset tarkistettavat huomiot. Tallenna tämän jälkeen tiedosto pdf-versioksi.

Taulukon määritteleminen verkkosivulla

Verkkosivuille sijoitettavat taulukot tehdään suoraan julkaisujärjestelmässä. 

HTML-taulukkoon lisätään aina

• caption-elementti, joka kertoo taulukon tarkoituksen (selite)
• otsikot riveille ja sarakkeille.

Taulukko määritellään <table>-elementillä. Taulukossa käytetään <thead>, <tbody> ja <tfoot> -elementtejä määrittelemään taulukon osia (otsikot, sisällöt, yhteenveto). Taulukon ulkoasu määritellään erikseen tyyleillä (CSS).

HTML taulukon solut

Header cells
Otsikot tehdään <th> elementillä. Teksti lihavoidaan, tekstin asettelun oletuksena on keskitetty teksti, mutta muuta tekstin tasaus. Tarkista erikseen, että tekstin ja taustan välillä on riittävä kontrasti.

Standard cells
Sisällöt tehdään <td> elementillä. Normaali teksti tasataan vasempaan reunaan. Paras vaihtoehto on musta teksti valkoisella pohjalla, mutta voit käyttää myös vaaleita pohjavärejä mustan tekstin taustana. Tarkista, että tekstin ja taustan välinen kontrasti on riittävä.

Kontrastin riittävyyttä voi tarkistaa esimerkiksi ilmaisella WebAim-ohjelmalla (https://webaim.org/resources/contrastchecker/)

HTML-taulukon otsikot

Taulukon pääotsikko tehdään taulukon ulkopuolelle. HUOM! Sivulla voi olla vain yksi H1-tason otsikko.

Taulukon selite määritellään koodissa <caption> -elementillä.

<table>

  <caption>Selite</caption>

  <tr>

Taulukon sarakeotsikot määritellään <th>-elementillä

Yhteensä-tieto määritellään <tfoot>-elementillä (jos taulukossa on yhteensä- rivi).

Html-koodissa tfoot-sisältö sijoitetaan ennen thead-elementtiä. Näin lukuohjelmat huomioivat sen paremmin.  

Taulukon sisältö

Taulukon sisältö määritellään <td>-elementillä. <td>Sisältö</td>

Esimerkki:

Pääotsikko

Lisätietoa

Lue lisää  taulukon elementeistä w3schools.com-verkkopalvelusta