Taulukot

Table-elementti artikkeleissa

Taulukkoelementin esittäminen riippuu siitä, missä kohtaa sivustoa taulukko sijaitsee. Ajankohtaista-osion sivujen syöttö on automatisoitu niin, että sisällössä oleva taulukko otetaan vastaan ns. perusmuotoisena taulukkona, johon ei liitetä erikseen luokkia tai muita, esimerkiksi responsiivisuuden mahdollistavia toiminnallisuuksia.

Taulukko esitetään automaattisesti niin, että joka toisen rivin taustaväri on osittain läpinäkyvä harmaa: rgba(200, 200, 200, .2). Valkoisen taustavärin päällä tämä sävy vastaa suunnilleen sävyä #f4f4f4.  Väri on määritelty osittain läpinäkyväksi sen takia, että taulukko voidaan tarvittaessa esittää myös muun värisellä taustalla oletusarvoisen valkoisen sijasta. Taulukolla ei oikeastaan varsinaisesti ole taustaväriä, vaan väri määräytyy sen mukaan, millaisella taustalla taulukko esitetään. Reunaviivan paksuudeksi on määritelty 1 px ja sen värinä käytetään sävyä #c1c1c1.

HTML-esimerkki

Taulukon HTML-esimerkki

               <table>
                 <tbody>
                  <tr>
                    <td width="33%">
                      <strong>Ohjelma</strong>
                    </td>
                    <td>
                    </td>
                  </tr>
                  <tr>
                   <td>9:00-9:05</td>
                   <td>Perämeren vesistökunnostusverkosto</td>
                  </tr>
                  <tr>
                   <td>9:05-9:20</td>
                   <td>Biodiversea-hankkeen kunnostuskokonaisuus Fiia Haavisto, Metsähallitus</td>
                  </tr>
               </table>
               
            

table {
				  font-size: 90%;
				  padding: 5px;
				  border: solid 1px #c1c1c1;
				  border-collapse: collapse;
}

table tr:nth-child(odd) {
	  background:rgba(200, 200, 200, .2)
}

table td {
	  padding: 5px;
	  border:solid 1px #c1c1c1
}

table td p {
	  margin:0
}
            

Table-elementti tyyliteltynä

Taulukot, joiden rakenteeseen päästään kiinni joko editorissa tai taulukon luomiseen käytettävässä työkalussa, voidaan esittää ns. tyyliteltyinä taulukkoina. Tällöin taulukolle annetaan luokka styled-table ja sille voidaan luoda ns. otsikkoelementti eli thead -rakenne.

Tyylitelty taulukko esitetään automaattisesti niin, että joka toisen rivin taustaväri on osittain läpinäkyvä harmaa: rgba(200, 200, 200, .2). Valkoisen taustavärin päällä tämä sävy vastaa suunnilleen sävyä #f4f4f4.

Taulukon ensimmäiseltä sisältöriviltä alkava taustavärin vuorottelu riippuu siitä, onko taulukon rakenteessa käytetty otsikkoelementtiä (thead) vai ei. Jos taulukossa on otsikkoelementti, ensimmäinen sisältörivi on värittömällä taustalla, toinen värillisellä, kolmas värittömällä jne. Jos taas otsikkoa ei ole, käytetään taustaväriä heti ensimmäisessä sisältörivissä, jolloin toisessa rivissä sitä ei ole jne.

Taulukon otsikkoelementti (thead) esitetään sinisellä #275a90 taustavärillä ja valkoisella #ffffff tekstillä.

Reunaviivan paksuudeksi on määritelty 1 px ja sen värinä käytetään sävyä #c1c1c1. Tyylitellyssä taulukossa reunaviiva näkyy ainoastaan rivien alla – sarakkeilla ei ole reunaviivoja. Itse taulukossa käytetään lisäksi sinistä #275a90 alareunan viivaa, jonka paksuus on 3 px.

Taulukon soluille on määritelty sisennys, jonka mitta vaihtelee käyttäjän selaimen koon mukaan. Mobiilikoossa sisennys on kaikista reunoista 5 px. Kun käyttäjän selaimen leveys on minimissään 768 px, sisennykset ovat 10 px ylä- ja alareunasta sekä 15 px sivuilta. Otsikkoelementissä vastaavat mitat ovat mobiilikoossa samat, mutta isommassa koossa etäisyys ylä- ja alareunasta on 12 px ja sivuilta 15 px.

Taulukon kirjasin poikkeaa sivuston muusta sisällöstä. Tämä johtuu lähinnä siitä, että sivustolla käytetty kirjasin ei ole luettavuudeltaan kovin hyvä taulukkomuodossa. Taulukko on määritelty käyttämään kirjasimena jotakin näistä: 'Noto Sans','Trebuchet MS','Helvetica Neue',Arial,sans-serif;. Kirjasimeksi valikoituu listalta se, joka tässä järjestyksessä löytyy ensimmäisenä käyttäjän koneelta. Jos käyttäjällä ei ole mitään erikseen määritellyistä kirjasimista, sans-serif -määritys käyttää käyttäjän koneen oletuskirjasinta.

HTML-esimerkki: taulukko thead-elementillä

<h3 class="table-title">Taulukon mahdollinen otsikointi</h3>
<table class="styled-table">
 <thead>
  <tr>
   <th>Paikka_Id</th>
   <th>Nro</th>
   <th>Nimi</th>
   <th>Suure</th>
   <th>ElyLyhytNimi</th>
   <th>AikaAlku</th>
   <th>AikaLoppu</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
 </tbody>
</table>

HTML-esimerkki: taulukko ilman thead -elementtiä

Taulukon html-koodi ilman thead -elementtiä

<table class="styled-table">
 <tbody>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
  <tr>
   <td>928</td>
   <td>0405300</td>
   <td>Enonkoski</td>
   <td>Q</td>
   <td>Etelä-Savo</td>
   <td>1.1.1980</td>
   <td>31.12.1984</td>
  </tr>
 </tbody>
</table>
            

Tyylitellyn taulukon CSS-luokat

.esimerkki table.styled-table {
 font-family: 'Noto Sans', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
 margin: 20px 0px;
 max-width: none;
 min-width: 668px;
 letter-spacing: 0.5px;
 width: 100%;
}
.esimerkki .styled-table thead tr {
 background-color: #EFF9FF;
 color: #275A90;
 text-align: left;
}
.esimerkki table.styled-table tbody > tr:nth-child(odd) {
 background: rgba(200, 200, 200, .2)
}
.esimerkki table.styled-table thead + tbody > tr:nth-child(odd) {
 background: rgba(255, 255, 255, 0.2)
}
.esimerkki table.styled-table thead + tbody > tr:nth-child(even) {
 background: rgba(200, 200, 200, .2)
}
.esimerkki table.styled-table td, .esimerkki .styled-table thead td, .esimerkki .styled-table thead th {
 padding: 9px 15px;
 border: solid 1px #c1c1c1
}
.esimerkki table.styled-table {
 border-bottom: solid 3px #275a90;
}
.esimerkki table.styled-table td {
 padding: 5px 5px;
 border: solid 0px #c1c1c1;
 border-bottom: solid 1px #c1c1c1;
}
.esimerkki table.styled-table thead tr {
 background-color: #275a90;
 color: #ffffff;
}
.esimerkki table.styled-table thead tr td, .esimerkki table.styled-table thead tr th {
 padding: 5px 5px;
}
@media(min-width:768px) {
 .esimerkki table.styled-table td {
  padding: 10px 15px;
 }
 .esimerkki table.styled-table thead tr td, .esimerkki table.styled-table thead tr th {
  padding: 12px 15px;
 }
}