Lisätty 6.8.07

Only Finnish
Looking for Fanlisting's?!

Linkitä Sweety

Anime & Manga

.: Anime//Manga .: Esittelyarkisto .: Arvostelut .: Lajit & Genret .: Animanga lista .: Media .: Ikärajoitukset .: Japani Faktaa .: Sanakirja .: Osto-OPUS

Aktiivista

.: Suomimanga .: Julkaisukalenteri .: Vieraskirja

Viihdyke

.: Fan Art .: Fan Fiction .: Award .: Tekemistä .: Toiveet .: Testit .: Tietovisat .: Online sarjakuvia .: Nettipaketti

Sivuista

.: Etusivu .: Sivuista .: Yhteistyö .: Linkit .: Linkitä .: Copyright .: Kiitokset .: Säännöt .: UKK .: Kyselyt .: Mustalista .: Virheilmoitukset .: Webmaster

Hosted by

.: Seven-Colored.Net

Listattu

Kävijöitä

Suojaukset

Kuinka taulukko voidaan koodata?

Taulukoihin pystyt käyttämään useampaakin kuin yhtä koodia kerrallaan. Ja oikeastaan vain kokeilemalla, saa selville mitä mistäkin tapahtuu. Ensiksi selitetään nyt kuitenkin mitä kaikki tagit tarkoittavat. Ne ovat todella tärkeitä!!

Taulukon luominen

Kun taulukon koodaaminen aloitetaan, ensimmäinen tagi on,
<table>
joka ilmoittaa, että tästä alkaa taulukko, ja sitten siihen aletaan luoda soluja.

Solu on se johon kirjoitetaan tekstiä. Seuraavaksi on kuitenkin luotava taulukkoon vaakasuora rivi, mikä tehdään
<tr>
tagilla. Ilman <tr>-tagia, et voi luoda taulukkoon soluja!

Nyt tälle vaakariville on luotava yksi pystyrivi, jotta testiä voitaisiin kirjoittaa.
<td>
tagi luo taulukkoon pystyrivin, jonka jälkeen kirjoitetaan solun sisälle haluttava teksti.

Kun teksti on kirjoitettu taulukon koodi täytyy sulkea. Ja tämä onnistuu seuraavasti.
</td>
</tr>
</table>
Ensin täytyi sulkea se pystyrivi jonka sisään teksti kirjoitettiin, jotta solu saataisiin synnytettyä. Seuraavaksi suljettiin vakarivi, jota ilman solua ei olisi voitu tehdä ja lopuksi suljettiin koko taulukko, jotta teksti jäisi taulukkoon.

<td> -tageja voi luoda taulukkoon peräkkäin niin monta kuin haluaa, mutta pitää muistaa sulkea edellinen pystyrivi, jotta seuraavan voisi aloittaa.

<tr> -tagin luodessasi luot yhden uuden vaakarivin, jonka sisään sinun on taas luotava yksi <td> -tagi ja muistaa sulkea molemmat lopuksi.

Alla on muutama taulukkomalli valmiiksi koodattuina, kokeileminen helpottaa taulukon määritteiden ymmärtämisen!
Katso sivun alalaidasta kuinka voit muuttaa tekstisi tyyliä solun sisällä.

TAULUKKO 1: Taulukon luominen

Muoto: Taulukossa on kolme pystyriviä ja kaksi vaakariviä.
Vaikeusaste: Helppo

Tämä	tässä	on
pieni	esimerkki	taulukko

Koodin osat:
Table on tagi, joka aloittaa taulukon ja siihen pystyy laittaan monia eri määritteitä. Border määrittää taulukon reunuksen paksuuden ja styleen voi määrittää taulukon tekstin paikan. Text-align määrittää tekstin vaakasuuntaisen paikan esimerkiksi keskitetty (center), oikea (right) tai vasen (left). Vertical-align määrittää puolestaan tekstin pystysuuntaisen paikan esimerkiksi ylös (top), alas (bottom) tai keskitetty (middle).
Tr on tagi, joka aloittaa rivin vaakasuunnassa ja niin monta riviä kuin vaaka suuntaan haluaa tehdä luo td-tageilla pystyrivejä. <*/tr> tagi lopettaa vaakarivin.
Rivejä voi tehdä niin monta kuin haluaa.

Huomaathan, että jokaiseen tr-tagiin pitää lisätä aina td-tagi, joka luo taulukon solun.

<table border="reunus lukuna" style="text-align: center; vertical-align: middle;"> <tr> <td>Solu1: Tekstiä tähän</td> <td>Solu2: Tekstiä tähän</td> <td>Solu3: Tekstiä tähän</td> </tr> <tr> <td>Solu4: Tekstiä tähän</td> <td>Solu5: Tekstiä tähän</td> <td>Solu6: Tekstiä tähän</td> </tr> </table>

TAULUKKO 2: Taulukon luominen

Muoto: Taulukossa on kaksi pystyriviä ja kolme vaakariviä.
Vaikeusaste: Keskitaso

Tässä
olisi	esimerkki
	taulukko

Koodin osat:
Tämä taulukko on samanlainen kuin taulukko 1:kin, mutta tähän on lisätty kaksi uutta koodin osaa. Colspan, joka löytyy ensimmäisestä td-tagista saa solun venymään kahden solun levyiseksi. Numeroa voi kyllä suurentaa, mutta sitten on luotava lisää pystyrivejä eli td-tageja. Rowspan puolestaan saa solun venymään kahden solun pituiseksi pystysuunnassa. Lukua voi lisätä, mutta sitten on luotava lisää vaakarivejä, eli tr-tageja.

Huomaathan, että jokaiseen tr-tagiin pitää lisätä aina td-tagi, joka luo taulukon solun.

<table border="1" style="text-align: center; vertical-align: middle;"> <tr> <td colspan="2">Solu1: Tekstiä tähän</td> </tr> <tr> <td rowspan="2">Solu2: Tekstiä tähän</td> <td>Solu3: Tekstiä tähän</td> </tr> <tr> <td>Solu4: Tekstiä tähän</td> </tr> </table>

TAULUKKO 3: Taulukon luominen

Muoto: Taulukossa on neljä pystyriviä ja kaksi vaakariviä.
Vaikeusaste: Keskitaso

solu1	solu2	solu3	soluX
solu4	solu5	solu6

Koodin osat:
Taulukon voi tehdä myös täyttämään koko näkyvä sivu vaaka suunnassa. Taulukon leveyden voi määrittää width-määritteen kohdalle.

Huomaathan, että jokaiseen tr-tagiin pitää lisätä aina td-tagi, joka luo taulukon solun.

<table border="1" width="100%" style="text-align: center; vertical-align: middle;"> <tr> <td>solu1</td> <td>solu2</td> <td>solu3</td> <td rowspan="2">soluX</td> </tr> <tr> <td>solu4</td> <td>solu5</td> <td>solu6</td> </tr> </table>

TAULUKKO 4: Taulukon luominen

Muoto: Taulukossa on neljä pystyriviä ja neljä vaakariviä.
Vaikeusaste: Vaikea

solu 1		solu 2
solu 3	solu 4	solu 5	solu 6
solu 7		solu 8	solu 9
solu 10

Koodin osat:
Tässä taulukossa on käytetty samoja määritteitä kuin taulukkossa 2, mutta tähän taulukkoon niitä määritteitä on vain lisätty hieman enemmän. Kokeilemalla saa selville, mitä mikin määrite saa aikaan.

Huomaathan, että jokaiseen tr-tagiin pitää lisätä aina td-tagi, joka luo taulukon solun.

<table border="5" width="80%" style="text-align: center; vertical-align: middle;"> <tr> <td colspan="2">solu 1</td> <td colspan="2">solu 2</td> </tr> <tr> <td>solu 3</td> <td>solu 4</td> <td>solu 5</td> <td>solu 6</td> </tr> <tr> <td colspan="2">solu 7</td> <td>solu 8</td> <td>solu 9</td> </tr> <tr> <td colspan="4">solu 10</td> </tr> </table>

Taulukon määritteiden muokkaaminen

TD-tagi
Solussa olevan tekstin muokkaaminen - Koko solun tekstiä voi muokata kerralla.
Font-weight -määrite määrittää tekstin paksuuden. Bold on lihavoitu teksti ja none on normaali teksti.
<td style="font-family: fontti; color: väri englanniksi tai koodi; size: fontin koko numeroina; font-weight: fontin määrite;">Tekstiä tähän</td>

Tekstin sijoittaminen - Tekstin pystyy sijoittamaan eri paikkoihin jokaisessa solussa.
Vertical-align määrittää tekstin kohdan pystysuunnassa esimerkiksi ylös (top), alas (bottom) tai keskitetty (middle). Text-align määrittää tekstin paikan vaakasuunnassa esimerkiksi keskitetty (center), vasen (left) tai oikea (right).
<td style="vertical-align: middle; text-align: left;">Tekstiä tähän</td>