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.
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:
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
Tämän taulukon koodi:
<div class="taulukko">
<div class="row">
<div class="col-md-6">eka rivi, solu 1</div>
<div class="col-md-6">eka rivi, solu 2</div>
</div>
<div class="row">
<div class="col-md-4">toka rivi, solu 1</div>
<div class="col-md-4">toka rivi, solu 2</div>
<div class="col-md-4">toka rivi, solu 3</div>
</div>
</div>
Esimerkkitaulukko 2
Taulukkojen <div class="row">-elementeille voi antaa myös lisämääreitä, esim. jos rivin taustaväri halutaan korostaa.
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ä