Lataa esitys
Esittely latautuu. Ole hyvä ja odota
1
Helsingin normaalilyseo Jani Kiviharju syksy 2016
Taulukot Helsingin normaalilyseo Jani Kiviharju syksy 2016
2
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
3
Esimerkki <table border="1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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>
4
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
5
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.
6
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
7
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>
8
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
9
Taustamateriaalia Tietoa ja esimerkkejä - Ominaisuusesittely - Yleistä - Yleistä - Home/Atk/html/Kurssimateriaaleja/Taulukot.html
Samankaltaiset esitykset
![1 Taulukot. 2 Miten taulukoita tehdään n WYSIWYG-editorien työkalut n HTML [border]… n Excel etc. Save as html.](/8/2027855/big_thumb.jpg "1 Taulukot. 2 Miten taulukoita tehdään n WYSIWYG-editorien työkalut n HTML [border]… n Excel etc. Save as html.>")
