HTML-taulukot mobiilissa

Taulukot ovat ongelmallisia mobiilissa, sillä skaalaamalla tapahtuva koon pienentäminen on mahdollista vain rajallisesti. Skaalattaessa taulukkoa riittävästi tulee sarakkeista liian kapeita sisältöönsä nähden, eikä kirjasinkokoakaan voi pienentää rajattomasti, sillä luettavuus käy mahdottomaksi. Suuren taulukon pienentäminen mobiilinäytölle on mahdotonta jos halutaan säilyttää taulukko edes jotenkin luettavassa muodossa.

Ratkaisu on muuttaa taulukon datan esitysmuotoa tai rakennetta toisenlaiseksi pieniä näyttöjä varten.

Taulukoiden käyttämiseksi mobiilinäytöillä on esitetty erilaisia malleja, jotka ovat tarkoittaneet taulukon sisällön vaakasuuntaista vierittämistä. Esimerkiksi ensimmäinen sarake (rivin otsikko) on voitu jättää näkyviin mutta sitä seuraavat sarakkeet vierittyvät vaakasuunnassa. Esitän nyt toisen ratkaisun, jossa rivin ensimmäinen sarake jää otsikoksi ja sitä seuraavat solut siirtyvätkin sen alle. Eli muutetaan taulukon rakennetta mobiilinäytöille.

Muutetaan <td> -elementin tyyppi block:ksi

Koko ajatuksen perusta on HTML-elementtien tyypin; inline tai block hyödyntäminen. Oletusarvoisesti taulukon data-elementit <td> asemoituvat rivi-elementin sisälle rinnakkain. Muuttamalla <td> -elementin tyypiksi block, ne asemoituvatkin toistensa päälle. Näin taulukon rakenne muuttuu toisenlaiseksi – kapeammaksi ja korkeammaksi mutta sivun pystyvierittäminen ei ole ongelma.

Tein Corellian kurssiaikataulusta myös mobiiliisti näkyvän taulukon https://corellia.fi/kurssit/kurssiaikataulu/. Taulukko on sen verran suuri, että skaalaamalla siitä ei olisi saanut pienille näytöille soveltuvaa hyvällä tahdollakaan.

Näin taulukko muotoiltiin

Taulukon muotoilu CSS-tyyleillä perustui siihen, että määrittelin CSS media queryllä rajan, jota pienemmillä näytöillä <td> -elementit asemoituvat päällekäin. Sen lisäksi muotoilin taulukkoa hieman lisää mutta tuo block elementiksi muuttaminen oli ratkaiseva tekijä.

Toiminnan periaate

1. Tiettyä leveyttä kapeammalla näytöllä table data elementit <td> ovat block tyyppisiä ja asemoituvat toistensa päälle
2. Rivin ensimmäinen <td> elementti korostetaan visuaalisesti otsikoksi
3. Rivin seuraavat <td> elementit saavat padding-left säännöllä tyhjää tilaa vasemmalle, eli sisältöä sisennetään erottumaan otsikkorivistä
4. Lisäksi lisäsin rivin toiselle sarakkeelle (päivien lukumäärä) CSS säännöillä sanan ”kesto” ja ”pv” arvon ympärille
5. Näytön leveyden ollessa riittävä, muotoillaan taulukko HTML-oletusten mukaisesti

Ei sovellu kaiken tyyppiselle datalle

Siinä kaikki – loppujen lopuksi helppoa ja nopeaa. Tulee kuitenkin huomata, että tämänkaltainen taulukon rakenteen muokkaus ei sovellu kaiken tyyppisille datataulukoille. Silloin on valittava erilainen tapa datan esittämiseen pienellä näytöllä. Esimerkiksi infografiikan käyttäminen mutta siitä lisää jossain seuraavassa artikkelissa.

CSS koodimalli

Alla ensimmäinen versio CSS-asemoinnista, jolla taulukon muotoilu mobiiliin on toteutettu. Huomaa, että siinä on mukana sääntöjä, jotka eivät vaikuta yksin mobiiliasemointiin vaan taulukon muotoiluun yleisemmin. Suosittelenkin, että avaat kurssitaulukkomme selaimeen ja tutkit toteutusta selaimen kehittäjätyökaluilla. Niiden avulla toiminnan logiikka avautuu parhaiten.

table {
  font-family: helvetica, arial, sans-serif;
  font-size: .9em;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td {
   text-align: center;
   color: #333;
   font-size: .85em;
   padding: .2em 1em;
   border: 1px solid #aeaeae;
}

td:first-of-type {
   text-align: left;
   font-size: 1em;
}

tr {
   line-height: 1.4em;
   padding-left: 1em;
}

.sarakeotsikot td {
   font-weight: 900;
   border: none;
}

.otsake td {
   background-color: hsl(203, 24%, 47%);
   color: #fff;
   line-height: 1.8em;
   font-weight: 500;
   border: none;
}

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

.sarakeotsikot {
   display: none;
}

.otsake td {
   line-height: 4em;
}

td {
   display: block;
   text-align: left;
   padding-left: 2.5em;
}

td:empty {
   border: none;
   height: 0;
   display: none;
}

td:first-of-type {
   background-color: hsl(203, 34%, 93%);
   padding-left: .5em;
}

td:nth-of-type(2) {
   font-weight: 900;
}

td:nth-of-type(2):before {
   content: "kesto ";
}

td:nth-of-type(2):after {
   content: " pv";
}

.otsake td {
   background-color: hsl(203, 24%, 47%);
   color: #fff;
}
}