Taulukot
Yksi kuolema on tragedia, miljoona on tilastoja.
Josif Stalin
Taulukon määrittelee koodi <table>...</table>. Aloituskoodin tarkenteilla voi vaikuttaa taulukon ulkoasuun. Tarkenne border määrittelee reunaviivan leveyden: koodilla <table border=0> saat näkymättömän taulukon.
Taulukon rivin määrittelee <tr>... </tr> (table row) ja yksittäisen solun <td>... </td> (table data).
<table>
<tr>
<td>
Tänään
</td>
<td>
Huomenna
</td>
</tr>
<tr>
<td>
12,3
</td>
<td>
29,9
</td>
</tr>
</table>
| Tänään | Huomenna |
| 12,3 | 29,9 |
Taulukkoon sekä riveihin ja soluihin voi liittää kohdistukseen ja taustaan liittyviä tarkenteita.
<table border="4" width="100%">
<tr>
<td width="30%" >
...
</table>
Rivinvaihdot ja sisennykset eivät taaskaan vaikuta koodin tulkintaan selaimessa, mutta monimutkaisten sisäkkäisten rakenteiden luominen ja muuttaminen on huomattavasti helpompaa, kun vaivaudut hieman muotoilemaan koodia.
Taulukoita käytetään joskus sivujen taittoon asettelemalla sivulle tulevat kuvat ja tekstit näkymättömän taulukon soluihin. Älä itse käytä taulukoita sivun asetteluun, koska rakenne ei silloin mukaudu erilaisiin ikkunoihin ja eri laittteille. Parempi vaihtoehto on käyttää taittoon lohkoja ja tyylimäärityksiä.
Tehtävät
- Kopioi luettelotehtäväsi uuteen tiedostoon nimellä
taulukko.html ja muunna kaikki luettelot taulukoiksi. - Muunna alla oleva teksti taulukoksi. Korosta otsikoita väreillä:
Raaka-aine määrä kg/l määrä yksikköhinta hinta
kg e/kg e
--------------------------------------------------------
voi 0,600 kg 0,35 0,600 4,11 2,47
sokeri 0,450 l 0,85 0,383 1,09 0,42
kardemumma 0,015 l 0,50 0,007 39,87 0,28
kananmuna 0,150 kg 1,00 0,150 1,76 0,26
omenasose 0,450 kg 1.00 0,450 3,02 1,36
vehnäjauho 1,050 l 0,60 0,630 0,62 0,39
kevytkerma 0,450 l 1,00 0,450 3,11 1,40
leivinjauhe 0,020 l 0,80 0,016 4,03 0,06
--------------------------------------------------------
Yhteensä 6,64