HTML & CSS aloittelijoille (Osa 07): Taulukot (01)

Taulukot ovat melko monimutkaisia rakenteita, jotka koostuvat riveistä ja sarakkeista. Taulukoiden ulkoinen perusrakenne muodostuu aina table-elementistä.

<table>
…
</table>

Tämän elementin sisällä tapahtuu itse taulukon määrittely. On muuten suositeltavaa antaa taulukolle reunus HTML:n toteutuksen aikana. Näin voit paremmin nähdä, miten rivit ja sarakkeet kulkevat tarkalleen. Tähän tarkoitukseen määritellään aloittavalle <table> attribuutti-arvoyhdistelmä border="1". (Huomioi, että HTML:ssä ei tulisi käyttää border-attribuuttia. Sen sijaan käytetään vastaavia CSS-ominaisuuksia. Tästä kuitenkin lisää myöhemmin).

<table border="1">
…
</table>

Jatketaan taulukon rivien määrittelyä. Tähän käytetään elementtiä tr.

<table border="1">
   <tr></tr>
</table>

Mutta tämä ei vielä johda haluttuun tulosteeseen. Seuraavaksi on nimittäin määriteltävä sarakkeet. Tämä tapahtuu jälleen td-elementin avulla.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Nyt voit määrittää taulukon ensimmäisen sisällön. Sen määrittelet <td> ja </td> välissä.

<table border="1">
   <tr>
      <td>Sisältö 1</td>
   </tr>
</table>

Vasta nyt kannattaa vilkaista tulosta selaimessa.

Ei ehkä kovin spektaakkelimainen vielä, koska taulukko koostuu tällä hetkellä vain yhdestä tauluszellistä. Voit nyt lisätä toisen sarakkeen. Tämä tapahtuu jälleen td-elementin avulla. Huomaa, että tämä tulee määritellä rivi-elementin tr sisällä.

<table border="1">
   <tr>
      <td>Sisältö 1</td>
      <td>Sisältö 2</td>
   </tr>
</table>

Tässä jälleen katse tulokseen.

Lisätäksesi lisää rivejä taulukkoon, voit yksinkertaisesti luoda uuden tr-elementin, johon sitten uudet haluamasi td-elementit määritellään.

Tähän vielä esimerkki:

<table border="1">
   <tr>
      <td>Sisältö 1</td>
      <td>Sisältö 2</td>
   </tr>
   <tr>
      <td>Sisältö 3</td>
      <td>Sisältö 4</td>
   </tr>
</table>

Katso tulos selaimessa seuraavasti:





Tällä tavoin voit luoda myös laajoja taulukoita.

Yläosa, Runko ja Alaosan asettaminen

Taulukot voidaan jakaa loogisiin osiin. Niihin kuuluu yläosa-, yksi tai useampi dataosa ja alaosa. Seuraava esimerkki näyttää, miltä tämä voisi näyttää:

<table border="1">
  <thead>
    <tr>
      <th>Lähtö</th>
      <th>Saapuminen</th>
      <th>Laituri</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berliini</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berliini</td>
      <td>Hampuri</td>
      <td>1</td>
    </tr>
    <tr>
      <td>München</td>
      <td>Berliini</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Ja tässä katse tulokseen selaimessa:





Täytyy myöntää, että jakautuminen mainittuihin osiin ei näytä kovin näyttävältä. Voi syntyä kysymys: Miksi vaivata määrittelemällä nämä osiot? Tähän on kaksi hyvää syytä:

• CSS:llä näitä alueita voidaan muotoilla halutulla tavalla.

• Selaimet voivat tulostaa pitkien taulukoiden tapauksessa taulukon yläosan ja alaosan jokaiselle sivulle uudestaan.

Taulukon yläosa alkaa thead:llä. Tähän liittyvät rivit ovat taulukon yläosan osia. Muista sulkea yläosa </thead>.

Jotta taulukolle saadaan alaosa, tämä on ehdottomasti määriteltävä ennen taulukon runkoa. Alaosa alkaa tfoot:sta. Siihen voi liittyä yksi tai useampi rivi, jotka kuuluvat alaosaan. Sulje alaosa </tfoot>.

Todellisen taulukon rungon määrittelet tbody-elementin sisällä. Tätä tbodya voi olla useita. Sulje taulukon runko joka kerta </tbody> -elementillä.

Miksi esimerkiksi käyttää useita tbody-elementtejä yhdessä taulukossa? Hyvä esimerkki tästä voisi olla Bundesligan jalkapallotaulukko. Tällaisessa taulukossa on yleensä useita osioita.

• Mestari

• Mestarien liigan osallistujat

• Mestarien liigan karsijat

• Eurooppa-liigan osallistujat

• Harmaa osaaminen

• Putoajat

Kunkin näistä osioista voit laittaa omaan tbody-elementtiinsä ja muotoilla ne eri tavalla CSS:llä.

Sarakkeiden esiasettelu

Kuinka taulukko näytetään selaimilla, riippuu luonnollisesti ensisijaisesti olemassa olevien rivien ja sarakkeiden määrästä. Taulun näyttäminen selaimelle ei kuitenkaan ole aivan helppoa prosessi. Itse asiassa selaimen on aina ensin luettava koko taulukko ennen kuin se voi näyttää sen. Erityisesti erittäin laajoissa taulukoissa tämä voi tietysti viedä jonkin aikaa. Tätä ongelmaa voidaan kiertää ilmoittamalla selaimelle suoraan, kuinka monesta sarakkeesta taulukko todellisuudessa koostuu.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Otsikko</th>
     <th>Hinta</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Lyhyesti melkein kaikesta</td>
     <td>29,95 euroa</td>
   </tr>
 </table>

colgroup-elementti käynnistää sarakemäärien ennakkotiedonannon. Huomaa, että useimmat aiemmissa HTML-versioissa saatavilla olleet colgroup-elementin attribuutit eivät ole enää sallittuja HTML5:ssä. Ainoastaan span-attribuutti on nyt sallittu. Tämä attribuutti odottaa arvokseen sarakkeiden määrää taulukossa.

colgroup-elementti sijoitetaan suoraan avausmerkin <table> jälkeen. Itse sarakkeet määritellään sitten yksittäisillä col-elementeillä.

colgroup-elementin käytössä on periaatteessa kaksi vaihtoehtoa:

• span-attribuutilla

• Ilman span-attribuuttia

Ilman span-attribuuttia jokaiselle sarakkeelle, jotka halutaan sisällyttää sarakeryhmään, on määriteltävä yksi col-elementti colgroup-elementin sisällä. Tässä tulisi huomioida, että col on itsenäinen elementti.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Otsikko</th>
     <th>Hinta</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Lyhyesti melkein kaikesta</td>
     <td>29,95 euroa</td>
   </tr>
 </table>

On muuten myös olemassa sekatyyppi.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Tämä on kätevää silloin, kun yksi sarake halutaan määrittää erikseen, mutta muut halutaan ryhmitellä yhteen.