HTML & CSS aloittelijoille (Osa 08): Taulukot (02)

Ensinnäkin haluan näyttää teille, miten solut voidaan yhdistää rivi kerrallaan sarakkeittain. Tämä saavutetaan siten, että kyseinen rivi ulottuu useiden sarakkeiden yli.

Esimerkki:

<table border="1">
   <tr>
      <th colspan="2">Tapahtumat</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Ennen kuin siirrymme eteenpäin, sananen käytetystä th-elementistä. Tämän elementin avulla merkitään otsikkosoluja. Selaimet esittävät nämä solut yleensä lihavina ja keskitettyinä. Ja tässä on sitten tulos selaimessa:

Aloituksen th -elementin sisällä asetetaan ominaisuus colspan. Arvoksi odotetaan sarakkeiden lukumäärää, joiden yli nykyisen solun tulisi ulottua. Huolehtikaa joka tapauksessa siitä, että määritettyjen sarakkeiden lukumäärä on oikea, koska muuten voi tulla epämiellyttäviä tuloksia. Esimerkissä kyseisen th:n otsikkorivi tulisi ulottua kahden sarakkeen yli. Muihin kahteen riviin sisältyy jälleen kaksi riviä kummassakin.

Yksi huomio vielä riviensitomisen yhteydessä. Aseta taulukoille kehitysvaiheessa kehys (border). Näin näet heti, että liittäminen toimii todella halutulla tavalla.

Solut sarakkeittain yhdistäminen

Ominaisuuden rowspan avulla voidaan yhdistää useita soluja sarakkeeseen. Kyseinen solu ulottuu sitten usean rivin yli sarakkeessa. Tästäkin taas esimerkki:

<table border="1">
   <tr>
      <th rowspan="2">Väri</th>
      <td>Sininen</td>
   </tr>
   <tr>
      <td>Vihreä</td>
   </tr>
   <tr>
      <th rowspan="2">Koko</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

Selaimessa tämä näyttää seuraavalta:





Rowspan-ominaisuuteen asetetaan numeerinen arvo. Tämä määrittää lopulta rivien määrän sarakkeessa, joiden yli solun tulisi ulottua. Myös tässä tapauksessa on tietysti tärkeää, että ilmoitettujen rivien määrä on oikea.

Solut samanaikaisesti rivi- ja sarakkeittain yhdistäminen

Molemmat ominaisuudet rowspan ja colspan voidaan muuten yhdistää. Näin solut voidaan määritellä ulottumaan useiden rivien ja sarakkeiden yli samanaikaisesti. Tämäkin on helpointa selittää esimerkin avulla.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Asunto</th>
      <td>5 huonetta</td>
   </tr>
   <tr>
      <td>154 neliömetriä</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Pysäköintipaikka</td>
      <td>Lattialämmitys</td>
   </tr>
</table>

Vilkaistaanpa sitten selaimessa saatuja tuloksia:





Nämä kahden ominaisuuden yhdistämisen yhteydessä on tietysti myös oltava tarkkana, jotta lopulta solujen lukumäärä olisi oikea.

Taulukoiden otsikointi

Hyvin mielenkiintoinen tapa tehdä taulukoista helpommin ymmärrettäviä tarjoaa caption-elementti. Sen avulla voidaan lisätä otsikko tai selitys taulukkoon. Caption:n sisältö näytetään aina taulukon ulkopuolella, vaikka sen määritys tapahtuukin taulukossa.

Tässä tyypillinen käyttötapaus caption:lle:





Taulukon yläpuolella näkyy taulukon otsikko. Oletuksena otsikko on keskitetty näkyviin taulukon yläpuolelle. Tämä voidaan tietysti muokata CSS:n avulla täysin yksilöllisesti.

Caption-elementti määritellään suoraan intro <table> jälkeen.

Tässä on täydelinen syntaksi aiemmin näytetylle esimerkille:

<table border="1">
   <caption>Media-tiedot</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Aihe</th>
         <th>Katselukerrat</th>
         <th>Suuntaus</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Tilanne kesäkuu 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Muotoile taulukoita

Aiemmissa HTML-versioissa oli lukuisia taulukoiden muotoiluun liittyviä attribuutteja. Tässä muutamia esimerkkejä asioista, jotka pystyttiin säätämään attribuuttien avulla. (Selvyyden vuoksi selaimet tukevat näitä attribuutteja edelleen. HTML5:ssa näitä ei kuitenkaan enää pitäisi käyttää).

• Ulkokehys

• Sisäiset taulukon reunat

• Leveyden ja korkeuden määritykset

• Ruudukkoviivat

• Solujen sisällön kohdistaminen

• Värit

• Taustakuvat

Huomaat varmasti, että kaikki voidaan säännellä vastaavien HTML-attribuuttien avulla. Seuraava esimerkki näyttää taulukon, jossa näitä mahdollisuuksia on käytetty runsaasti:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Yksi</td>
      <td width="200" bgcolor="#00ffff">Kaksi</td>
      <td width="200">Kolme</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Neljä<</td>
      <td bgcolor="#996666">Viisi</td>
      <td bgcolor="#003333">Kuusi</td>
   </tr>
 </table>

Vilkaistessasi lopputulosta saat halutun tuloksen.

Vaikka näyttäisikin siltä, että kaikki on niin kuin pitääkin, taustalla oleva syntaksi ei todellakaan ole tehokas. On parempi, jos taulukon ominaisuudet säädetään CSS:n avulla. Uusien CSS-ominaisuuksien ansiosta voidaan korvata vanhat attribuutit modernilla syntaksilla. Lisäksi voidaan toteuttaa lisätoimintoja. Esimerkiksi rivien vuorotteluvärjäykset ovat nykyään helppo toteuttaa.

Aiemmin HTML- ja CSS-aikoina tällaisen tuloksen saamiseksi piti tehdä osittain monimutkaisia koodihässäköitä. Nyt kun keskitytään johdonmukaisesti CSS:n tarjoamiin mahdollisuuksiin, tällainen on helppo toteuttaa.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Kuten olen jo useaan otteeseen maininnut, käyn CSS:ää läpi tässä sarjassa perusteellisesti.