Kotisivun tekemisestä

Takaisin

Tehtävä 1

Tee seuraava taulukko

Tehtävä 2

Taulukolla voidaan asemoida sivuja.

Tee sivu joka on suurin piirtein seuraavan kaltainen, malli.

Katso myös toinen malli.

Perustaulukko

Taulukot muodostuvat kolmesta osasta: itse taulukosta sekä taulukon riveistä ja soluista. Näitä jokaista osaa varten on omat taginsa.

<TABLE></TABLE>-tagit ovat taulukon aloitus- ja lopetustagit. Parametrilla BORDER kerrotaan taulukon reunaviivan paksuus pikseleinä. Parametri WIDTH kertoo taulukon leveyden. Leveys voidaan ilmoittaa joko %-lukuna tai pikseleinä. Jos WIDTH-parametriä ei kirjoiteta, muotoutuu taulukon leveys siihen kirjoitetun tekstin mukaan. Parametri CELLSPACING säätelee solujen välissä olevaa tilaa. Parametri CELLPADDING puolestaan määrittelee solun seinämien ja tekstin väliin jäävä tilan. Cellspacingille ja Cellpaddingille annetaan arvot pikseleinä.Koko taulukolle, sekä yksittäisille riveille ja soluille voidaan määritellä taustaväri kirjoittamalla BGCOLOR-parametri haluttuun tagiin. Parametrille annetaan RGB-väriarvo samalla lailla kuin sivun taustaväri määritellään.

<TR> </TR>-tageilla lisätää taulukon rivit.

<TD> </TD> -tageilla lisätään solut. Eri riveillä voi myös olla eri määrä soluja.

Taulukon otsikko

<CAPTION></CAPTION> -tagien avulla voidaan taulukolle antaa otsikko.Otsikon voi siirtää myös taulukon alle kirjoittamalla <CAPTION>-alkutagiin parametriksi ALIGN=BOTTOM.

Esimerkki:
<TABLE BORDER =1 WIDTH=50%>
<CAPTION>Taulukko-esimerkki </CAPTION>
<TR>
<TD WIDTH=50%>1. rivi 1. Solu</TD>
<TD WIDTH=50%>1. rivi 2. Solu</TD>
</TR>
<TR>
<TD WIDTH=50%>2. rivi 1. Solu</TD>
<TD WIDTH=50%>2. rivi 2. Solu</TD>
</TR>
<TR>
<TD WIDTH=50%>3. rivi 1. Solu</TD>
<TD WIDTH=50%>3. rivi 2. solu</TD>
</TR>
</TABLE>

NÄYTTÖ:

Esimerkki: <CAPTION ALIGN=BOTTOM>Taulukko-esimerkki </CAPTION>

Rivien ja solujen muotoilu

Tekstiä voidaan asetella soluissa, sillä sekä rivitageihin että solutageihin voidaan tehdä määrityksiä tekstin yms. asettelusta vaaka- ja pystysuunnassa. ALIGN-parametrillä vaikutetaan vaakasuunnassa tapahtuvaan asetteluun:
left - teksti tasataan vasempaan reunaan
right - teksti tasataan oikeaan reunaan c
enter - teksti keskitetään
VALIGN-parametrilla asetellaan tekstiä pystysuunnassa:
top - teksti asetetaan yläreunaan
bottom - teksti asetetaan alareunaan
middle - teksti asetetaan solun keskelle
COLSPAN -parametrillä voidaan solua venyttää vaakasuunnassa useamman sarakkeen kokoiseksi. ROWSPAN -parametri venyttää solua puolestaan pystysuunnassa. Huomaa, ettei ROWSPAN ja COLSPAN -parametrejä ei kannata yhdistää. WIDTH-parametrilla määritellään sarakkeen leveys. BGCOLOR-parametrilla voidaan yksittäisille riveille tai soluille määritellä taustaväri, kirjoittamalla ko. parametri haluttuun tagiin. Parametrille annetaan RGB-väriarvo samalla lailla kuin sivun taustaväri määritellään.

Esimerkki:
<TABLE WIDTH = 40% BORDER = 1>
<TR ALIGN=center>
<TD>WWW</TD>
<TD>HTML</TD>
<TD>INTERNET</TD>
</TR>
</TABLE>
Kaikki tämän rivin solujen tekstit keskitetään.
NÄYTTÖ:

<TABLE WIDTH = 40% BORDER = 1>
<TR>
<TD>WWW</TD>
<TD ALIGN=CENTER>2</TD>
<TD>3</TD>
</TR>
</TABLE>
Kun taas tässä vain rivin toisen solun teksti on keskitetty.

Esimerkki : <TD COLSPAN=2></TD>
Levittää solun kahden sarakkeen mittaiseksi.

Esimerkki : <TD ROWSPAN=3></TD>
Levittää solua kolmen rivin kokoiseksi.

Esimerkki:
a) <TABLE BORDER=1 BGCOLOR="#00FF00"> ... </TABLE>

b) <TABLE BORDER=1>
<TR>
<TD>tekstiä</TD>
<TD BGCOLOR="#00FF00">tekstiä</TD>
<TD>tekstiä</TD>
</TR>
</TABLE>