Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Koko: px
Aloita esitys sivulta:

Download "Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara"

Transkriptio

1 Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D Elina Ulpovaara 1. Taulukon rakenne: Tässä luentomateriaalissa käsitellään pientä taulukkoa, jonka sisältönä on tietoa väreistä. Elementtejä esitellessä ei ole erikseen mainittu lähes kaikille elementeille yhteisiä attribuutteja: id, class, lang, dir, title ja style. Jos elementti kuuluu Transitional DTD:hen mutta ei Strict DTD:hen, materiaalissa on maininta Loose.

2 Taulukko määritellään <table>-elementillä, jonka sisälle tulee taulukon varsinainen sisältö. <table>... taulukon sisältö Taulukko jaetaan riveihin <tr> </tr> ja soluihin. Soluja on kahta tyyppiä: otsikkosolut <th> </th> ja tietosolut <td> </td> HUOM. Jokaisella rivillä täytyy olla yhtä monta solua, koska muuten sarakkeista ei tule suoria. <table> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> Jokainen rivi alkaa <tr>-tagilla ja loppuu </tr>-tagiin. <table border="1"> <tr> <th>väri</th> <th>rgb-arvot</th> <th>heksadesimaali</th> </tr> <tr> <td>white</td> <td>255,255,255</td><td>#ffffff</td></tr> <tr> <td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr> <tr><td>magenta</td><td>255,0,255</td><td>#ff00ff</td></tr> <tr><td>cyan</td><td>0,255,255</td><td>#00ffff</td></tr> <tr><td>yellow</td><td>255,255,0</td><td>#ffff00</td></tr>

3 Table-elementti voi sisältää seuraavia elementtejä annetussa järjestyksessä. Elementti Merkitys Pakollisuus caption taulukon otsikko ei col tai colgroup sarakkeittain ryhmittelyä ei thead tfoot tbody riviryhmittelyä: otsikkorivit riviryhmittelyä: alaotsikkorivi riviryhmittelyä: sisältörivit ei ei vähintään yksi tbody- tai tr-elementti tr sisältörivi vähintään yksi tbody- tai tr-elementti <table>-elementin attribuutit: border kehykset arvoina numeroarvot <table border="1"> attribuutilla voi määrittää myös kehysten leveyden esim. border="2 Border-attribuutti tekee reunaviivan sekä koko taulukolle että kaikille soluille. CSS:n avulla voidaan asettaa reunaviivat erikseen sekä koko taulukolle, että kaikille soluille. CSS:n ehdotukset reunaviivalle border-style - reunaviivan tyylli border-width - reunaviivan leveys border-color - reunaviivan väri

4 <style type="text/css"> <!-- table {border: 3px dotted #FF0033} th, td {border: solid #000000} --> </style> CSS2: reunojen yhdistäminen <style type="text/css"> <!-- table {border: solid #000000; border-collapse:collapse} th, td {border: solid #000000} --> </style> IE 6.0 Firefox

5 cellpadding täytteen paksuus soluissa eli kasvatetaan solujen sisällön etäisyyttä reunoista arvoina pituusarvot <table cellpadding="5" border="1"> CSS: Padding-ominaisuudella voidaan määrittää täytteen paksuus joka suunnalle erikseen. td {padding-left: 5px; padding-top: 6px; cellspacing padding-right: 7px; solujen etäisyys toisistaan padding-bottom: 8px} arvoina pituus arvot <table cellpacing="5" border="1"> Cellpaddign vaikuttaa solun sisällön ja solun reunan väliseen tilaan. Cellpacing vaikuttaa solujen väliseen tilaan.

6 rules määritellään, mitkä kehykset näkyvät eli solujen reunaviivat arvoina: none, groups - ryhmäkehykset, rows - rivikehykset, cols - sarakekehykset tai all <table rules="rows" border="1"> frame määrittää, millä eri taulukon sivuilla on kehykset Frame-attribuutin arvot: Muista CSS:n border-ominaisuus! void : ei reunoja above : yläreuna näkyy below : alareuna näkyy hsides : ylä- ja alareunat näkyvät vsides : oikea- ja vasenreuna näkyvät lhs : oikea reuna näkyy rhs :vasen reuna näkyy box : kaikki reunat näkyvät border : kaikki reunat näkyvät summary taulukon selitys <table summary= Värien nimet, rgb-arvot ja heksadesimaalit"> width taulukon leveys arvot joko mittayksikköinä tai prosentteina Jos taulukolle ei anna leveyttä, niin se varaa sisällön mukaan tarvittavan tilan. CSS: Width-ominaisuus ehdottaa taulukolle leveyden arvoina mittayksiköt tai prosentit. table {width: 100%} align (Loose): Oletusarvona taulukko sijoittuu sivun vasempaan reunaan, muu teksti asettuu taulukon ylä- tai alapuolelle arvot left/right tasaa taulukon vasempaan/oikeaan marginaaliin

7 Taulukon keskittäminen CSS:n avulla: Tapa 1: ympäröi taulukko <div>-elementillä ja anna sille text-alignominaisuus <div class= keskelle > <tähän taulukko> </div> <style type="text/css">.keskelle {text-align: center} table {text-align:left} </style> Tapa 2: <style type="text/css"> <!-- table {margin-left:auto; margin-right:auto} --> </style> Huom. Text-align-ominaisuus tableelementillä vaikuttaa taulukon sisällön sijaintiin soluissa eikä itse taulukkoon. 2. Taulukon otsikko <caption> <caption>-elementillä annetaan taulukolle otsikko. Elementti sijoittuu taulukon sisälle <table>-elementin ensimmäiseksi elementiksi. Elementin sisältönä on tekstiä tai tekstitason merkkausta. <table border="1"> <caption>värikoodeja</caption> <tr><th>väri</th> <th>rgb-arvot</th><th>heksadesimaali</th></tr> <tr> <td>white</td> <td>255,255,255</td><td>#ffffff</td></tr> <tr> <td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr>

8 <caption>-elementin attribuutit: align (Loose) sijainti suhteessa taulukkoon arvot: top, botton, left tai right selaimet tukevat vain arvoja top ja bottom CSS:ssän vastaava ominaisuus on caption-side arvot: top, bottom, left, right, inherit tuettu erittäin huonosti Käytä <caption>-elementille tavallisia CSS-ehdotuksia. <style type="text/css"> <!-- caption { text-align: left; font-family: "Times New Roman", serif; color: #FF0000;} --> </style> 3. Taulukon rivi: <tr> <tr>-elementti ilmoittaa yhden taulukon rivin. Elementti voi sisältää <th>- ja/tai <td>-elementtejä Attribuutit: align vaakasuora tasaus soluissa koko rivillä arvot: left, center, right, justify CSS: Käytä text-align -ominaisuutta. tr {text-align:left} bgcolor (Loose) taustaväri värikoodit CSS: tr {background-color:white}

9 valign pystysuoratasaus arvoina: top, middle, bottom tai baseline CSS: vertical-align -ominaisuudella taulukon yhteydessä on seuraavat arvot: top - solun sisältö on yläreunassa bottom - solun sisältö on alareunassa middle - solun sisältö on keskellä 4. Taulukon solut: <th> ja <td> <th>-elementti on otsikkotietoja varten ja <td>-elementti taulukon varsinaista tietoa varten. Useat selaimet lihavoivat <th>-elementit. Oletusarvoisesti otsikkosoluissa olevat tiedot keskitetään sekä vaakaettä pystysuunnassa ja muiden solujen tiedot keskitetään pystysuunnassa. <table border="1"> <caption>värikoodeja</caption> <tr><th>väri</th> <th>rgb-arvot</th> <th>heksadesimaali</th></tr> <tr><td>white</td> <td>255,255,255</td> <td>#ffffff</td></tr>

10 Solujen attribuutit: align vaakasuora tasaus soluissa koko rivillä arvot: left, center, right, justify CSS: Käytä text-align -ominaisuutta. td {text-align:left} bgcolor (Loose) taustaväri värikoodit CSS: td {background-color:white} height (Loose) arvot pituusmittoina CSS: Elementin height-ominaisuus asettaa sisällön korkeuden. Yleensä ei kannata käyttää vaan antaa korkeuden muotoutua sisällön mukaan. td {height: 200px} valign pystysuoratasaus arvoina: top, middle, bottom tai baseline CSS: vertical-align -ominaisuudella taulukon yhteydessä on seuraavat arvot top - solun sisältö on yläreunassa bottom - solun sisältö on alareunassa middle - solun sisältö on keskellä baseline - asettaa solun ensimmäisen rivin samalla rivillä olevan solun ensimmäisen rivin mukaan

11 width (Loose) solun leveys taulukon leveydestä riittää antaa yhteen soluun sarakkeella arvot pituusmittoina CSS: Width-ominaisuus ehdottaa solulle leveyden arvoina mittayksiköt tai prosentit. td {width: 50%} colspan usean sarakkeen yli ulottuva solu rowspan usean rivin yli ulottuva solu

12 Taulukko kirjoitetaan rivikerralla <table border="1"> 1. rivi <tr> <th colspan="4">väreistä</th></tr> 2. rivi <tr> <th colspan="2">päävärit</th> <th colspan="2">välivärit</th> </tr> 3. rivi <tr> <td rowspan="2">red</td><td>255,0,0</td> <td rowspan="2">magenta</td><td >255,0,255</td></tr> 4. rivi <tr> <td>#ff0000</td><td>#ff00ff</td></tr> <tr> <td rowspan="2">green</td><td>0,255,0</td> <td rowspan="2">cyan</td><td>0,255,255</td></tr> <tr> <td>#00ff00</td><td>#00ffff</td></tr> <tr> <td rowspan="2">blue</td><td>0,0,255</td> <td rowspan="2">yellow</td><td>255,255,0</td></tr> <tr> <td>#0000ff</td><td>#ffff00</td></tr>

13 5. Taulukon rivien ryhmittely: <thead>, <tbody>, <tfoot> Rivien ryhmittely selkeyttää taulukkoa ja tekee helpommaksi tehdä taulukon eri osille erilaiset muotoilut. <table> <caption>...</caption> <thead>...</thead> otsikkorivit <tbody>...</tbody> taulukon tietosisällön ryhmittäminen <tfoot>...</tfoot> taulukon loppuun tulostuva otsikkorivi tai ns alatunniste esitetäänn <thead>-elementin jälkeen ennen <tbody>-elementtejä <thead>...</thead> <tfoot>...</tfoot> <tbody>... </tbody> <tbody>...</tbody>. <table border="1"> <caption> Värikoodeja</caption> <thead> <tr> <th>väri</th><th>rgb-arvot</th><th>heksadesimaali</th></tr> </thead> <tfoot> <td colspan="3">kuva 3.14</td> </tfoot> <tbody> <tr><td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr> </tbody> <tbody> <tr><td>magenta</td><td>255,0,255</td><td>#ff00ff</td></tr> <tr><td>cyan</td><td>0,255,255</td><td>#00ffff</td></tr> <tr><td>yellow</td><td>255,255,0</td><td>#ffff00</td></tr> </tbody>

14 <style type="text/css"> <!--.paavarit {background-color: #FFFFCC;}.valivarit {background-color: #99FFFF;} --> </style> <tbody class= paavarit > <tr><td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr> </tbody> <tbody class= valivarit > <tr><td>magenta</td><td>255,0,255</td><td>#ff00ff</td></tr> <tr><td>cyan</td><td>0,255,255</td><td>#00ffff</td></tr> <tr><td>yellow</td><td>255,255,0</td><td>#ffff00</td></tr> </tbody>

15 6. Taulukon sarakerakenne: <col>, <colgroup> <colgroup>- ja <col>-elementtien avulla voidaan muodostaa sarakkeista ryhmiä. Ryhmiä määritellessä täytyy tietää, montako saraketta ryhmään kuuluu. Tämä annetaan <colgroup>-elementille span-attribuutilla tai käyttämällä <col>-elementtiä. <col>-elementille on määritelty align- ja valign-attribuutit sisällön tasaamista varten ja width-attribuutti määrittämään sarakkeen leveyttä. span-attribuutilla ilmaistaan yhteen kuuluvien sarakkeiden lukumäärä. <table border="1"> <caption>värikoodeja</caption> <colgroup> <col width="50%"/> <col align="center" span="2"/> 1. Sarakeen leveys on 50% koko taulukosta </colgroup> <thead> 2. ja 3. sarakkeen tiedot <tr> keskitetään. <th>väri</th><th>rgb-arvot</th><th>heksadesimaali</th>

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4 51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja,

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

1. Lohkon korkeus ja leveys

1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Ulkoasun muokkaus CSS-tiedostossa

Ulkoasun muokkaus CSS-tiedostossa Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

CSS tyyliä sivuihin osa II. Elina Ulpovaara

CSS tyyliä sivuihin osa II. Elina Ulpovaara CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration

Lisätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Digitaalisen median tekniikat xhtml Harri Laine 1

Digitaalisen median tekniikat xhtml Harri Laine 1 Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan

Lisätiedot

TAULUKOINTI. Word Taulukot

TAULUKOINTI. Word Taulukot Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...

Lisätiedot

HTML-ohjeet. Sivun perusrakenne