Tässä on yksi tapa tehdä tableja. Tapoja on myös monia muita, mutta tämä on yksi yksinkertaisimmista.
Tässä ohjeessa en aio perehtyä siihen, kuinka kuvia muokataan, sillä se on taas jo toinen juttu. Itse käytän kuvanmuokkaukseen seuraavia ohjelmia:
Jasc Paintshop Pro ja
Microsoft GIF Animator.
Molemmat saa ladattua netistä. PSP:stä kuitenkin ilmaiseksi vain trial-version.
Eli tablea tehdessäsi sinulla tulee olla ensiksi kuva, jota haluat tablessa käyttää.
Sen tulee olla normaalin kokoinen, sillä et pysty myöhemmin muuttamaan sen kokoa koodista.
Seuraavaa koodia käytetään kaikissa tableissa, joten kannattaa tallentaa sen jonnekin, mistä löydät sen helposti vastaisuudessa.
HUOM! Koodin valkoiset tekstit sinun tulee muokata tablea tehdessäsi.
<DIV align=center>
<TABLE height=410 cellSpacing=0 cellPadding=0 width=361 background=http://replace/thistext.gif border=0>
<TBODY><TR>
<TD width=85 height=85></TD>
<TD width=231 height=85></TD>
<TD width=96 height=237 rowSpan=2></TD></TR>
<TD width=85 height=152> </TD>
<TD width=231 height=152>
<DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 226; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #000000; HEIGHT: 194">
<P align=center>TYPE UR TEXT IN HERE</P>
</DIV></TD></TR>
<TD width=85 height=58></TD>
<TD width=231 height=58></TD>
<TD width=96 height=58></TD></TR></TBODY></TABLE></DIV>
1. Eli tämän koodin voit laittaa HTML-tilassa blogimerkintääsi. Mene siis muokkaamaan blogimerkintääsi, klikkaa kohtaa <HTML> ja liitä koodi.
2. Avaa toinen selainikkuna ja mene hostaamaan haluamasi kuva. Itse käytän Imageshack sivustoa.
3. Kopioi kuvan URL-osoite ja liitä se yllä olevaan koodiin kohdan http://replace/thistext.gif paikalle. Tarkista, ettei kohtaan tullut ylimääräisiä välilyöntejä.
4. Klikkaa nyt <HTML>-nappulaa nähdäksesi tablen ja ne kohdat, mitä pitää vielä muokata. Jos kuvasi näyttää pieneltä tai on suurentunut, muuta tablen kokoa koodin kohdasta TABLE hight= tai width=. Esikatsele tablea välissä, jotta näet, millaisia muutoksia numeroiden muuttaminen saa aikaan.
5. Sitten Scrollbarin vuoro. Klikkaa <HTML>-nappulaa päästäksesi esikatselutilaan. Klikkaa sitten kerran scrollbarin kohdalla ja huomaat, että se antaa sinun muuttaa kokoa sellaiseksi kuin haluat. Klikkaa sitten scrollbaria ja vedä se haluamaasi kohtaan. Tämä metodi ei aina anna siirtää scrollbaria mihin tahansa, mutta tee silloin seuraavaa:
Jos haluat siirtää scrollbaria enemmän oikealle, suurenna numeroita kohdassa TD width= riippuen siitä, kuinka paljon haluat sitä siirtää. Sama pätee, jos haluat siirtää scrollbaria vasemmalle. Sillin sinun tulee vain pienentää numeroita.
HUOM! Numerot tulee muuttaa jokaiseen TD width=-kohtaan!
Jos taas haluat siirtää scrollbaria ylös tai alas, sinun tulee muuttaa koodin kohtia height. Eli siirtääksesi alaspäin, laita kohtaan isommat numerot ja päinvastoin.
6. Scrollbarin värikoodien määrittämiseen voit käyttää esim. tätä sivua. Kokeile eri värikoodeja, jotta näet parhaan värituloksen. Koodit tulee siis laittaa kohtiin FFFFFF ja 000000.
7. Tämän jälkeen voit kirjoittaa tableen haluamaasi tekstiä kohtaan TYPE UR TEXT HERE.
Jos olet siis päässyt näin pitkälle, olet virallisesti siis tablentekijä! Onneksi olkoon! Harjoitus tekee mestarin!
Tämä sivu päivitetty 10.8.2006