Helsingin normaalilyseo Jani Kiviharju syksy 2016 Taulukot Helsingin normaalilyseo Jani Kiviharju syksy 2016
Taulukkokomennot Html-kielessä taulukko aloitetaan <table>-tagilla Jokainen taulukon rivi merkitään <tr>-tagilla (table row) Taulukon rivit koostuvat soluista, jotka merkitään <td>-tageilla (table data) <table> <tr> <td>rivi 1, solu 1</td> <td>rivi 1, solu 2</td> </tr> <tr> <td>rivi 2, solu 1</td> <td>rivi 2, solu 2</td> </tr> <tr> <td>rivi 3, solu 1</td> <td>rivi 3, solu 2</td> </tr> </table> rivi 1, solu 1 rivi 1, solu 2 rivi 2, solu 1 rivi 2, solu 2 rivi 3, solu 1 rivi 3, solu 2
Esimerkki <table border="1"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Harjoitussivu</title> </head> <body> <h1>Taulukoita</h1> <table border="1"> <tr><td>klo</td><td>YLE TV2</td><td>MTV3</td></tr> <tr><td>18:00</td><td>Hovimäki</td><td>Golfia</td></tr> <tr><td>19:00</td><td>Urheiluruutu</td><td>Seitsemän uutiset</td></tr> <tr><td>20:00</td><td>Peking tänään</td><td>Joensuun Elli</td></tr> <tr><td>21:00</td><td>Kriminalisti</td><td>Selviytyjät</td></tr> <tr></tr> </table> <br><br> <tr><td>1. solu</td><td>2. solu</td><td>3. solu</td></tr> <tr><td>Tällä rivillä on vain yksi solu</td></tr> <tr><td>Solu A</td><td>Solu B</td><td>Solu C</td></tr> <tr><td>Solu I</td><td></td><td>Solu II</td></tr> </body> </html>
Taulukkotehtävä 1 1. Kokeile taulukon luomista verkkosivulle lisäämällä johonkin aiemmin tekemääsi verkkosivuun taulukko Vähintään 2x3 tai 3x2 –kokoinen taulukko Esimerkiksi 2. Kokeile taulukkoa kehyksen kanssa ja ilman sitä <table border=”1”> ja <table> 3. Tutki, mitä tapahtuu, kun jätät yksittäisiä soluja pois taulukosta Käytä kehystä, niin näet tuloksen selvemmin Nimi Jani Kiviharju Osoite Opastinsilta 9 C 73 Sähköposti Jani.kiviharju@helsinki.fi
Taulukon muokkaaminen Taulukon reuna saadaan näkyviin border-attribuutilla <table border=”2”> Kehyksen paksuus 2 pikseliä Jos kehykselle ei aseteta arvoa, kehys ei näy selaimessa Taulukon sisällä olevaa tyhjää tilaa voidaan muokata Cellpadding-attribuutti määrää solun sisälle jäävän tyhjän tilan pikseleinä Cellspacing-attribuutti määrää solujen väliin jäävän tilan pikseleinä Taulukon, rivin tai solun kokoa muutetaan height- ja width-määreillä Width määrää taulukon/rivin/solun leveyden pikseleinä Height määrää taulukon/rivin/solun korkeuden pikseleinä Taulukolle, riville tai solulle voidaan määrittää myös taustakuva background-attribuutilla vastaavasti kuin body-elementillekin Huom! Luettavuus kärsii helposti taustakuvan myötä. Käytä tehosteita harkiten. Taulukon tai solun taustakuvasta on lähinnä hyötyä silloin, jos taulukkoa käytetään verkkosivun ladontaratkaisuna. Palaamme aiheeseen myöhemmin kurssin aikana.
Rivin tai solun muokkaaminen Rivin tai solun keskitystä muokataan tutulla align-attribuutilla Vaihtoehdot left, right ja center, toimii riville ja solulle <tr align=”center”> keskittää kaikkien rivin solujen tekstit Tekstin sijaintia voidaan muuttaa myös pystysuunnassa valign-attribuutilla Vaihtoehdot top, middle ja bottom, toimii riville ja solulle <td valign=”top”> sijoittaa solun tekstin solun ylälaitaan Taulukon vierekkäisiä soluja voidaan yhdistää, jottei taulukkoon jää aukkoja (vrt. dia 3) rowspan-attribuutti yhdistää halutun määrän soluja vaakatasossa colspan-attribuutti yhdistää halutun määrän soluja pystytasossa <td rowspan=”3”> Toimii vain solun määreenä rowspan 3
Sisäkkäiset taulukot Taulukoita voidaan asettaa sisäkkäinen (kuten lähes kaikkia html-elementtejä) Kuten taulukoiden taustakuvissa, myös sisäkkäisissä taulukoissa on riskinä selkeyden puute. Käytä harkiten! <table border=”1”> <tr> <td>Solu 1</td> <td>Solu 2</td> </tr> <tr> <td>Solu 3</td> <td> <table border=”2”> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> </tr> </table> </td> </tr>
Taulukkotehtävä 2 1. Avaa aiemmin tekemäsi verkkosivu kisa.html 2. Korvaa listat taulukkorakenteilla a) Kilpailijat taulukkoon, jonka sarakkeet ovat sijoitus, nimi ja tulos b) Sponsorit 2x3- tai 3x2-kokoiseen taulukkoon 3. Kokeile erilaisia taulukon muokkausmahdollisuuksia a) Kehyksen koko b) Cellpadding ja cellspacing c) Rivin tai solun keskittäminen d) Solujen yhdistäminen
Taustamateriaalia Tietoa ja esimerkkejä - http://www.w3schools.com/html/html_tables.asp Ominaisuusesittely - http://www.somacon.com/p141.php Yleistä - http://cs.stadia.fi/~lehtonen/html.html#taulukot Yleistä - http://www.norssi.helsinki.fi/ Home/Atk/html/Kurssimateriaaleja/Taulukot.html