Taulukot 2

Otavan Opiston Av-wiki

Taulukon määrittely aloitetaan tagilla <table>. Voit laittaa sivuillesi minne tahansa taulukkotagin, kunhan muistat päättää sen merkillä </table>. Yksinkertaisimmillaan taulukko olisi tällainen.

<table></table>

Tällaisesta taulukosta ei kuitenkaan ole mitään hyötyä, koska siitä puuttuvat rivit ja sarakkeet. Rivi lisätään koodilla <tr> ja sarake koodilla <td>. Tehdään yksinkertainen esimerkki, jossa kaksi riviä ja kaksi saraketta.

<table> 
<tr> 
<td>eka rivi ja eka solu</td><td>eka rivi ja toinen solu</td> 
</tr> 
<tr> 
<td>toka rivi ja eka solu</td><td>toka rivi ja toinen solu</td> 
</tr></table>

Selaimen kautta tarkasteltuna yllä oleva koodiesimerkki näyttää tältä:

Muokataan koodia ottamalla mukaan myös taulukon reunaviivat sekä määritellään taulkon leveydeksi 300 pikseliä.

<table width="400" border="1"> 
<tr> 
<td>eka rivi ja eka solu</td><td>eka rivi ja toinen solu</td> 
</tr> 
<tr> 
<td>toka rivi ja eka solu</td><td>toka rivi ja toinen solu</td> 
</tr></table>

Nyt taulukon ulkoasu on hieman muuttunut.

[muokkaa] Tablen ominaisuudet

Taulukoa ja sen soluja sekä rivejä voidaan määritellä mm koon ja värin suhteen. Taulukolla eli tagilla <table> voi olla seuraavanlaisia ominaisuuksia.

[muokkaa] TR: ja TD:n ominaisuudet

Taulukon rivillä <TR> ja sarakkeellla <TD> voi olla seuraavanlaisia ominaisuuksia.

[muokkaa] TD:n ominaisuudet

Taulukon solulla <TD> voi olla seuraavanlaisia ominaisuuksia.

Esimerkki

<table width="300" cellpadding="2" border="1"> 
<tr> 
<td width="100" >eka rivi ja eka solu</td><td width="200"> 
eka rivi ja toinen solu</td> 
</tr> 
<tr> 
<td bgcolor="#666666"> 
toka rivi ja eka solu</td><td>toka rivi ja toinen solu,  
jossa eniten tekstä och samma på svenska</td> 
</tr> 
</table>

Esimerkki 2

Tässä esimerkissä yhdistetään rivin kaksi solut yhdeksi soluksi käyttäen tagia colspan ( <td colspan="2">).

<table width="300" border="1"> 
<tr> 
<td width="100" valign="top" height="100"> 
ensimmäinen solu</td> 
<td>toinen solu</td> 
</tr><tr> 
<td colspan="2">kolmas solu</td> 
</tr> 
</table>