Vakavia sanoja taulukkotaiton mollaajille

[Tomi Jaskari]

http://www.isolani.co.uk/blog/standards.html

Erityisen painavaa sanottavaa täällä on niille, jotka kehuvat tyylejä,
mutta eivät oikeasti osaa perustella miksi ja missä ne ovat parempia kuin
taulukoihin pohjautuva taittaminen.

Eli CSS on vain yksi tekniikka, ei välttämättä parempi kuin sisäkkäisten
taulukoiden käyttö halutun taiton aikaansaamiseksi. Osaltaan tähän
tietenkin on syynä erään tietyn selaimen vakavat puutteet. Itse
henkilökohtaisesti työskentelen paljon mieluummin CSS:n kuin sisäkkäisten
taulukoiden parissa, mutta ehkä kyseessä on vain työkalujen puute.

[Anne]

Itse henkilökohtaisesti työskentelen paljon mieluummin CSS:n kuin
sisäkkäisten taulukoiden parissa, mutta ehkä kyseessä on vain
työkalujen puute.

Menee huumorin puolelle, mutta törmäsin tänään tähän:
http://www.zazzle.com/css_is_awesome_mug-168716435071981928

[Eero Nupponen]

Itse henkilökohtaisesti työskentelen paljon mieluummin CSS:n kuin
sisäkkäisten taulukoiden parissa, mutta ehkä kyseessä on vain
työkalujen puute.

Tomi, CSS on joustavampi ja helpompikin.
Sekä table-taitto, että CSS tyylien keralla taittaminen tottelevat
vaikkapa notepadia tai geditiä tai vaikka vi:tä
ihan hyvin, että se työkaluista ja niiden puutteesta.

Anne, se oli ihan hauskan näköinen ja toimiva, yllämainitsemasi linkin
mukitoteutus, CSS:n kanssa sillä ei kyllä ollut mielestäni
kovin paljon tekemistä, ks. lähdekoodi: >><script
type="text/javascript"><<.

Mutta, miksi kangistua kaavoihin ja väittää jonkin tekniikan olevan
ylivoimainen,
HTML, XHTML (table-taitto), javascript, java, flash, CSS... tai "näin minä
olen sen aina tehnyt".

Sitä tuntee vaan itsensä noloksi, kun joku vieressä ihmettelee "ai sä
tuhraat sen tollai, annas ku mä" ja
tunnin homma on tehty kolmessa minuutissa.

Eero

[Eero Nupponen]

Post by Eero Nupponen

Itse henkilökohtaisesti työskentelen paljon mieluummin CSS:n kuin
sisäkkäisten taulukoiden parissa, mutta ehkä kyseessä on vain
työkalujen puute.

Tomi, CSS on joustavampi ja helpompikin.
Sekä table-taitto, että CSS tyylien keralla taittaminen tottelevat
vaikkapa notepadia tai geditiä tai vaikka vi:tä
ihan hyvin, että se työkaluista ja niiden puutteesta.
Anne, se oli ihan hauskan näköinen ja toimiva, yllämainitsemasi linkin
mukitoteutus, CSS:n kanssa sillä ei kyllä ollut mielestäni
kovin paljon tekemistä, ks. lähdekoodi: >><script
type="text/javascript"><<.
Mutta, miksi kangistua kaavoihin ja väittää jonkin tekniikan olevan
ylivoimainen,
HTML, XHTML (table-taitto), javascript, java, flash, CSS... tai "näin
minä olen sen aina tehnyt".
Sitä tuntee vaan itsensä noloksi, kun joku vieressä ihmettelee "ai sä
tuhraat sen tollai, annas ku mä" ja
tunnin homma on tehty kolmessa minuutissa.
Eero

ps.

Tässä eräs esimerkki: http://devkick.com/lab/galleria/

Sama

[Sauli Kaskipelto]

Post by Eero Nupponen

Itse henkilökohtaisesti työskentelen paljon mieluummin CSS:n kuin
sisäkkäisten taulukoiden parissa, mutta ehkä kyseessä on vain
työkalujen puute.

Tomi, CSS on joustavampi ja helpompikin.
Sekä table-taitto, että CSS tyylien keralla taittaminen tottelevat
vaikkapa notepadia tai geditiä tai vaikka vi:tä
ihan hyvin, että se työkaluista ja niiden puutteesta.
Anne, se oli ihan hauskan näköinen ja toimiva, yllämainitsemasi linkin
mukitoteutus, CSS:n kanssa sillä ei kyllä ollut mielestäni
kovin paljon tekemistä, ks. lähdekoodi: >><script
type="text/javascript"><<.

Siis haluan nyt vain varmistaa että tajusit varsinaisen vitsin... Se oli
tässä kuvassa itsessään:
Loading Image...

Mukiin painettu itseironinen kuva "kätevästä" CSS-taitosta jossa teksti
tursuaa laatikon reunan yli, huumorihauskaa koodareille. Tää oli se
vitsi ja se liittyi nimenomaan CSS:ään, ei kyseisen sivun lähdekoodiin.

-SK

[Jukka K. Korpela]

Post by Sauli Kaskipelto
Mukiin painettu itseironinen kuva "kätevästä" CSS-taitosta jossa
teksti tursuaa laatikon reunan yli, huumorihauskaa koodareille. Tää
oli se vitsi ja se liittyi nimenomaan CSS:ään, ei kyseisen sivun
lähdekoodiin.

Vitsi menee kuitenkin ohi maalin, koska tekstin tursuaminen reunan yli eli
ylivuoto (overflow) ei riipu siitä, onko laatikko luotu CSS:llä vai
taulukkotaitolla. Tässä tapauksessa ylivuoto osoittaa vain huonoa
suunnittelua (teknisestä toteuksesta, CSS contra taulukkotaitto)
riippumatta: on yritetty mahduttaa kuuden tuuman patonki viiden tuuman
levyiseen laatikkoon. Tai realistisemmin sanoen on suunniteltu laatikko
ajattelematta, millaisia patonkeja siihen saattaa joutua.

[Muurimäki Perttu]

Post by Tomi Jaskari
http://www.isolani.co.uk/blog/standards.html
Erityisen painavaa sanottavaa täällä on niille, jotka kehuvat tyylejä,
mutta eivät oikeasti osaa perustella miksi ja missä ne ovat parempia
kuin taulukoihin pohjautuva taittaminen.
Eli CSS on vain yksi tekniikka, ei välttämättä parempi kuin
sisäkkäisten taulukoiden käyttö halutun taiton
aikaansaamiseksi. Osaltaan tähän tietenkin on syynä erään tietyn
selaimen vakavat puutteet. Itse henkilökohtaisesti työskentelen
paljon mieluummin CSS:n kuin sisäkkäisten taulukoiden parissa, mutta
ehkä kyseessä on vain työkalujen puute.

Kyllä kaverilla muutamia oikeita pointtejakin jutussaan oli (kiitokset
linkistä). Osa on todellisia CSS:n ongelmia mutta se
latausaika-argumentti (kohta 1.) oli aika kaukaa haettua. Onko
olemassa table -layoutia käyttäviä sivustoja jotka EIVÄT käytä CSS
mihinkään? Pelkän layoutin sisältä CSS vastaan joka sivulla olevat
taulukkorakenteet olisi ollut se oikea vertailu. Ja laittamalla css:in
'include virtual' eikä 'import' poistaisi myös koko ongelman.

CSS-laytoutin suunnittelun monimutkaisuudessa mies on aivan
oikeassa. Holy Grail -layout suhteellisilla mitoilla ja
esitysjärjestys eri kuin lähdekoodin järjestys ON aivan helvetillistä
tehtävää. Mutta se on jotenkin saavutettavissa vaikka hikeä ja
kyyneleitä se vaatiikin ks. esim.

http://tilastokeskus.fi/til/index.html

* Näyttää lähes samalta kaikissa suurissa selaimissa
* Lähdekoodissa h1 ensimmäisenä ja kaikki navigaatio seuraa
leipätekstiä
* Sivu skaalautuu virheettömästi Mozilla ja Webkit -pohjaisilla
selaimilla ja siedettävästi IE5-IE7. Operalla sitä ei taidettu
testata :| Netscape4:llä näyttää hirveältä :)

Arla-instituutti testasi sivut ja oli niihin tyytyväinen. En usko että
taulukkolayoutilla noiden tekeminen olisi onnistunut.

SEO:n suhteen olisin varovaisesti eri mieltä. On tietenkin totta että
hakukoneet indeksoivat pelkät tekstit ja että sivun koolla ei niin ole
merkitystä mutta kuvittelisin (en tiedä varmasti!) että sivun (teksin)
alussa olevat asiat saavat enemmän painoarvoa pisteytyksessä. Näin
ollen jos onnistuu tuomaan sivun leipätekstin sivun alkuun se
automaattisesti parantaa sivun leipätekstin löydettävyyttä.

Kuvittelisin että nuo kaksi asiaa (saavutettavuus ja SEO) ovat ne
ainoat todelliset edut mitä CSS layoutilla on taulukkolayoutin
ylitse. Kaikki muut seikat riippuvat enemmän olosuhteista,
organisaatioseikoista jne.

[Eero Nupponen]

Post by Muurimäki Perttu
CSS-laytoutin suunnittelun monimutkaisuudessa mies on aivan
oikeassa. Holy Grail -layout suhteellisilla mitoilla ja
esitysjärjestys eri kuin lähdekoodin järjestys ON aivan helvetillistä
tehtävää. Mutta se on jotenkin saavutettavissa vaikka hikeä ja
kyyneleitä se vaatiikin ks. esim.
http://tilastokeskus.fi/til/index.html
* Näyttää lähes samalta kaikissa suurissa selaimissa
* Lähdekoodissa h1 ensimmäisenä ja kaikki navigaatio seuraa
leipätekstiä
* Sivu skaalautuu virheettömästi Mozilla ja Webkit -pohjaisilla
selaimilla ja siedettävästi IE5-IE7. Operalla sitä ei taidettu
testata :| Netscape4:llä näyttää hirveältä :)
Arla-instituutti testasi sivut ja oli niihin tyytyväinen. En usko että
taulukkolayoutilla noiden tekeminen olisi onnistunut.
SEO:n suhteen olisin varovaisesti eri mieltä. On tietenkin totta että
hakukoneet indeksoivat pelkät tekstit ja että sivun koolla ei niin ole
merkitystä mutta kuvittelisin (en tiedä varmasti!) että sivun (teksin)
alussa olevat asiat saavat enemmän painoarvoa pisteytyksessä. Näin
ollen jos onnistuu tuomaan sivun leipätekstin sivun alkuun se
automaattisesti parantaa sivun leipätekstin löydettävyyttä.
Kuvittelisin että nuo kaksi asiaa (saavutettavuus ja SEO) ovat ne
ainoat todelliset edut mitä CSS layoutilla on taulukkolayoutin
ylitse. Kaikki muut seikat riippuvat enemmän olosuhteista,
organisaatioseikoista jne.

ja tämäkin >> Holy Grail -layout<< on mahdollista, täytyy vain elää
kuluttajien l. loppukäyttäjien selaimien ehdoilla.

Eero

[Juhani Anttila]

Post by Muurimäki Perttu
http://tilastokeskus.fi/til/index.html
* Lähdekoodissa h1 ensimmäisenä ja kaikki navigaatio seuraa
leipätekstiä

Hyvä.

Post by Muurimäki Perttu
* Sivu skaalautuu virheettömästi Mozilla ja Webkit -pohjaisilla
selaimilla - -

Mitä tarkoitat skaalautumisella? Kun kavensin Firefoxin (3.0.8) ikkunaa,
tekstit eivät hievahtaneetkaan vaan oikea reuna katosi näkyvistä.

[Perttu Muurimäki]

Post by Juhani Anttila

Post by Muurimäki Perttu
http://tilastokeskus.fi/til/index.html
* Lähdekoodissa h1 ensimmäisenä ja kaikki navigaatio seuraa
leipätekstiä

Hyvä.

Post by Muurimäki Perttu
* Sivu skaalautuu virheettömästi Mozilla ja Webkit -pohjaisilla
selaimilla - -

Mitä tarkoitat skaalautumisella? Kun kavensin Firefoxin (3.0.8) ikkunaa,
tekstit eivät hievahtaneetkaan vaan oikea reuna katosi näkyvistä.

Skaalautumisella viittasin fonttikoon kasvattamiseen/pienentämiseen
(CTRL +/- tai IE:llä valikosta). Tuon merkitys vaan taitaa olla
vähenemässä kun ymmärtääkseni uusimmat selaimet ainakin yrittävät
skaalata rendattua kokonaisuutena (Zoomaavat). Tosin eivät jostakin
syystä aina onnistu siinä.

Olet oikeassa siinä että selainikkunan kaventaminen ei saa aikaan
"flowta" keskimmäisessä palkissa. Siinä mielessä toteutus ei ole oikea
Holy Grail - iloitsin liian varhain :)

[Osmo Saarikumpu]

Post by Muurimäki Perttu
http://tilastokeskus.fi/til/index.html

...

Post by Muurimäki Perttu
Arla-instituutti testasi sivut ja oli niihin tyytyväinen. En usko että
taulukkolayoutilla noiden tekeminen olisi onnistunut.

Vaan käytetäänhän tuollakin taulukoita taittoon, vieläpä sekottaen
siihen inline-tyylejä. Esim.:

<table>
<tr><td style="vertical-align: top; width: 50%;">
<a href="/til/asu.html">Asuminen (8 kpl)</a>

<br /><a href="/til/eli.html">Elinolot (0 kpl)</a>

...

Yst. terv. Osmo

[Perttu Muurimäki]

Post by Osmo Saarikumpu

Post by Muurimäki Perttu
http://tilastokeskus.fi/til/index.html

...

Post by Muurimäki Perttu
Arla-instituutti testasi sivut ja oli niihin tyytyväinen. En usko että
taulukkolayoutilla noiden tekeminen olisi onnistunut.

Vaan käytetäänhän tuollakin taulukoita taittoon, vieläpä sekottaen
<table>
<tr><td style="vertical-align: top; width: 50%;">
<a href="/til/asu.html">Asuminen (8 kpl)</a>
<br /><a href="/til/eli.html">Elinolot (0 kpl)</a>
...
Yst. terv. Osmo

Joo, leipätekstissä on tullut oikaistua muutamassa kohdin
aikataulusyistä... :| Inline -tyylit ovat jääneet tuohon silkasta
laiskuudesta :| Vuori pilkottaa paikoin... Kiitokset muistutuksesta ;)