Tietotaulukoissa on lueteltu erilaisia tietoja sarakkeissa ja riveissä, jotta ne olisi helppo lukea. Tiedot ovat yleensä osittain numeerisia tekstitarrojen kanssa. Esimerkki on tietotaulukko, joka näyttää kuinka monta kaloria joku syö päivässä. Tietotaulukon tekeminen verkossa voidaan tehdä HTML: llä tai monimutkaisemmalla CSS-selaimen kielellä. Viimeinen taulukko näyttää aivan kuin taulukkolaskentataulukkoon tai paperille luotu tietotaulukko. Ainoa ero on taustakoodaus, jota ei näy, ellei katsota lähdekoodia. Koodauksen voi luoda HTML-editorilla, tekstillä tai muulla tavalla. Verkossa on monia sivustoja, jotka tarjoavat mahdollisuuden syöttää tietoja, asettaa muutamia määritteitä ja luoda koko taulukon koodaus puolestasi. Verkkotietotaulukoita käytetään yleensä osana verkkosivua. Tietotaulukoita käytetään usein luetteloiden luomiseen luokista, kuten myytävistä tuotteista. Jotkut verkkosivut käyttävät niitä tietojen tilastotietojen näyttämiseen. Vaikka tietotaulukoita voidaan käyttää tulostamiseen offline-tilassa tai raporteissa, niitä on yleensä parempi käyttää taulukkolaskentaohjelmisto, kuten Microsoft Office Excel, jotka tarjoavat paljon enemmän toimintoja tietojen kanssa. Tässä oppaassa kerrotaan, miten HTML-tietotaulukko luodaan Muistiossa.
Avaa HTML-editori avaamalla HTML-editori tai vain tavallinen Muistio-tekstidokumentti. Muistio toimii hyvin, jos olet tottunut HTML-koodaukseen. HTML-editorit tekevät toistuvista tehtävistä nopeampia, mutta jotkut, kuten Frontpage, lisäävät tarpeetonta koodausta, joka voi hidastaa verkkosivuja. Parasta on koodata ensin HTML-editorilla, sitten palata takaisin ja muokata koodia käsin sen puhdistamiseksi.
Päätä taulukon määritteet reunukselle, leveydelle, taustavärille ja fontin väreille. Sinun on otettava huomioon verkkosivun asettelu, leveys, värit ja muut ominaisuudet, jotta taulukko olisi helposti luettavissa. Sinun on myös päätettävä, kuinka monta riviä ja saraketta tarvitaan tietoihin. Aloita taulukon määritteiden määrittely. (Esimerkissämme näkyy lounaalla ja illallisella syötyjen kaloreiden määrä jokaisena arkipäivänä. Tarvitsemme kolme saraketta (päivä, lounas ja päivällinen) ja seitsemän riviä (kaksi tarroille ja yksi jokaiselle arkipäivälle).
Lisää reunus taulukon ja datasolujen ympärille. Reunat erottavat tiedot soluihin helpon katselun vuoksi. Se mitataan pikseleinä, ja sille voidaan antaa arvo 0, jotta niitä ei käytetä. Yhden tai kahden pikselin raja on yleensä hieno. Rajan tunniste on
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Reunuksen väriä voidaan muuttaa tagilla
bordercolor = "VALITTU_VÄRI"
joka käyttää perusvärejä, kuten punaista tai mustaa tai kuusinumeroista heksadesimaalista värikoodia. Heksadesimaalit tarjoavat enemmän värejä. Esimerkissämme käytetään reunaa = "2" ja bordercolor = "mustaa".
Määritä koko taulukon leveys. Se mitataan pikseleinä tai prosentteina näytön koosta. Pikselit ovat lopullisia, ja prosenttiosuudet antavat taulukon sopeutua eri näyttökokoihin. Yritä arvioida leveys rivien tietojen leveyden perusteella. Jos huomaat myöhemmin, että pöytä on liian ohut tai leveä, sitä voidaan muuttaa. Esimerkissämme käytetään leveyttä = "175".
Aseta datasolujen taustaväri. Se on erilainen kuin sivun taustaväri, joka voi tarjota hyvän kontrastin. Tunniste on
bgcolor = "VALITTU_VÄRI"
aivan kuten reunuksen väri. Esimerkissämme käytetään bgcolor = "white".
Aseta solujen tekstin fontin väri. Varmista, että väri eroaa hyvin taustasta, joten se on helposti luettavissa. Valo pimeässä tai tumma valossa toimii aina parhaiten. Tunniste on
font = "CHOSEN_COLOR"
Esimerkkimme on font = "black", joka on hyvin ristiriidassa valkoisen taustan kanssa.
Kirjoita kokonaiset taulukotunnisteet vasemman ja oikean nuolen väliin siten, että välilyönti on tagimääritteiden välillä ja alkaa taulukon tagista edessä. Tunnisteiden järjestyksellä ei ole merkitystä, kunhan "taulukko" on edessä.
Määritä pylvään leveydet. Kunkin sarakkeen leveys riippuu koko taulukon leveydestä. Ota taulukon leveys ja jaa se solujen lukumäärällä saadaksesi tasaisen kokoiset sarakkeet. Säädä tarvittaessa sarakkeiden leveyksiä, mutta kokonaismäärä ei voi ylittää taulukon leveyttä. Kun yhden solun leveys muuttuu, muut solut on säädettävä taulukon kokonaisleveyden mukaan. (Esimerkissämme on leveys 175 ja kolme saraketta per rivi, joten tasainen jako on noin 59. Todellinen jakauma on 70, 60, 40.)
Aloita tietojen lisääminen. Aloita ensin uusi rivi ja lisää taulukon rivi koodilla
Syötä solun tiedot; käyttämällä tätä koodia tyhjien solujen esittämiseen:
Sulje solu tunnisteella. Bordercolor-tagia käytetään määrittämään solun reunaväri, jos halutaan. Jos se jätetään pois, käytetään oletustaulukkoa bordercolor. Esimerkkimme ensimmäinen solukoodi on:
Toista taulukon datasolujen luominen, kukin uudella rivillä, kunnes kaikki rivin solut ovat valmiit. Lopeta sitten rivi tagilla. Aloita seuraava rivi samalla prosessilla, alkaen
Sulje taulukon koodi merkillä tag. Jos viimeisen taulukon koodi päättyy kahden tietorivin jälkeen, se on alla.
Tarvittavat asiat
- HTML-editori tai Muistio
- Tiedot