Tietojen taulukointitMyn1 Tietojen taulukointi Web-selaimissa HTML-taulukoita ei voida käsitellä samalla tavoin kuin esim. Excel-tyyppisissä ohjelmissa.

Esitys aiheesta: "Tietojen taulukointitMyn1 Tietojen taulukointi Web-selaimissa HTML-taulukoita ei voida käsitellä samalla tavoin kuin esim. Excel-tyyppisissä ohjelmissa."— Esityksen transkriptio:

1 Tietojen taulukointitMyn1 Tietojen taulukointi Web-selaimissa HTML-taulukoita ei voida käsitellä samalla tavoin kuin esim. Excel-tyyppisissä ohjelmissa. Kyse on siis vain tiedon kiinteästä kuvaamisesta taulukkona. Lisäksi selain saattaa esim. tulostuksessa katkaista taulukon onnettomasti ”keskeltä riviä”. HTML-taulukko koostuu riveistä jotka jakautuvat soluihin. Rivit merkataan tr -elementillä, solut puolestaan tr - elementin sisällä olevilla td -elementeillä.

2 Tietojen taulukointitMyn2 Aloitetaan yksinkertaisella esimerkillä:

3 Tietojen taulukointitMyn3

4 Tietojen taulukointitMyn4 HTML:n koko taulukkorakenne on hiukan yksinkertaistaen kuvattuna seuraavanlainen: Taulukko kokonaisuudessaan on yksi table - elementti. Sen alkutagissa on suotavaa olla summary -määrite, joka kertoo lyhyesti taulukon luonteen ja rakenteen erityisesti niille, jotka eivät näe taulukkoa kokonaisuutena. Ensimmäisenä osana taulukon sisällä voi olla (ja on useimmiten hyvä olla) caption -elementti, joka sisältää näkyvän nimen (otsikon) taulukolle. Tämän jälkeen voi olla (ja on yleensä hyvä olla) yksi thead -elementti (table head, taulukon otsake), joka tavallisesti sisältää otsakkeet eri sarakkeille.

5 Tietojen taulukointitMyn5 Seuraavaksi voi olla yksi tfoot -elementti, jossa on varsinaista sisältöä kuvailevaa tai kokoavaa tietoa. Lopuksi on yksi tai useampi tbody -elementti (table body, taulukon runko), jossa varsinainen taulukoitu tieto on. Tämä on ainoa muodollisesti pakollinen osa taulukossa. Yleensä tbody -elementtejä on vain yksi, mutta jakaminen kahteen tai useampaan osaan on eduksi muun muassa silloin, kun halutaan esittää jokin ryhmä peräkkäisiä rivejä ulkonaisesti muusta taulukosta erottuvana (esim. erilaisella taustavärillä).

6 Tietojen taulukointitMyn6 Ellei mitään näistä ole määritelty ( theat, tfoot, tbody ), niin kaikkien rivien yhdessä tulkitaan muodostavan yhden tbody -elementin. Sekä thead -elementti että tbody -elementit saavat sisältää vain tr -elementtejä eli taulukon rivejä (table row). tfoot -osa tulee selaimen ikkunassa aivan taulukon loppuun, vaikka sen tulee sijaita merkkauksessa heti thead -osan jäljessä.

7 Tietojen taulukointitMyn7 Rivit eli tr -elementit puolestaan saavat sisältää vain th -elementtejä ja td -elementtejä, jotka ovat kaksi erilaista taulukon solun tyyppiä: otsikkosolu (table header cell) ja datasolu (table data cell). On jossakin määrin makuasia, mitkä solut merkataan otsikkosoluiksi ja mitkä datasoluiksi, mutta periaatteena on, että otsikkosolu ( th ) toimii rivin tai sarakkeen yksilöivänä tunnisteena ja on usein vain tietoa kuvaileva, ei varsinaista tietoa sisältävä. Otsikkosolussa voidaan (ja on suotavaa) ilmaista scope -määritteellä, onko se sarakkeen vai rivin otsake ( scope=”col” tai scope=”row” ).

8 Tietojen taulukointitMyn8

9 Tietojen taulukointitMyn9

10 Tietojen taulukointitMyn10 Puututaan seuraavaksi viimeksi tehdyn taulukon ulkoasuun, ja tehdään se tyylisäännöstön (erilliseen tiedostoon) avulla. Yksinkertaisuuden vuoksi tasataan kaikki otsikkosolut ( th ) keskenään samalla tavalla ja kaikki datasolut ( td ) keskenään samalla tavalla text-align – ominaisuudella: th {text-align: left;} td {text-align: right;} Pystysuunnassa asemointi voitaisiin tehdä vertical-align –määritteellä.

11 Tietojen taulukointitMyn11 Solujen sisällön asemoinnin lisäksi on yleensä hyvä huolehtia reunaviivoista solujen ympärille ja jonkinasteisesta väljyydestä. Yleensä selaimet oletusarvoisesti esittävät taulukon ilman reunaviivoja ja melkoisen tiiviisti. Väljyyttä saa aikaan padding -ominaisuuksilla, reunaviivoja taas border -ominaisuuksilla. Koko taulukkoon liittyvä ominaisuus on border- collapse, jolla voi saada vierekkäisten solujen reunaviivat yhtymään. Seuraavassa ehdotus tyylitiedostosta taulukolle:

12 Tietojen taulukointitMyn12

13 Tietojen taulukointitMyn13

14 Tietojen taulukointitMyn14

15 Tietojen taulukointitMyn15 Selityksiä: em : the font-size of the relevant font ex : the ’x-height’ of the relevant font px : pixels, relative to the viewing device Värin voi siis antaa esim. muodossa #f00 tai #ff0000 padding (tyhjän tilan jättäminen) tapahtuu järjestyksessä: padding-top, padding-right, padding-bottom ja padding-left – tätä olisi aika vaikea arvata!!! white-space: nowrap ; This value collapses whitespace as for 'normal', but suppresses line breaks within text.

16 Tietojen taulukointitMyn16 Mitä tarkoittikaan merkintä thead tr ?: ”At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those em elements that are contained by an h1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.” Siis kontekstiselektori!

17 Tietojen taulukointitMyn17 Taulukoilla taittaminen Taulukkotaitto on HTML:n taulukkoelementin käyttöä sivun ulkoasun muotoiluun (=asemointi) silloin, kun muotoilu ei vastaa tiedon loogista jäsentymistä taulukoksi. Esimerkiksi jaetaan teksti keskeltä kahtia ja osista tehdään taulukon alkioita, jotta teksti saadaan kahteen palstaan:

18 Tietojen taulukointitMyn18

19 Tietojen taulukointitMyn19

20 Tietojen taulukointitMyn20 Vastaavanlainen jako keskeltä kahtia toteutettuna CSS-tyylitiedostolla:

21 Tietojen taulukointitMyn21

22 Tietojen taulukointitMyn22

23 Tietojen taulukointitMyn23

24 Tietojen taulukointitMyn24 Hupsista, nyt teksti koskettaa vasenta reunaa! Parannellaan hieman tyylitiedostoa:

25 Tietojen taulukointitMyn25

26 Tietojen taulukointitMyn26

27 Tietojen taulukointitMyn27

28 Tietojen taulukointitMyn28 Monimutkaisemmalla taulukkotaitolla voidaan esimerkiksi pyrkiä sommittelemaan koko sivu niin, että se jakautuu suorakulmaisiin (värillisiin) alueisiin. Se voidaan toteuttaa yhdellä taulukolla, vaikka usein tällaisessa tilanteessa käytetään sisäkkäisiäkin taulukoita, eli taulukon solussa on taulukko, jolla solu jaetaan osiin.

29 Tietojen taulukointitMyn29 HTML-taulukoita on niiden keksimisestä asti käytetty sivun taittamiseen eri tavoin. Yksi syy tähän oli, että tyyliohjeita ei aluksi ollut käytettävissä, ja kun ne tulivat käyttöön, toteutuksissa oli virheitä.