HTML Taulukot

HTML-taulukko (table) koostuu riveistä (rows) ja sarakkeista (columns), joita voidaan käyttää tietojen esittämiseen järjestetyssä muodossa. Taulukko koostuu <table> -tagista (taulukkotagi), joka sisältää yhden tai useamman <tr> -tagin (rivitagi) ja jokainen rivi sisältää yhden tai useamman <td> -tagin (saraketagi), jotka sisältävät itse tietoja. Tässä on esimerkki taulukon luomisesta HTML:ssä:

<table>
  <tr>
    <th>Nimi</th>
    <th>Osoite</th>
    <th>Puhelin</th>
  </tr>
  <tr>
    <td>Jukka Virtanen</td>
    <td>Katu 1, 00100 Helsinki</td>
    <td>010 123 4567</td>
  </tr>
  <tr>
    <td>Maija Meikäläinen</td>
    <td>Katu 2, 00100 Helsinki</td>
    <td>010 234 5678</td>
  </tr>
</table>

Tässä esimerkissä taulukko sisältää kolme saraketta, jotka ovat "Nimi", "Osoite" ja "Puhelin". Ensimmäinen rivi on taulukon otsikkorivi ja se sisältää <th> -tagit (otsikkotagit), joita käytetään otsikon esittämiseen. Seuraavat rivit ovat taulukon tietorivejä ja ne sisältävät <td> -tagit (sisältötagit), jotka esittävät tietoja.

thead, tbody ja kumppanit

On myös muita tagien yhdistelmiä, joita voidaan käyttää taulukon luomiseen, kuten <thead>, <tbody>, <tfoot> ja <caption> -tagit. Näitä käytetään yleensä taulukon rakenteen määrittämiseen ja otsikon sekä alaotsikon lisäämiseen. Tässä on esimerkki käyttämällä <thead> -tagia:

<table>
  <thead>
    <tr>
      <th>Nimi</th>
      <th>Osoite</th>
      <th>Puhelin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jukka Virtanen</td>
      <td>Katu 1, 00100 Helsinki</td>
      <td>010 123 4567</td>
    </tr>
    <tr>
      <td>Maija Meikäläinen</td>
      <td>Katu 2, 00100 Helsinki</td>
      <td>010 234 5678</td>
    </tr>
  </tbody>
</table>

Tässä esimerkissä <thead> -tagi sisältää otsikkorivin ja <tbody> -tagi sisältää tietorivit. Tämä rakenteen määrittäminen auttaa sivun lukijaa (erityisesti ruudunlukijoita) ymmärtämään taulukon rakenteen paremmin.

Taulukon tyylitys CSS:llä

Taulukon muotoilua voidaan myös säätää CSS:llä. Tutustumme CSS:ään vasta seuraavassa osiossa, mutta tässä on pieni etukäteiskurkistus.

Voit käyttää CSS:ää esimerkiksi taulukon reunojen piirtämiseen, solujen taustavärien ja tekstien värin määrittämiseen, solujen sisennyksen muuttamiseen, jne. Alla on esimerkki taulukon muotoilusta CSS:llä:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  th {
    background-color: #f2f2f2;
  }
  
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Nimi</th>
      <th>Osoite</th>
      <th>Puhelin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jukka Virtanen</td>
      <td>Katu 1, 00100 Helsinki</td>
      <td>010 123 4567</td>
    </tr>
    <tr>
      <td>Maija Meikäläinen</td>
      <td>Katu 2, 00100 Helsinki</td>
      <td>010 234 5678</td>
    </tr>
    <tr>
      <td>Liisa Virtanen</td>
      <td>Katu 3, 00100 Helsinki</td>
      <td>010 345 6789</td>
    </tr>
  </tbody>
</table>

Tässä esimerkissä käytetään CSS-sääntöjä, jotka määrittävät taulukon ulkoasun.

• border-collapse: collapse -sääntö poistaa taulukon solujen väliset turhat välit
• width: 100% -sääntö määrittää taulukon leveyden
• max-width: 800px -sääntö rajoittaa taulukon leveyden suurimman mahdollisen arvon.
• th, td -sääntö määrittää sekä otsikko- että sisältösolujen ulkoasun.
• padding: 8px -sääntö määrittää sisältöjen sisennysten koon
• text-align: left -sääntö määrittää solujen tekstin kohdistuksen vasemmalle
• border-bottom: 1px solid #ddd -sääntö määrittää alareunan värin
• background-color: #f2f2f2 -sääntö määrittää otsikkosolun taustavärin.
• tr:nth-child(even) -sääntö määrittää parillisten rivien taustavärin.

Harjoittele