ohjeita web-sivuston tekijälle
Taulukot ovat luotu HTML-kieleen, jotta sillä voitaisiin esittää helposti perinteisesti taulukoihin ladottua informaatiota. Ajan myötä (ja HTML-kielen luonteen muututtua) sitä on alettu käyttää myöskin WWW-sivujen ulkoasun määrittämiseen. Siihen se soveltuukin mainiosti, saadaanhan sen avulla tavaraa vierekkäin varsin helposti.
Taulukko koostuu riveistä ja niissä olevista soluista.
Yksinkertaisin 2 riviä ja 2 solua niissä sijaitseva taulukko (eli yhteensä 4 solua) näyttää HTML-koodiltaan seuraavalta:
<table> <tr> <td> Solun yksi sisältö </td> <td> Solun kaksi sisältö </td> </tr> <tr> <td> Solun yksi sisältö </td> <td> Solun yksi sisältö </td> </tr> </table>
Koodia on hieman selvennetty sisentämällä. Tarkastellaampa sitä hieman tarkemmin. Taulukko alkaa aina <table>-tagilla. Sen jälkeen aloitetaan ensimmäinen rivi <tr>-tagilla. Mikäli riville tulee kaksi solua, kuten tässä, tulee <td>(solu alkaa), sisältö ja </td> (solu loppuu) koodi kahdesti ennen ensimmäisen rivin lopettamista </tr>- tagilla.
Luodaan edellisen esimerkin pohjalta dokumentti, jossa olevassa taulukossa on kolme riviä ja jokaisessa niissä kolme solua. Selvennetään sitä kuitenkin määräämällä BORDER-attribuutilla (voimme antaa myös lukuarvoja pikseleinä; border="4" esimerkiksi) taulukon reunat näkyviin:
<HTML> <HEAD> <TITLE>Taulukko-esimerkki 1</TITLE> </HEAD> <BODY> <H1>Taulukot WWW-sivuilla</H1> <p>Yksinkertainen 3x3 taulukko</p> <table border> <tr> <td>Solun yksi sisältö</td> <td>Solun yksi sisältö</td> <td>Solun kaksi sisältö</td> </tr> <tr> <td>Solun yksi sisältö</td> <td>Solun yksi sisältö</td> <td>Solun kaksi sisältö</td> </tr> <tr> <td>Solun yksi sisältö</td> <td>Solun yksi sisältö</td> <td>Solun kaksi sisältö</td> </tr> </table> </BODY> </HTML>
Selain näyttää dokumentin seuraavasti:
Voimme helposti muuttaa taulukon leveyttä antamalla <TABLE>-tagille attribuutin WIDTH. Arvo voi olla joko prosentteja sivun leveydestä tai pikseleitä.
Teemme seuraavat muutokset edelliseen esimerkkiin:
<table border width="100%">
ja kopioimme toisen taulukon, johon muutamme:
<table border width="300">
Valmiina dokumentti näyttää seuraavalta selaimessa:
Koko taulukon voi tasata sivun suhteen käyttämällä <TABLE>-tagissa attribuuttia ALIGN. Mahdollisia arvoja ovat center (keskellä) ja right (oikealla).
Nytkin esitämme vain muutokset <TABLE>-tagiin:
Dokumentti näyttää selaimessa seuravalta:
Määritämme yksittäisten solujen korkeuksia ja leveyksiä. Muista, että koska taulukon rivit ovat aina suorat, vaikutusaluea saattaa kasvaa kattamaan koko riviä/saraketta (riippuen siitä kumpaa muutetaan).
Käytettävissä on width- ja height-attribuutit. Niitä voidaan myös käyttää <TABLE>- ja <TR>-tageissa. Näitä mahdollisuuksien ei kuitenkaan oleellisesti saman toteutustavan vuoksi käydä nyt läpi.
Luomme tämän dokumentin esittelemään näitä mahdollisuuksia:
<HTML> <HEAD> <TITLE>Taulukko-esimerkki 4</TITLE> </HEAD> <BODY> <p>3x3 taulukko</p> <table border> <tr> <td>Solun sisältö</td> <td width="150">Solun sisältö</td> <td>Solun sisältö</td> </tr> <tr> <td>Solun sisältö</td> <td height="100">Solun sisältö</td> <td>Solun sisältö</td> </tr> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> </table> </BODY> </HTML>
Selain näyttää dokumentin seuraavasti:
Usein tulee tarvetta tasata solujen sisältöä. Vakiostihan ne ovat korkeussuunnassa keskellä ja leveyssuunnassa vasemmalla. Tarjolla on <TD>-tagiin tulevat attribuutit VALIGN ja ALIGN.
Mikäli edellä olevan esimerkin jokaiseen <td>-tagiin lisätään attribuutit valign="top" align="center", näyttää se seuraavalta:
VALIGN-attribuutille voidaan antaa seuraavat arvot:
Esimerkkinä seuraava dokumenti:
<HTML> <HEAD> <TITLE>Taulukko-esimerkki 6</TITLE> </HEAD> <BODY> <p>3x1 taulukko</p> <table border> <tr> <td height="100" valign="top">TOP</td> <td height="100" valign="middle">MIDDLE</td> <td height="100" valign="bottom">BOTTOM</td> </tr> </table> </BODY> </HTML>
Selain näyttää sen seuraavasti:
Huomaa, että solut ottavat ilman lisämääreitä tarvitsemansa tilan.
Vastaavasti ALIGN-attribuutille voidaan antaa seuraavat määreet:
Tähän mennessä olemme käsittelleen taulukoita, joissa jokaiselle rivillä on saman verran soluja. Nyt tutkimme taulukoita, joissa yksi tai useampi solu ylittää rajansa.
Tämä käy loppujen lopuksi melko yksinkertaisesti käyttämällä <TD>-tagissa colspan- ja rowspan-attribuutteja.
Yksinkertainen esimerkki taulukosta, jonka pohjana on normaali 3x3-taulukko:
<HTML> <HEAD> <TITLE>Taulukko-esimerkki 7</TITLE> </HEAD> <BODY> <table border> <tr> <td height="100" colspan="3"> Solun sisältö viekin kolmen sarakkeen tilan! </td> </tr> <tr> <td width="100" rowspan="2"> Solu onkin kahdesti korkeampi! </td> <td height="100" width="100"> Solun sisältö </td> <td height="100" width="100"> Solun sisältö </td> </tr> <tr> <td height="100" width="100"> Solun sisältö </td> <td height="100" width="100"> Solun sisältö </td> </tr> </table> </BODY> </HTML>
Solun kooksi määriteltiin 100x100-pikseliä, vain solut, jotka on määritelty viemään useamman solun tilan, on jätetty ilman näitä määreitä.
Selaimessa taulukko näyttää seuraavalta:
Taulukon kehyksen viemää tilaa voidaan kontrolloida monella tavalla. Ensinnäkin voidaan määritellä kehyksen paksuus. Se voidaan myös jättää pois, BORDER-attribuuttia ei tällöin käytetä lainkaan <TABLE>-solussa.
Lisäksi voimme määrittää solujen väliin jäävän tilan antamalle ko. arvon pikseleinä CELLSPACING-attribuutille. Myös kehyksen ja solun sisällön välimatka voidaan antaa pikseliarvona CELLPADDING-attribuutille. Tästä seuraa se, että <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">-tagilla alkava taulukko vie kaikkein vähiten tilaa.
Tutkikaamme seuraavaa esimerkkiä:
<HTML> <HEAD> <TITLE>Taulukko-esimerkki 8</TITLE> </HEAD> <BODY> <p>Mahdollisimman kapoinen 3x3 taulukko, huomaa, että kehys ei näy.</p> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> </table> <p>Huomattavasti enemmän tilaa vievä 3x3 taulukko</p> <TABLE BORDER="5" CELLSPACING="10" CELLPADDING="10"> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> <tr> <td>Solun sisältö</td> <td>Solun sisältö</td> <td>Solun sisältö</td> </tr> </table> </BODY> </HTML>
Selain näyttää sen seuraavasti:
Ylläolevia taulukoita voisi kommentoida hieman. Ylemmästä eri solut eivät kunnolla näy, joten harkitse kahdesti niiden käyttämistä. Tietenkin, mikäli käytät taulukkoa sivun taiton apuna, kehyksen näkyminen on haitaksi monissa tapauksissa.
Jälkimmäinen taulukko on taasen harvinaisen ruma. Harkitse kolmesti, ennen kuin näkyvästi levennät kehystä.
Voit antaa BGCOLOR-attribuutin (vastaa koko sivun taustavärin käyttöä) <TABLE>-, <TR>- ja <TD>-tageihin. Näin voit tarpeen vaatiessa värittää haluamallasi tavalla taulukkoa.
Seuraava sivu: Kehykset.
Todella kätevät mutta vielä kun saisi vähä rivejä lisää alaspäin.
15.11.2003 23:03mie en ymmärrä mistään mittää... :(
20.4.2004 14:29Kätsiä kätsiä.Muuten hyvä, vois vain lisätä, et esim. tekstit saa hyvin järjestykseen, ku laittaa ne taulukkoon ja muuttaa reunat läpinäkyväks.
20.4.2004 23:21Tekstin ulkoasun esittäminen kannattaa tehdä tyylipohjilla. Taulukot ovat käteviä taulukkomuotoisen datan esittämisessä.
1.7.2004 11:25Hmm... Olen käyttänyt taulukoita sivuillani, mutta menestys on ollut "huono". Olen määrittänyt käytettävän fontin asetukset komennolla <font ...> </font>. Muuten teksti muuttuu määrittelemäkseni, mutta taulukon sisällä muutosta ei tapahdu (noh, fontti vaihtuu, mutta koko ja väri eivät ole määrittelemiäni). Kokeilin myös epätoivoisesti laittaa tuota <font> -komentoa taulukon koodin "sisään", mutta sekään ei korjannut ongelmaani... Mikä mättää?
1.7.2004 13:46Kyllä font-elementin pitäisi vaikuttaa jos se on taulukon soluelementtien sisällä. Selainten välillä voi olla eroa, kokeile aina eri selaimilla jos jokin ominaisuus ei toimi vaikka koodi on mielestäsi standardia ja kunnossa.
Unohda kuitenkin font-elementti kokonaan. Helpoiten onnistunet määräämällä tyylipohjilla kaikille elementeille tietyn peruskirjasinlajin:
<style type="text/css">
* {
font-family: Arial,Helvetica,sans-serif;
}
</style>
Ylläolevan voi sijoittaa suoraan head-elementin sisään tai ulkoiseen tyylitiedostoon ilman style-elementtimerkintöjä. Lisätietoa sijoituksesta:
http://www.sivut.org/html/oppaat/tyylipohjat.php#tyylimaaritysten_sijainti
Tosi hyvät sivut! Helpotti mun työtä paljon.
23.9.2004 13:13Itseäni on askarruttanut, että eikös DIV:jä käyttämällä pysty tekemään ihan toimivan ja täysin saman kuin myös table:lla?
Ja olisiko divejen käytöstä jossain jonkinlaista opasta?
Kyllä tiedät ainakaan ilman CSS:ää se ei onnistu mutten saanut onnistumaan sen kanssakaan.
Esim:
<table>
<tr>
<td>logo</td>
</tr>
<tr>
<td>valikko</td>
<td>sisältö</td>
</tr>
</table>
jos tosta joku osai tehä _pelkästään_ divejä ja css:ää käyttämällä saman, eli ilman table:a?
kiitokset jos joku vaivautuu :)
Palstojen luominen tekniikalla div+css on esitetty mm. täällä: http://www.sivut.org/html/vinkit/palstoja_tyylipohjilla.php
29.9.2004 05:35Kuinka muutetaan kehyksen väriä?
13.10.2004 22:58Osaako joku sanoa miksei tuo valign="middle" toimi, jos height="100%", eli määritetty prosentteina eikä pixeleinä?
24.10.2004 14:20öö...mitä tällanen koodi tarkottaa ku on </script>
ku otin mallia yhestä sivusta ja oon muokannu sitä ni toi on vaivannu...
Semmoinen juttu askarruttaa mieltä, että voiko kahta taulukkoa laittaa vierekkäin? Ja jos on mahdollista, niin haluaisin tietää miten.
10.11.2004 13:04Taulukkoja voi toki latoa vierekkäin.
Ennen käytettiin varsin epäeettistä tekniikkaa: ensin pohjalle asetettiin kaksisoluinen taulukko, jonka vierekkäisiin soluihin laitettiin varsinaiset taulukot.
Nykyään käytetään tyylipohjia, jotka on tyylikäs, puhdas ja muodollisesti oikea ratkaisu.
http://www.sivut.org/html/vinkit/palstoja_tyylipohjilla.php
[quota]
Osaako joku sanoa miksei tuo valign="middle" toimi, jos height="100%", eli määritetty prosentteina eikä pixeleinä?
[/quota]
laita että valign="center" niin pitäis toimia.
niinkun joku tuolla jo kysy... että miten saa kehyksen väriä muutettuun???
19.3.2005 16:18Pitääkö kaikkiin HTML -koodeihin laittaa se " -merkki?
8.4.2005 15:57sivut ovat hyvät
3.6.2005 12:01Jos sinä css kieltä aiot opiskella ni siitä vaan se on hyvä kieli ja tuskin kukaan vaivautuu ja myös iframe kannattaisi opetella.
Itse tein sivupohjan tablella ja iframella sillä css on myöskin hyvä, mutta siinä menee aikaa että kaikki virheet korjautuu...
iframe on kaiken alu ja loppu sano minun sanoneen...
mulla olis sellainen ongelma en tiedä onko ollut muilla että pitäis saada tehtyy taulukko joka on tän näköinen:
--------------------------------------
| | |
| | |
| | |
| |--------------------------|
| | |
| | |
|----------| |
| | |
|----------| |
| | |
|----------| |
| | |
|----------| |
| | |
|----------| |
| | |
|----------| |
|__________|__________________________|
eli niin kuin ton näköinen. Mä oon saanut kaikki kohdalleen mut ton ison keskiruudun ja sitä ylläolevan ruudun väliin jää ylä oikealla olevan ala osan verran tilaa. Jos et käsitä niin käy täällä kattoo mitä tarkoitan http://hellsing.se8.org . Se on keskeneräinen kuten sanoin mutta huomaat siten ongelman jos et ymmärtänyt mitä sanoin. Ja tossa kuvassa näkyy minkälainen siitä pitäis tulla. Auttais todella paljon jos tietäisit keinon.
sori ei näköjään kuva onnistunut
21.9.2005 16:55en tarttekkaan apua enään kiitos
3.10.2005 22:14Miten saa tehtyä pelkän taulukon? Siis jossa ei ole mitään soluja, vaan pelkkä tyhjä taulukko.
10.11.2005 05:40öö miten saisin yksi soluiseen taulukkoon vierityspalkin jos teksti alkaa menemään siitä talukosta yli??
10.11.2005 06:29siis borderissa ei table :D
16.3.2006 20:21Voiko taulukon taustaksi laittaa kuvan?
22.3.2006 13:37Miten pystyy laittamaan vierekkäin kaksi taulukkoa.. ei siis 1 iso taulukko jossa 2 solua, vaan kaksi eri taulukkoa vierekkäin?
5.4.2006 12:20Kiitos hyvistä sivuista!
Voiko linkin laittaa avautumaan taulukon solussa? Jos ei, niin miten sivu pitäisi jäsennellä, kun en halua käyttää frameja?
Eikö taulukon sijainnin paikkaa voi määrittää pixeleinä tai prosentteina. Huono lisätä vaan ylös keskelle tai alas.
13.4.2006 20:52Kuinka saadaan taulukkoleiskalla onnistumaan html-sivujen aukeaminen määrättyyn taulukon soluun? Onko se mahdollistakaan? Ideana siis se, että sivun muun komponentit pysyvät kokoajan "paikoillaan", mutta linkeistä klikkaamalla avatuisivat muut sivut tuohon tiettyyn taulukon soluun. Etukäteen kiitos asiantuntijalle!
26.4.2006 09:30Jos kerta ulkoasu kannattaa tehdä tyylipohjilla, niin miten tyylipohjia käyttämällä saan tekstin alkamaan aina resoluutiosta riippumatta keskitetyn logoni alta. Jos pistän vaikkapa koulun koneella tekstin alkaamaan marginaalien avulla oikeasta kohdasta, on se kotona aivan eri paikassa paremman resoluution takia. Taulukoillahan tuo hoituu, mutta miten saman voi tehdä tyylipohjilla ?
17.5.2006 14:47Onko mahdollista tehdä niin, että tekee taulukon jossa on 2 riviä ja yksi kolumni, jossa ylempään tulee kuva ja alempaan kuvateksti ja taulukon ulkopuolelle tulee tekstiä joka kiertää taulukon ylhäältä, sivulta (oikealta tai/ja vasemmalta) ja alhaalta?
10.6.2006 19:02Vsnkeläin
Tuota samaa haluisin myös minä tietää!
Palstat pomppii päin vittua taulukot ei.
ptsoftware: voi laittaa laitat sen komennon vain samalla tavalla kuin bodyynkin <table backrground="kuva.jpg">
17.7.2006 21:42Mitenkä pystyn vaihtamaan taulukon väriä?
18.7.2006 22:19Miksi en saa tekstiä taulukon alle?????
24.7.2006 17:11Miten taulukon teksteissä olevan fontin värin saa punaiseksi?
30.9.2006 10:51Hmm.. en tajua tota colspan ja rowspan juttua..
Voisko joku auttaa siinä, jos joo ni lisäkkää mun mese = poikaz93@hotmail.com..
mul ei näy toi! Mozillan takii
5.11.2006 20:13Sain juuri framet laitettuani sivuilleni mutta kysymys kuuluukin: miten pystyn laittamaan/tekemään linin esim. taiteeseen?
Olisin todella kiitollinen jos tähän vastattaisiin!
Oli muuten selkeesti neuvottu toi taulukkosetti kokonaisuudessaan, mulle aukes koko homma iha uudella tavalla. Loistavaa työtä!
27.11.2006 22:53kun minulla on siivulla taulukko jossa on linkkejä niin mitenkä voisi tehdä sillain että kun linkkiä painaa se aukeisi samalle sivulle viereiseen laatikkoon ???
16.12.2006 13:23omg lol wtf
2.1.2007 10:05Ainoa ongelmani on, että haluan taulukkoni näyttämään tältä:
_________
|_________|
|____|____|
Mutta haluan jokaisen solun olevan mitoitettavissa pikselein, että saan niihih juuri oikean kokoiset kuvat. <.<
Ainoa ongelmani on, että haluan taulukkoni näyttämään tältä:
_________
|_________|
|____|____|
Mutta haluan jokaisen solun olevan mitoitettavissa pikselein, että saan niihih juuri oikean kokoiset kuvat. <.<
miten saisi taulukon "borderin" vain tavalliseksi ohkaiseski mustaksi viivaki
26.1.2007 14:40jecce: Näin se käy.
<table color="000000" border="1" cellspacing="0" cellpadding="0">
Sellaista olisin kysynyt, että pystyykö taulukon solun koon lukitsemaan, jolloin esim. tekstiä lisäämällä solu ei laajene alaspäin?
28.2.2007 19:48miten taulukon paikan pystyy määrittämään vertikaalisesti eli pystysuunnassa?
29.3.2007 10:39Voiko noita taulukon bordereita saada jotenki eri näköseks. esim pelkkä musta viiva tai katkoviiva?
31.3.2007 16:51Hmm... Kaikki muu ok, mutta miten voisin värittää yhden solun haluamallani värillä? Löysin kyseisen värin (sininen) netistä ja tallensin koneelleni... Mitä sitten?
Kiitos!
<td bgcolor="red">
korvaat tuon red sillä haluamallasi värillä ;)
tuolla tavalla toimii ainaki
Voiko taulukon sisään laittaa toisen tauluko
10.4.2007 10:30kyllä voipi ;)
20.4.2007 14:05Huippu sivut kiitos!
Mutta sellainen kysymys heräsi, että kun minulla on taulukko, jonka sisällä on erilaisia/kokoisia soluja. Kun määrittelen "border=0" taulukolle/soluille ei siis tule reunoja. Mutta miten saan määriteltyä tyyli-tiedostolla, että koko taulukon yläreunassa ja oikeassa reunassa olisi "border=1"? Ymmärsikö kukaan... En halua taulukon sisällä olevien solujen reunuksia näkymään.
toi toimii
26.4.2007 12:41Kannattaa lukea noita tyyli oppaita. niistä löytyy vastaus
23.5.2007 15:34Miten saan solun raamin väriä muutettua. En halua joko taulukon vaan taulukon sisällä olevvien solujen raamit erivärisiksi
1.7.2007 01:09Hei!
Olen saanut täältä paljon apua näiden tekoon.
Voiko taulukon paikkaa määrittää muuten kuin oikalle, vasemmalle tai keskelle??
-Kiitos!
Miten saan taulukon reunat (ei keskiosa, vaan reunat) väritettyä jollain värillä?
16.10.2007 13:22Hello World!
ihan ok ohjeet.
aloittelijalle nuo esimerkit näyttävät jotenkin
aikansa eläneiltä ja vaikeilta "säätää" oikeanlaiseksi. taulukot on kuitenkin html:n
hienoin ominaisuus ja niiden käytössä on hyvä
huomioida graafisten elementtien käytön antamat
mahdollisuudet. Eli ei muuta kuin css tyyliä ja
vaikkapa GIF "kalvoa" opiskelemaan :)
vittu että on paskat sivut eihä täällä oo muutaku samaa asiaa jankattu 15 sivulle
9.2.2008 14:35Siis ensiksi jos haluatte haukkua muita älkää tehkö sitä täällä tai todistakaa oikeasti olevanne "parempia" niinkuin annatte ymmärtää, tämä sivusto on todella hyödyllinen ja opettavainen.
12.2.2008 15:20kun koitan tehdä isomman taulukon johon saisi tekstiä jo koodina on
<BODY background="starsnew.gif">
<table align="center" border>
<tr><tr bgcolor= #cfcfcf><td height="80" valign="top"></td> </tr>
</table>
niin taulukosta tulee tämän näköinen
_ _________
|| |
|| |
|| |
|| |
||_________|
vaikka sen pitäisi olla tämän näköinen
___________
| |
| |
| |
| |
|__________| eli missä vika? :o
joo unohtakaa tuo äskeinen.. jotenkin toi viesti meni ihan mössöksi :S
15.2.2008 18:46tuotaas onko mitään järkee tehdä sivun oikeeseen laitaan taulukko tyylillä ns.päävalikkoa..
jos siinä on jotain järkee niiin miten saisin taulukot näin
|
| OTSIKKO
|
[---] | |--------------------------------|
[---] | | |
[---] | | |
[---] | | |
[---] | | |
[---] | | |
________| | |
| |
|--------------------------------|
| |
| |
| |
| |
|________________________________|
joo ei mtn ku tää sotki tän noin _S
18.4.2008 14:06nörrrriiiiitttt!!!! <3
18.4.2008 14:07PANEN KAIKKIA MIHEIÄ PERSEESEEN! ;p
18.4.2008 14:08en oikeen osaa kirjoittaa.. -.- tarkotin *miehiä
28.4.2008 20:36HALUAISIN KALENTERIN
MITEN SEMMOSEN VOIS TEHDÄ?