|
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Taulukot |
|
Lähes kaikki netissä olevat sivut sisältävät taulukoita (vähintään yhden).Taulukoiden tarkoitus on antaa sivuille ryhtiä ja saadaan esim. tekstit alkamaan samasta paikasta joka sivulla. Niitä voi olla useampia tarpeen mukaan. Päällekäin, rinnakkain, sisäkkäin.
Taulukot sijoitetaan sivulle <body> komentojen väliin </body>. Ne aloitetaan <table> komennolla ja lopetetaan </table> komentoon. Näiden väliin sijoitetaan taulukon varsinaiset solut. <tr> aloittaa rivin vaaka suuntaan ja </tr> lopettaa sen. <td> aloittaa solun ja </td> lopettaa sen (nämä tulevat edellisten tr tagien väliin). <th> on otsikko solu, joka lihavoi ja keskittää automaattisesti </th> jos haluat sellaista käyttää (muuten se on ihan sama kuin td). Solujen <td> </td> sisään voi sijoittaa kaikkia html komentoja, tekstiä, kuvia, linkkejä, toisia taulukoita. Solulle voi myös halutessaan määritellä taustavärin tai kuvan, leveyden ja korkeuden yms. Taulukon leveys voidan määritellä kahdella tavalla. Pikseleinä esim: <table width="600">, jolloin taulukon leveys on 600 pikseliä, tai prosentteina esim: <table width="100%">, jolloin taulukon leveys on koko näytön levyinen. Taulukolla voidaan tehdä koko sivun ulkoasu (layout), esimerkki aukeaa uuteen selainikkunaan. |
|
|
|
Perus sivun koodi voisi olla esim:
<html> <head> <title>Sivun nimi</title> </head> <body> <table> <tr> <td> Tähän kaikki mitä haluat sivullasi näkyvän, tekstiä, kuvia, yms </td> </tr> </table> </body> </html> |
Tämä teksti ei ole taulukossa ja on siksi orpona täällä sivussa. :´(
|
|
reunan paksuus, reunaväri ja keskitetty ne. |
|
<table width="600" border="2" bordercolor="blue" align="center">
<tr> <td bordercolor="red"> Tämä teksti on sijoitettu taulukkoon. Koodilla pitäs tulla alla oleva taulukko. </td> </tr> </table> |
|
Tämä teksti on sijoitettu taulukkoon. Koodi on yllä.
Tässä tablen reunat ovat sinisellä ja solun reunat on punaisellla Tänne voi lisätä tekstiä, kuvaa ja kaikkia html-koodeja. vaikka millä mitalla ja laittaa borderin nollaksi (border="0") ja kaikki näyttää sitten jo paljon paremmalle. Taulukko venyy alas päin sitä mukaa kun laitat "tavaraa" sinne. |
|
Tämä on muuten ihan samanlainen taulukko kuin yllä, mutta tablen määrityksiin on lisätty vielä cellspacing="20" cellpadding="20" ja tälläistä tapahtuu.
Cellspacing määrittää solujen seinien välisen tilan. (sininen-punainen) Cellpadding määrittää solujen seinän ja tekstin välisen tilan. (puna-texti) Näitä voi käyttä yhdessä tai erikseen. |
|
|
| 2. Koodi alla olevalle osoite taulukolle, <th> tekee otsikko solun (lihavoi ja keskittää tekstin), muuten se on ihan sama kuin <td> <Caption> tekee taulukon otsikon (ei ole välttämätön) Alemmilla riveillä ei pitäis olla enempää soluja kuin on ylimmässä rivissä |
|---|
|
<table width="600" border="2" bordercolor="blue" align="center">
<caption> Osoite taulukko </caption> <tr> <th>Nimi</th> <th>Osoite</th> <th>Puhelin</th> </tr> <tr> <td>Aku Ankka</td> <td>Ankkalinna</td> <td>113</td> </tr> <tr> <td>Iines Ankka</td> <td>Ankkalinna</td> <td>222</td> </tr> </table> |
| Nimi | Osoite | Puhelin |
|---|---|---|
| Aku Ankka | Ankkalinna | 113 |
| Iines Ankka | Ankkalinna | 222 |
|
|
| 3. Tekstin paikka solussa vaaka ja pysty suunnassa |
|---|
|
<table width="600" border="2" bordercolor="blue" align="center">
<tr> <td align="left">Teksti vasemmalla</td> <td align="center">keskellä</td> <td align="right">oikealla</td> </tr> <tr> <td height="60" valign="top">Tekstiä ylhäällä</td> <td valign="middle">keskellä solua</td> <td valign="bottom">alhaalla</td> </tr> </table> |
| Teksti vasemmalla | keskellä | oikealla |
| Tekstiä ylhäällä | keskellä solua | ja alhaalla |
|
|
| 4. Taulukon solujen yhdistäminen, sekä solun tausta väri |
|---|
|
<table width="600" border="2" bordercolor="blue" align="center">
<tr> <td rowspan="2">Päällekäisten solujen yhdistäminen rowspan="2" komennolla</td> <td>Solu</td> <td>Solu</td> <td>Solu</td> </tr> <tr> <td>Solu</td> <td>Solu</td> <td>Solu</td> </tr> <tr> <td colspan="2">Sekä rinnakkaisten solujen yhdistäminen colspan="2" komennolla</td> <td>Solu</td> <td bgcolor="red">Solu</td> </tr> </table> |
| Päällekäisten solujen yhdistäminen rowspan="2" komennolla | Solu | Solu | Solu |
| Solu | Solu | Solu | |
| Sekä rinnakkaisten solujen yhdistäminen colspan="2" komennolla | Solu | Solu | |
|
|
| 5. Taulukolla voidaan kuvat ryhmitellä kiertämään tekstiä tai päin vastoin. Laita border nollaan, niin näyttää ihan toiselle. |
|---|
|
<table width="600" border="2" cellspacing="20" align=center> <tr height="60"> <td colspan="5" align="center"><img src="kuva1.gif"></td> </tr> <tr height="60"> <td width="20%"> </td> <td align="center" width="20%"><img src="kuva1.gif"></td> <td width="20%" align="center"><font size="3">Kuvaa</font></td> <td align="center" width="20%"><img src="kuva1.gif"></td> <td width="20%"> </td> </tr> <tr height="60"> <td align="center"><img src="kuva1.gif"></td> <td align="center" colspan="3">sekä tekstiä voi ryhmitellä</td> <td align="center"><img src="kuva1.gif"></td> </tr> <tr height="60"> <td> </td> <td align="center"><img src="kuva1.gif"></td> <td align="center">taulukon avulla</td> <td align="center"><img src="kuva1.gif"></td> <td> </td> </tr> <tr height="60"> <td colspan="2" align="left"></td> <td align="center"><img src="kuva1.gif"></td> <td colspan="2" align="right"></td> </tr> </table> |
 |
||||
|
Kuvaa | |
||
|
sekä tekstiä voi ryhmitellä |
|
||
|
taulukon avulla | |
||
|
||||
|
|
| 6. Alla olevan taulukon sisään on sijoitettu 3 taulukkoa rinnakain (jokaisessa on 1 solu) |
|---|
|
<table width="660" border="2" bordercolor="black" align="center" cellspacing="3" cellpadding="3">
<tr> <td bordercolor="blue"><table width="220" border="3" bordercolor="green" align="center"><tr><td bordercolor="red">Taulukko 1.</td></tr></table></td> <td bordercolor="blue"><table width="220" height="150" border="3" bordercolor="green" align="center"><tr><td bordercolor="red">Taulukko 2.</td></tr></table></td> <td bordercolor="blue"><table width="220" border="3" bordercolor="green" align="center"><tr><td bordercolor="red">Taulukko 3.</td></tr></table></td> </tr> </table> |
|
|
|
 |
