Taulukoita ja palkkeja

Eli nörtteilyä.

Ei... Taulukoita ja palkkeja ei ole Arttu Wiskarin tuotantoa. Tämä on tällainen kokeellinen kirjoitus. En ole panoistanut 100 % blogini ulkoasuun, koska se ei ole blogini pääjuttu, vaan tekstisisällöllä mennään. Tuli kumminkin mieleen, että voisin yrittää panostaa taulukoihin. Valtamediat käyttää usein taulukoissaan nykyään SVG:tä tai vain kuvagrafiikkaa, mutta SVG taipuu huonosti näissä Blogger-olosuhteissa, tämä blogi ei taivu ihan kaikkeen. Näin ollen päätin kokeilla, että kuinka pitkälle CSS taipuu tässä blogissa. SVG on tietenkin parempi kuin CSS, mutta kyllä CSS:älläkin jotain saa aikaan.

Tämä aihe tuskin kiinnostaa monia, mutta tämä onkin vain tällainen kirjoitus, johon olen itse testaillut kaikenlaista. Toisaalta tämä voi olla joillekin pieni koodausopas, vaikka vain pintaa raapaistaan, menemättä kovin syvälle koodauksen suohon.

Powered by Commodore 64
**** COMMODORE 64 BASIC V2 **** 64K RAM SYSTEM 38911 BASIC BYTES FREE READY. ▉

Kunnianosoituksena legendaariselle Commodore 64:lle, käytän Commodore 64 -tyylisiä esimerkkikoodilaatikoita.

Kun SVG täytyi unohtaa Bloggerissa, niin huomasin, että kyllä CSS:lläkin saa jotain aikaan. Haastetta hommaan toi kumminkin se, että Bloggerin muokattava CSS-tiedosto on piilotettu asetuksien uumeniin ja eihän sinne jaksa useinkaan vaivautua. Näin ollen kaikki CSS:t oli helpompaa määrittää ns. inline eli tagien sisään style-attribuutilla.

1. ESIMERKKIKOODI: Powered by Commodore 64
<div style="color: red;">Tämä teksti näkyy punaisena</div>

1. esimerkkikoodissa DIV-elementin sisällä oleva teksti näkyy punaisena. DIV-tagi on HTML:n "kantasolu" eli se taipuu moneen tarkoitukseen. Ja näin meillä on hallussa HTML:n ja CSS:n perusteet.

Yleensä, kun tarvitsen blogiin jonkun taulukon, niin teen sen helpolla perustyylillä table-tagilla ja muotoilut määrittelen CSS:llä, perustaulukot on määritelty CSS-tiedostoon. Alla on esimerkki.

Operaattorin liittymä	Teoreettinen nopeus	Saavutettu nopeus	Suhde-%
DNA Matkanetti 4G Max	(ei ilmoiteta)	83,9 Mbit/s	X %
Elisa Mobiililaajakaista Ultra	600 Mbit/s	79,6 Mbit/s	13,27 %
Telia Rajaton 450 M	450 Mbit/s	63,2 Mbit/s	14,04 %

Alla, 2. esimerkkikoodissa on yksinkertainen taulukko HTML:nä. Taulukossa on kolme riviä ja kaksi saraketta.

2. ESIMERKKIKOODI: Powered by Commodore 64
<table> <tr> <th>1. otsikko</th> <th>2. otsikko</th> </tr> <tr> <td>Solu 1</td> <td>Solu 2</td> </tr> <tr> <td>Solu 3</td> <td>Solu 4</td> </tr> </table>

<table>- ja </table>-tagien väliin muodostetaan itse taulukko.

<tr>- ja </tr>-tagit määrittävät rivin taulukossa.

<th>- ja </th>-tagit määrittävät otsikkosolun taulukossa.

<td>- ja </td>-tagit määrittävät perussolun taulukossa.

Kun rivillä on kaksi solua, tarkoittaa se, että taulukossa on kaksi saraketta.

Toinen, ehkä nörtimpi tyyli tehdä taulukko on käyttää vain <div>-tagia. Alla on 3. esimerkkikoodi.

3. ESIMERKKIKOODI: Powered by Commodore 64
<div> <div> <div>1. otsikko</div> <div>2. otsikko</div> </div> <div> <div>Solu 1</div> <div>Solu 2</div> </div> <div> <div>Solu 3</div> <div>Solu 4</div> </div> </div>

Tuollaisenaan DIV-taulukosta ei tule vielä taulukko, se on vain taulukon runko. Jokaiselle DIV-elementille täytyy erikseen kertoa CSS-määrityksillä, että mitä ne ovat.

Kun CSS-määritykset on tehty, niin voidaan saada esimerkiksi alla oleva taulukko, joka näyttää samalta kuin 2. esimerkkikoodin kohdilla oleva TABLE-taulukko, mutta on sen DIV-versio - parin pikselin ero.

Operaattorin liittymä

Teoreettinen nopeus

Saavutettu nopeus

Suhde-%

DNA Matkanetti 4G Max

(ei ilmoiteta)

83,9 Mbit/s

X %

Elisa Mobiililaajakaista Ultra

600 Mbit/s

79,6 Mbit/s

13,27 %

Telia Rajaton 450 M

450 Mbit/s

63,2 Mbit/s

14,04 %

Kuten huomataan, niin TABLE-taulukon koodia on helpompi lukea, mutta DIV-taulukko on nörtimpi - sekavaa DIV-massaa.

Kun meille on nyt selvää TABLE-taulukon ja DIV-taulukon erot, niin voimmekin jatkaa itse aiheeseen.

Raskaudenkeskeytyksestä sieluun -kirjoituksessa aloin miettiä eri vaihtoehtoja näyttää tilastoja. Ensimmäinen versio on alla.

RASKAUDENKESKEYTYKSET VUONNA 2018

0 - 6 raskausviikot

3429 / 39,87 %

0 %25 %50 %75 %100 %

7 - 8 raskausviikot

3283 / 38,17 %

0 %25 %50 %75 %100 %

9 - 11 raskausviikot

1268 / 14,74 %

0 %25 %50 %75 %100 %

12 - 13 raskausviikot

190 / 2,21 %

0 %25 %50 %75 %100 %

14 - 17 raskausviikot

306 / 3,56 %

0 %25 %50 %75 %100 %

18 - 19 raskausviikot

55 / 0,64 %

0 %25 %50 %75 %100 %

20 - 21 raskausviikot

32 / 0,37 %

0 %25 %50 %75 %100 %

22 - 24 raskausviikot

38 / 0,44 %

0 %25 %50 %75 %100 %

100 % on yhteensä 8601 raskaudenkeskeytystä

Palkit on tehty DIV-tekniikalla, mutta en ollut tyytyväinen lopputulokseen. Seuraavassa versiossa lähdin rakentamaan taulukkoa eri näkökulmasta ja panostin siihen hiukan enemmän, tosin päädyin TABLE-pohjaan ja tietenkin muotoilut CSS:llä - katso alta.

RASKAUDENKESKEYTYKSET VUONNA 2018
RASKAUSVIIKOT	0 - 6	3429 / 39,87 %
	7 - 8	3283 / 38,17 %
	9 - 11	1268 / 14,74 %
	12 - 13	190 / 2,21 %
	14 - 17	306 / 3,56 %
	18 - 19	55 / 0,64 %
	20 - 21	32 / 0,37 %
	22 - 24	38 / 0,44 %
0 %25 %50 %75 %100 % LUKUMÄÄRÄT JA PROSENTIT 100 % on yhteensä 8601 raskaudenkeskeytystä

Tulihan siitä ihan hyvä, mutta ei täydellinen. Taulukon reunoista voi huomata solujaon ja muutenkin kyllä sitä voisi vieläkin hioa. Alla seuraava versio.

RASKAUDENKESKEYTYKSET VUONNA 2018

RASKAUSVIIKOT

0 - 6
7 - 8
9 - 11
12 - 13
14 - 17
18 - 19
20 - 21
22 - 24

3429 / 39,87 %

3283 / 38,17 %

1268 / 14,74 %

190 / 2,21 %

306 / 3,56 %

55 / 0,64 %

32 / 0,37 %

38 / 0,44 %

0 %25 %50 %75 %100 %

LUKUMÄÄRÄT JA PROSENTIT

100 % on yhteensä 8601 raskaudenkeskeytystä

Yllä olevassa taulukossa luovuin taulukkopohjarakenteesta. Taulukko näyttää taulukolta (no tietenkin näyttää!), mutta se on koostettu DIV-elementeistä ilman taulukkoperiaatetta. Alla hieman esimerkkikoodia.

4. ESIMERKKIKOODI: Powered by Commodore 64
<div id="kolmelohkoariviin" style="display: flex; flex-direction: row; justify-content: space-between;"> <div>1. lohko</div> <div>2. lohko</div> <div>3. lohko</div> </div>

Yhden DIV-elementin sisään laitetaan kolme DIV-elementtiä. Yksi sitoo yhteen kolme muuta. DIV-elementti ei aina siis ole ulospäin näkyvä, mutta sen vaikutukset näkyvät (kuin painovoima). Tässä tekniikassa pääroolissa on joustavuus.

CSS-määritys display: flex; tekee sisällöstä joustavan.

CSS-määritys flex-direction: row; määrää joustavuuden suunnan (row = riviin).

CSS-määritys justify-content: space-between; tasaa lohkot tasaisesti vallitsevaan tilaan.

Lähdekoodissa lohko-DIV-osat on alekkain, mutta lopputuloksessa ne ovat vierekkäin. Lohkoihin voi laittaa lisää DIV-elementtejä jne.

Yllä olevaan taulukkoon halusin myös prosenttiviivat. Apuun tuli eräänlainen taustaväritys DIV-elementtiin:

5. ESIMERKKIKOODI: Powered by Commodore 64
<div style="background: repeating-linear-gradient(to left, #8c8c8c, #8c8c8c 1px, white 0px, white 25%);">sisältö</div>

Taustalle luodaan viivat 25 %:n välein suhteessa tilaan. Toimii ainakin uusimmissa selaimissa.

En ollut vieläkään aivan tyytyväinen taulukkoon, joten päätin koikeilla ruudukko-tekniikkaa. Ruudukon idea muistuttaa taulukkoa, esimerkki alla.

RASKAUDENKESKEYTYKSET VUONNA 2018

RASKAUSVIIKOT

 0 -  6

3429 / 39,87 %

 7 -  8

3283 / 38,17 %

 9 - 11

1268 / 14,74 %

12 - 13

190 / 2,21 %

14 - 17

306 / 3,56 %

18 - 19

55 / 0,64 %

20 - 21

32 / 0,37 %

22 - 24

38 / 0,44 %

0 %25 %50 %75 %100 %
LUKUMÄÄRÄT JA PROSENTIT

100 % on yhteensä 8601 raskaudenkeskeytystä

Tässä versiossa taulukon koko vähän pieneni ja muutenkin olin jo melko tyytyväinen, joten tämä versio sai jäädä kirjoitukseen.

Alla vähän ideaa, miten ruudukko toimii.

6. ESIMERKKIKOODI: Powered by Commodore 64
<div id="luodaanruudukko" style="display: grid; grid-gap: 0px; grid-template-columns: 40px 60px auto;"> <div style="grid-row-start: 1; grid-row-end: 10;>1. rivi</div> <div>2. rivi</div> <div>3. rivi</div> <div>4. rivi</div> <div>5. rivi</div> <div>6. rivi</div> <div>7. rivi</div> <div>8. rivi</div> <div>9. rivi</div> <div>10. rivi</div> </div>

6. esimerkkikoodi on vain suuntaa antava, sillä siihen tarvitaan paljon enemmän DIV-soluja kuin mitä esimerkissä on.

CSS-määritys display: grid; tekee sisällöstä ruudukon.

CSS-määritys grid-gap: 0px; määrittää ruudukon solujen välisen välin, joka on esimerkissä 0 pikseliä.

CSS-määritys grid-template-columns: 40px 60px auto; määrittää ruudukon sarakkeiden lukumäärän ja niiden leveydet. Esimerkkiruudukossa on kolme saraketta, joiden leveydet on 40 pikseliä, 60 pikseliä sekä auto eli sen mitä jää tilaa lopulle. Rivejä taulukossa on 10, näin ollen 3 x 10 on suunnilleen tarvittavien DIV-solujen määrä. Suunnilleen siksi, koska yksi solu venytetään 10 rivin mittaiseksi. Melko pienestäkin taulukosta kertyy äkkiä lähdekoodissa melkoinen DIV-viidakko, josta täytyy yrittää pysyä selvillä. Ruudukon voi muodostaa muillakin tavoilla, mutta tämä tyyli taipui parhaiten Bloggeriin.

CSS-määritykset grid-row-start: 1; grid-row-end: 10; määrittää, kuinka yksi solu venyy alaspäin monta riviä. Solun venytys on helppo TABLE-taulukossa, mutta DIV-taulukossa se voi olla vaikeampi juttu (en ole onnistunut siinä). Kun taas DIV-ruudukossa melko helppoa.

Kaiken tämän jälkeen sain vielä yhden vision kyseisestä taulukosta, lähdin eri näkökulmasta rakentamaan uutta taulukkoa. Pyrkimyksenä mahdollisimman selkeä ja tyylitelty, joka voisi kelvata Ylelle yms.

RASKAUDENKESKEYTYKSET VUONNA 2018

Raskausviikot

Lukumäärät

Prosentit

  0 -  6

3429

39,87 %

  7 -  8

3283

38,17 %

  9 - 11

1268

14,74 %

12 - 13

 190

2,21 %

14 - 17

 306

3,56 %

18 - 19

  55

0,64 %

20 - 21

  32

0,37 %

22 - 24

  38

0,44 %

asteikko: 0 - 50 %

Yhteensä:

8601

100 %

Yllä oleva taulukko on tehty DIV-taulukkona, joka on jaoteltu kolmeen osaan (DIV-ryhmään):

CSS-määritys display: table-header-group; määrittää taulukon otsikkosolut omaksi ryhmäksi.

CSS-määritys display: table-row-group; määrittää taulukon tietosolut omaksi ryhmäksi.

CSS-määritys display: table-footer-group; määrittää taulukon alaotsikkosolut omaksi ryhmäksi.

Näiden ryhmien avulla voi määrittää monille DIV-soluille määrityksiä, ei tarvitse erikseen määrittää joka solua. Ryhmitystä ei näe lukija ja ryhmät tarkoittaa vain lisää DIV:ejä koodaajalle, mutta onpahan oikeaoppisesti tehty.

Edellisissä taulukoissa palkkien mittatila oli aina 100 %, se on helpoin tapa määrittää palkkien pituuksia, mutta silloin usein palkit jäävät lyhyiksi. Tuossa yllä olevassa taulukossa mitta-asteikko onkin 0-50 %, näin kuin zoomataan tilanne, koska emme tarvitse pidempää mitta-asteikkoa. Voimme katsoa tilannetta 50 % sisällä. Kun mitta-asteikko on alle 100 %, täytyy silloin ottaa huomioon, että palkkiken pituuksien laskeminen muuttuu.

PALKKIEN PITUUDET: Powered by Commodore 64
Mitta-asteikko on 50 %. Palkin arvo on 40 %. Palkin pituus on silloin 80 %, kun sitä verrataan 50 %. 40 on 50:stä 80 %.

Tila, jossa palkki on, voi olla pituudeltaan mitä vain, koska se on aina 100 % koko mitaltaan. Palkin tila voi olla esimerkiksi 350 px (pikseliä), jolloin tuo 350 px on se 100 %. Voimme päättää, että mitä tuo 350 px edustaa, voimme päättää, että täydet 100 % onkin nyt 50 %. Tuo muutos täytyy ottaa vain huomioon, kun pituuksia laskee. Oikeaoppinen kaava on näillä luvuilla:

(40/50)*100 = 80 %

Tuo voisi aina laskea ns. käsin, mutta nyt voimme ottaa apuun CSS:n calc()-funktion.

Palkin pituusarvo CSS-määrityksenä näyttää calc()-funktion kanssa:

width: calc(40 / 50 * 100%);

Width-määrityksen arvoksi tulee 80 %.

Oikeaoppiset sulut voi unohtaa calc-kaavasta, mutta %-merkki tuntuu olevan tärkeä tässä tapauksessa. Selvemmin en osaa esittää asiaa.

CSS:n var()-funktioonkin kannattaa perehtyä, sen avulla voi hallita CSS-muuttujia.

Seuraavaksi päätin kokeilla, että miten onnistun tekemään Ylen tyyliin Puoluekannatustaulukon - tuunasin hiukan omaan tyyliin.

PUOLUEKANNATUS (%)

0 %5 %10 %15 %20 %25 %

PS

 

19,7 %

KOK

 

16,8 %

SDP

 

16,1 %

VIHR

 

14,3 %

KESK

 

11,7 %

VAS

 

8,8 %

RKP

 

4,6 %

KD

 

3,8 %

LIIK

 

1,7 %

Muut

 

2,5 %

Yle uutiset/taloustutkimus:
5.6-2.7.2019, Otos 2 446, Virhemarginaali +/- 1,9 %-yks.

Tein DIV-ruudukko -tyylillä, mutta päädyin vielä hiomaan sitä ja tein DIV-taulukko -tyylillä paria pikseliä paremman - alla:

PUOLUEKANNATUS (%)

0 %5 %10 %15 %20 %25 %

PS

19,7 %

KOK

16,8 %

SDP

16,1 %

VIHR

14,3 %

KESK

11,7 %

VAS

8,8 %

RKP

4,6 %

KD

3,8 %

LIIK

1,7 %

Muut

2,5 %

Yle uutiset/taloustutkimus:
5.6-2.7.2019, Otos 2 446, Virhemarginaali +/- 1,9 %-yks.

Tässäkin DIV-taulukko on jaettu kolmeen ryhmään. Calc()-funktiolla lasketaan palkkien pituudet, koska mitta-asteikko on enintään 25 %. Palkkien perässä "seuraa" prosenttiluvut automaattisesti.

Kerro, kerro tilasto, ken on maassa nopein -kirjoituksessa minun täytyi tehdä taulukko, jossa palkit onkin pystysuunnassa. Päädyin ruudukko-malliin ja flexasin tietosarakkeiden solut.

KESKIMÄÄRÄINEN TIEDONSIIRTONOPEUS - Mbit/s
vuosina 2019-2015

Mbit/s

2019

2018

2017

2016

2015

100
75
50
25
0

83,9

79,6

63,2

53,5

47,4

40,3

35,88

41,26

36,59

44,3

35,3

36,8

46,6

41,0

34,3

DNA

ELISA

TELIA
(sonera)

7. ESIMERKKIKOODI: Powered by Commodore 64
<div style="display: flex; align-items: flex-end;"> <div style="flex: 1;>1. palkki</div> <div style="flex: 1;>2. palkki</div> <div style="flex: 1;>3. palkki</div> </div>

CSS-määritykset display: flex; align-items: flex-end; määrittää sisällön joustavaksi ja siirtää DIV-palkit tilan alareunaan - kasvavat alhaalta ylös.

CSS-määritys flex: 1; määrittää DIV-palkit tilan mukaan saman kokoisiksi leveyssuunnassa, koska korkeus on erikseen määritelty. Tila voi muuttua ja sitä mukaan palkkien leveyskin, ilman, että erikseen sitä määrittelee.

Palkeissa on myös title-attribuutti, joka näyttää tekstin, kun osoitin osuu palkkiin.

Seuraavaksi yksinkertaisempi esimerkki flex: 1; määrityksestä.

L
A
I
M
E
N
N
U
S
O
H
J
E

80 %

20 %

Laita 20 % mehua ja 80 % vettä. Eli 1 osa mehua ja 4 osaa vettä.

Laimennusohjeessa täytyy antaa määräarvo vain veden osuudelle, mehun osuus flexaa itse sen lopputilan, joka sille jää.

Alla olevassa esimerkissä palkissa on kolme eri osuutta, jotka flexaa itsensä tasaisesti niille annettuun tilaan eli jokainen kolme osuutta vie tilaa 33,3333333... %.

JUMALA MATEMAATTISESTI

33,3333333... %
ISÄ

33,3333333... %
POIKA

33,3333333... %
PYHÄ HENKI

Koska kyseessä on Jumala, niin Jumala on ympyrässä.

CSS-määritys border-radius: 50%; poistaa reunaviivalta kulmat täysin, tehden alueesta ympyrän.

Pojan osuus on liukuvärjätty.

CSS-määritys background: linear-gradient(to left, #0099f7, #f11712); luo liukuvärin.

Lopuksi kokeellinen lämpömittari, jonka runko on tehty ruudukko-pohjalla.

LÄMPÖMITTARI

(Celsius)

+ 50°C

+ 40°C

+ 30°C

+ 20°C

+ 10°C

+   0°C

-   0°C

- 10°C

- 20°C

- 30°C

- 40°C

- 50°C

Lämpömittarin punaista elohopea koodaaja voi säätää helposti 0-100 % ajatuksella. 0 % on -50°C, 50 % on 0°C jne. eli 100 % on +50°C. Nyt lämpömittari näyttää +22°C eli on 72 %.

CSS-määritykset:

height: 1px; width: 35px; position: relative; left: 304px; top: 3px;

Luo DIV-elementistä lämpömittariin poikkiviivan, määrittää sen muodon ja paikan.

Powered by Commodore 64
**** COMMODORE 64 BASIC V2 **** 64K RAM SYSTEM 38911 BASIC BYTES FREE LOADING READY. RUN

Taulukot ja palkit saatiin ladattua ja ei muuta kuin RUN...

YHTEENVETOA

Emme saaneet ?SYNTAX ERROR -ilmoitusta ja hyvä niin.

Taulukoita voi tehdä monella tyylillä. Perustyyli on perinteinen TABLE, muut tyylit pohjautuvat enemmän tai vähemmän DIV-elementtiin ja CSS:ään. CSS:n avulla DIV:in voi saada imitoimaan TABLEa tai sitten DIVien ja CSS:n avulla voi luoda taulukon kaltaisen ruudukon. Eräs vaihtoehto on tehdä DIV-elementeistä joustavia (Flex) ja näin saada ne näyttämään taulukolta.

Melko pitkälle HTML:llä ja CSS:llä pärjää näissä taulukoissa, tosin SVG:ssä on enemmän mahdollisuuksia.

Kirjoituksen alussa vilkkuva kursori on myös CSS:ää, CSS-animaatio.

Huom.
Jos teet Bloggerissa monimutkaisia koodeja, niin LUO-välilehteä kannattaa välttää ja käyttää vain HTML-välilehteä (koodinäkymä). LUO-välilehtinäkymä saattaa rikkoa koodit, kun ei tajua jotain, niin osa koodista poistuu.


Lue myös:
Taulukoita ja palkkeja - Palkkisimulaattori
Big Brother -simulaattori
Big Brother 2022 -simulaattori
Vaalikone (2022)