HTML-OPAS/TAULUKOT Raahen Porvari- ja Kauppakoulu


	HTML-opas pääsivu HTML-tagit:Sivu Teksti Kuvat linkit Listat Lomakkeet Taulukot Kehykset * Marquee Muut Värikoodit *Sivun suunnittelu

Taulukot

Taulukoilla jaat kätevästi asiat eri palstoihin. Netscape:ssa on oma tag palstoitusta varten, mutta jos haluat että muutkin näkevät luomuksesi sellaisina kun olet ne tehnyt, niin käytä taulukoita.

Taulukon teko: <TABLE>.........</TABLE>
<TABLE>Aloittaa taulukon ja </TABLE> tulee viimeiseksi taulukossa. Kun lisäät TABLE-tagiin BORDER:n saat taulukolle reunukset. Voit myös määritellä paksummat reunat antamalla BORDER:lle jonkun arvon pikseleinä esim. <TABLE BORDER=5.

<CAPTION VALIGN=TOP>.....</CAPTION> Taulukon otsikko TOP:n sijaan voit käyttää myös BOTTOM:ia, jolloin otsikko tulee taulukon alapuolelle.
<CAPTION ALIGN=LEFT>.......</CAPTION> Otsikon sijainti vaakasuunnassa, voi olla myös CENTER tai RIGHT.

Voit yhdistää kummatkin Align-tagit samaan paikkaan: <CAPTION VALIGN=TOP ALIGN=CENTER>.....</CAPTION> Caption tulee taulukossa TABLE-tagin jälkeen.

<TR> Aloittaa taulukon rivin. TR ei tarvitse lopetus tagia
<TH>......</TH> Taulukon soluun tuleva otsikko. Eroaa TD:stä siinä, että solun sisältö on lihavoitu.
<TD>......</TD> Taulukon solun sisältö

Kun alat tekemään taulukkoa, niin tee aina yksi rivi kerralla ja sitten seurava rivi jne.

Perustaulukko:
<TABLE BORDER=1>
<CAPTION>otsikko</CAPTION>
<TR><TH>sarake 1</TH><TH>sarake 2</TH><TH>sarake 3</TH>
<TR><TD>2 rivi sarake 1</TD><TD>2 rivi sarake 2</TD><TD>2 rivi sarake 3</TD>
</TABLE>

otsikko
sarake 1	sarake 2	sarake 3
2 rivi sarake 1	2 rivi sarake 2	2 rivi sarake 3

Solujen koon muutos. Voit tehdä osasta soluista joko useamman sarakkeen levyisen tai sarakkeen korkuisen. <TABLE> <TR><TH COLSPAN=3>leveä otsikko</TH> <TR><TD>asia</TD><TD>asia</TD><TD>asia</TD> <TR><TD>asia</TD><TD>asia</TD><TD>asia</TD> </TABLE>

leveä otsikko
asia	asia	asia
asia	asia	asia

ROWSPAN-tagilla saat nostettua tietyn solun korkeutta. Ensimmäiselle riville kirjoitat halutun rivikorkeuden määrän ja jatkat rivin muiden solujen tekemistä normaalisti. Seuraavilla riveillä, niin kauan kun ROWSPAN on voimassa, jää riveiltä ensimmäinen solu pois.
<TABLE BORDER=1>
<TR><TH ROWSPAN=3>korkea otsikko</TH><TD>asia</TD><TD>asia</TD> <TR><TD>asia</TD><TD>asia</TD>
<TR><TD>asia</TD><TD>asia</TD>
</TABLE>

korkea otsikko	asia	asia
	asia	asia
	asia	asia

Lisää esimerkki taulukoita

<TABLE CELLSPACING=10> Määrittelee solujen välin pikseleinä.

<TABLE CELLPADDING=10> Määrittelee soluissa olevan sisällön etäisyyden solun reunoista.

<TR>, <TH>, <TD> tageihin voidaan lisätä ALIGN=LEFT, RIGHT tai CENTER, jolloin saadaan solujen sisällön tasaustapaa määriteltyä.

<TR>, <TH>, <TD> tageihin voidaan lisätä myös VALIGN=TOP, MIDDLE, BOTTOM tai BASELINE, jolloin saadaan solujen sisällön tasaustapaa pystysuunnassa määriteltyä.

Kuten kuvia voidaan myös koko taulukkoa tasata vasempaan, keskelle tai oikealle. <TABLE ALIGN=LEFT> Tasaa taulukon vasempaan reunaan ja teksti kiertää taulukon. <TABLE ALIGN=RIGHT> Tasaa taulukon oikeaan reunaan ja teksti kiertää taulukon

<CENTER> <TABLE> ....... ....... ....... </TABLE> </CENTER> Keskittää koko taulukon keskelle sivua. Voit Netscapelle määritellä sen kuinka paljon tyhjää tilaa jaa taulukon ylä, ala, vasemmalle ja oikealle puolelle. <TABLE VSPACE=5 HSPACE=5> jättää taulukon reunoille 5 pikseliä tyhjää tilaa.

Solun väri <TH BGCOLOR=”#FF0000”>
Taustakuva solulle (vain explorerissa) <TH BACKGROUND=”kuva.gif”
Reunuksen väri (vain exploreissa) <TABLE BORDERCOLOR=”#FF0000”>

	HTML-opas pääsivu HTML-tagit:Sivu Teksti Kuvat linkit Listat Lomakkeet Taulukot Kehykset * Marquee Muut Värikoodit *Sivun suunnittelu