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">  </style> CSS2: reunojen yhdistäminen <style type="text/css">  </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">  </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">  </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">  </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>