Valikko:

Taulukot

HTML-kielessä käytetään taulukoita paitsi taulukoimisessa, niin sivun eri osien asemoimisessa haluttuihin paikkoihin.

Taulukko aloitetaan table tagilla. Taulukon rivit määritellään tr- ja rivin palsta td-elementillä.

Alla tehty taulukko, jossa on kaksi riviä ja molemmilla riveillä on kaksi solua. Ensimmäisessä sisennyksessä näkyy kaksi <tr> </tr> paria. Nämä tarkoittavat kahta riviä.
Molempien rivien sisällä (toinen sisennys) on <td> </td> parit. Vasta tämän td -tagin sisään laitetaan varsinainen solun sisältö.

<table border="1">
    <tr>
      <td>solu 1</td>
      <td>solu 2 </td>
    </tr>
    <tr>
      <td>solu 3</td>
      <td>solu 4 </td>
    </tr>
</table>
solu 1 solu 2
solu 3 solu 4

Luonnollisesti voit tehdä omanlaiset sisennykset koodiin. Tärkeintä on, että itse tiedät mihin kohtaan laitat minkäkin solun sisällyksen.

Border parametrillä hallitaan taulukon kehykset. Toisin sanoen, jos border parametrin arvoksi annetaan 0, niin taulukon kehykset haviävät.

<table border="0">
    <tr> <td>solu 1</td> <td>solu 2 </td></tr>
    <tr> <td>solu 3</td> <td>solu 4 </td></tr>
</table>
solu 1 solu 2
solu 3 solu 4

Solujen sisälle voidaan sijoittaa mitä tahansa.
Tämä antaa mahdollisuuden asemoida esimerkiksi linkkejä tai kuvia vierekkäin ja allekkain halutulla tavalla.
Alla esimerkiksi kaksi solua leveä ja kolme solua korkea taulukko, jonne on sijoitettu linkkejä ja kuvia.

<table border="1">
    <tr>
      <td> <a href="http://www.google.fi">Google</a> </td>
      <td> <img src="kuvat/gerbiili.jpg" height="50" /> </td>

    </tr>
    <tr>
      <td> <a href="http://www.youtube.com">Youtube </a> </td>
      <td> <img src="kuvat/Lintu.jpg" height="50" /> </td>

    </tr>
    <tr>
      <td> <a href="http://www.wikipedia.com">Wikipedia </a> </td>
      <td> <img src="kuvat/kilppari.jpg" height="50" /> </td>

    </tr>
</table>
Google
Youtube
Wikipedia

table-, tr- ja td-tageille voidaan tarvittaessa laittaa parametrejä.

Elementti ParametriSelitys / Arvo
table borderkehyksen koko pikseleinä
table backgroundTaustakuva ja sen sijainti
table cellspaddingsolussa olevan elementin ja seinämän välissä oleva tila pikseleinä
table cellspacingsolujen välinen tila pikseleinä
table widthTaulukon leveys
table heightTaulukon korkeus
tr valigntop/middle/bottom eli asemoi tekstin soluun vertikaalisesti
tr alignleft/center/right eli tekstin asemointi horisontaalisesti
tr backgroundTaustakuva ja sen sijainti
tr widthRivin leveys
tr heightRivin korkeus
td valigntop/middle/bottom eli asemoi tekstin soluun vertikaalisesti
td alignleft/center/right eli tekstin asemointi horisontaalisesti
td backgroundTaustakuva ja sen sijainti
td rowspanYhdistää halutun määrän soluja vaakatasossa
td colspanYhdistää halutun määrän soluja pystytasossa
td widthSolun leveys
td heightSolun korkeus

Huom!Soluihin annetut määrittelyt kumoavat rivimäärittelyt. Muutenkin solujen sisälle ei esimerkiksi font-elementin määritykset yllä, joten jokaisen solun fonttimääritykset täytyy tehdä erikseen. Parametrejä, jotka toimivat ainakin uudemmissa selaimissa ovat: bgcolor (solun taustaväri), bordercolor (kehysten väri), bordercolorlight ja bordercolordark (kehyksen kolmiulotteisuus).

Edellisen esimerkin taulukko voidaan nyt hienosäätää
halutulla tavalla käyttäen sopivia parametrejä.

<table border="0" bgcolor="#A0C8C8">
    <tr valign="top">
      <td width="200"> <a href="http://www.google.fi">Google</a> </td>
      <td> <img src="kuvat/gerbiili.jpg" height="50" /> </td>

    </tr>
    <tr valign="top">
      <td> <a href="http://www.youtube.com">Youtube </a> </td>
      <td> <img src="kuvat/Lintu.jpg" height="50" /> </td>

    </tr>
    <tr valign="top">
      <td> <a href="http://www.wikipedia.com">Wikipedia </a> </td>
      <td> <img src="kuvat/kilppari.jpg" height="50" /> </td>

    </tr>
</table>
Google
Youtube
Wikipedia

Huomaa, että ensimmäisen solun leveys-määritelmä pakottaa myös sen alla olevat solut samaan leveyteen.

Palstoitus

Palstoitus on helppo toteuttaa taulukoilla

Ensimmäinen palsta Toinen palsta

Yllä olevan palsta-taulukon saa aikaan esimerkiksi seuraava koodi:

<table border="0" width="80%" cellspacing="20" cellpadding="5">

<tr valign="top">
    <td width="50%" align="left">
      Ensimmäinen palsta
    </td>
    <td width="50%" align="left">
      Toinen palsta
      <br>
      <img src="kuvat/kasvi.jpg" width="120" />
    </td>
</tr>

</table>

Tehtävä