Perjantai, 24.11.2017    
Jorkki.com

Artikkelit
   » Etusivu
   » Palaute


logo
  Artikkelit » HTML-opas

1. Johdanto
2. Alkuun
3. Käsitteet
4. Perustagit
5. HTML-sivun runko
6. Ensimmäinen sivu
7. BODY-tagi
8. Fontit
9.Värit
10. Linkit ja kuvat
11. Taulukot
12. Lomakkeet
13. Erikoismerkit
14. Muut
15. Listat
16. Päätäntö




Taulukot

Taulukot ovat keskeinen osa HTML-sivun ulkoasua, koska niiden avulla tehdään sivuston taitto, eli jakaminen palstoiksi. Taitto voitaisiin tehdä myös kehyksillä (framet), mutta niitä ei käsitellä tässä oppaassa, koska itse pidän tapaa huonompana. Nykyään taittoon voidaan käyttää myös CSS:ää, mutta taulukot ovat edelleen eniten käytetty tapa. Mikäli kiinnostuksesi sivujen tekemiseen säilyy myös tämän oppaan jälkeen, niin suosittelen CSS:ään tutustumista.

Suurin osa on joskus käyttänyt Exceliä tai jotain vastaavaa taulukkolaskentaohjelmaa. HTML-taulukot toimivat samalla idealla. Taulukko koostuu siis soluista ja riveistä. Lähdetään liikkeelle esimerkillä.

<table WIDTH="30% BORDER="1" CELLPADDING="3" CELLSPACING="1" ALIGN="CENTER">
<tr>
<td>
Tämä on solu 1 rivillä 1
</td>
<td>
Tämä on solu 2 rivillä 1
</td>
</tr>
<tr>
<td>
<table bgcolor="#ff5522>
<tr>
<td >
Tämä on taulukko taulukossa ja taulukko sijaitsee solussa 1 rivillä 2
</tr>
</table>
</td>
<td>
Tämä on solu 2 rivillä 2
</td>
</tr>
</table>


Tulostus:
Tämä on solu 1 rivillä 1 Tämä on solu 2 rivillä 1
Tämä on taulukko taulukossa ja taulukko sijaitsee solussa 1 rivillä 2
Tämä on solu 2 rivillä 2

  • WIDTH määrittelee taulukon leveyden prosentteina tai pikseleinä. Esimerkissä määrittelimme sen prosentteina. Jos haluat määritellä leveyden pikseleinä, niin jätät prosenttimerkin pois, eli esimerkiksi WIDTH="500".
  • BORDER määrittelee taulukon reunojen paksuuden pikseleinä.
  • CELLPADDING määrittelee tekstin tai muun sisällön välisen tilan taulukon reunasta. Kannattaa käyttää tätä ominaisuutta, koska muuten teksti on aivan kiinni taulukon reunassa ja sitä on vaikea lukea.
  • CELLSPACING määrittelee solujen välisen tilan pikseleissä.
  • BGCOLOR määrittelee taulukon taustavärin.
  • BACKGROUND määrittelee taulukon taustakuvan (tätä ei käytetty esimerkissä).
  • BORDERCOLOR määrittelee reunan värin.
  • Varmaan jo huomasit, että kun haluat uuden solun laitat tagin <td> ja kun haluat solun loppuvan laitat tagin </td>. Kun vaihdat riviä käytät tageja <tr> ja </tr>.
  • Jos et halua taulukon reunoja näkyviin, laita BORDERin ja CELLSPACINGin arvoiksi 0.
  • Kannattaa kokeilla itse jo tässä vaiheessa erilaisia taulukoita esimerkin pohjalta. Vain tekemällä oppii.

Taulukossa tulee monesti ongelma, että toisen solun teksti nousee korkeammalle kuin toisen. Tämän voi korjata eräällä määreellä, mutta ensin katsotaan millainen tämä ongelma on.

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


Tulostus:
Testi Testi
Test
Testi

  • Kuten huomaat, vasen reuna on alempana kuin oikea reuna.
  • Vasemman reunan yläosa saadaan samalle tasolle käyttämällä <tr>-tagiin attribuuttia VALIGN="TOP".


<table border="1">
<tr valign="top">
<td>
Testi
</td>
<td>
Testi <br> Testi<br>Testi </td>
</tr>
</table>


Tulostus:
Testi Testi
Test
Testi

  • Kuten huomasit, nyt teksti on samalla tasolla.
Jos olet päässyt oppaassa tähän asti ja ymmärrät kaiken, niin voit onnitella itseäsi. Taulukot ovat mielestäni HTML:n vaikein asia, joten jos hallitset ne, voit sanoa osaavasi HTML:n.

Seuraava luku




© JC Web Productions