Taulukkotaitosta CSS-taittoon.
Useat pitkään HTML:n parissa olleen henkilöt, ns. vanhan koulukunnan ihmiset (sekä henkilöt jotka vasta opettelevat www-sivujen tekoa) tekevät www-sivujen rakenteen käyttäen taulukkotaittoa, eli kasaavat sivun taulukoitten avulla. Tämähän on todellakin väärä tapa ja siksi onkin aika opettaa nykyaikaisempi (oikea?) tapa, eli CSS-taitto ja rakenteellinen merkkaus.
Miksi "EI" taulukkotaitolle?
Taulukkoelementit on tarkoitettu vain yhteen käyttötarkoitukseen; taulukkomuotoisen datan esittämiseen. Sitä ei pidä käyttää mihinkään muuhun. Taulukoitten käyttäminen johonkin muuhun tarkoitukseen rikkoo web-standardeja, sekä semantiikallisia ohjeita.
Mikä olisi parempi tapa?
Nykyaikaisempi, standardien mukainen ja kaikin tavoin parempi tapa on käyttää CSS:ää ja rakenteellista merkkausta. Tällöin puhutaan CSS-taitosta. Kaikki pelkästään ulkoasuun vaikuttavat tekijät tulisi toteuttaa CSS:llä ja vain rakenne merkataan (X)HTML:llä. Elementtejä ja tageja tulisi käyttää siihen, mihinkä ne on tarkoitettu. Eli taulukkoelementtiä ei enään käytetä ulkoasun tekemiseen, vaan taulukkomuotoisen datan esittämiseen jne.
Kuinka tehdä CSS-taitolla ulkoasu?
Käyttämällä taulukoitte sijaan esimerkiksi div-elementtiä. Div-elementti on lohkomainen elementti, jolle voidaan antaa lähes mitä tahansa CSS määrityksiä. CSS-taitto vaatii tietenkin omanlaisensa ajattelutavan dokumentin rakentamisesta, mutta ei ole kuitenkaan vaikeata. Jotta asia kävisi paremmin ilmi, on seuraavaksi esimerkki div-elemenntien käytöstä verrattuna taulukkotaittoon.
Lähtökohdat:
Tarkoituksenamme on tehdä ulkoasu, jossa on header (logo), navigaatio, sisältö ja tekijänoikeusmerkinnät allekkain. Alla kuva havainnollistamassa tilannetta.
(Klikkaa kuvaa nähdäksesi se suurena)
Oletetaan, että haluaisimme toteuttaa ylläolevan ulkoasun taulukoilla. Leikkaisimme kuvan luultavasti neljään (4) osaan, jotka olisivat header, menu, keski ja copyright. Tekisimme siis taulukon, jossa on neljä lokeroa ja kussakin lokerossa yksi solu.
<table> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
Soluihin laittaisimme äsken pilkkomamme kuvat ja muotoilisimme solut, ja tekstin halutunlaiseksi. Tämä tapa on kuitenkin väärä ja huono. Toteutetaan siis sama div-elementeillä!
<div id="header"></div> <div id="menu"></div> <div id="keski"></div> <div id="copyright"></div>
Ylläolevassa esimerkissä teimme neljä div-elementtiä, joille laitoimme id-tunnisteen ja niille kullekkin oman arvon. Koska haluamme noudattaa standardeja, niin emme laita näihin elementteihin mitään ulkoasuun vaikuttavia tekijöitä. Emme leveyttä, korkeutta, tekstin tyylejä, tai mitään muutakaan. Niissä on vain tunniste ja tunnisteen arvo. Kaikki tyylimääritykset teemme siis CSS:llä tekemällä joko ulkoisen CSS-tiedoston, laittamalla määritykset head-tagiin, tai suoraan elementteihin. Suosittelen käyttämään ulkoista tiedostoa, sillä se nopeuttaa sivuston latautumista huomattavasti.
Koska ulkoasu olisi vaatinut paljon määrityksiä, niin en niitä tähän artikkeliin laittanut. Suosittelenkin tutustumaan Vulpesin CSS-oppaaseen, jos et ole perillä CSS:n toiminnasta.
Näin helposti voimme vaihtaa taulukkotaitosta css-taittoon ja kohti oikeellisempaan merkkaukseen.
Käyttämällä CSS-taittoa ja ulkoista CSS-tiedostoa saadaan dokumentin koko pienennettyä todella paljon ja täten sivut latautumaan nopeammin.
