Keskustelu: Nettisivujen teko: CSS vs Table

Eli olen vakavissani siirtymässä pois taulujen käytöstä. Mutta ongelmia tuli näin alkuun heti. Jos haluan tehdä tyyleillä "taulun" jossa on useampi solu ja rivi niin kuinkas tuo onnistuu käytännössä? Eli "taulussa" pitäisi olla ainakin 3 riviä ja jokaista riviä kohden ainakin 2 solua. Toivottavasti saitte selkoa :)

Ja olisi hauska tietää mielipide että kuka täällä kannattaa vielä taulujen käyttöä, jotenkin minusta tuntuu että noita monimutkaisempia rakenteita ei ole niin helppoa vääntää tyyleillä..

Onko tässä nyt kyse layoutin suunnittelusta? Jos sulla on taulukko-dataa, niin ei sitä kannata ihan väkisin divien sisään laittaa.

Itellä on vähän niin ja näin noiden taulukoiden käyttö, mutta pääasiallisesti pyrin välttämään niiden väärinkäyttöä.

Siis taulukot taulukkoon, sitä vartenhan se <table> on. Eihän taulukoita ole poistettu XHTML-määrityksestä.

Juu eli olen tarvinnut html-tauluja pääasiassa erilaisten formien käyttöön, joissa voi olla monia kerroksia input ja textarea-kenttiä. Mutta jos tyylien tuki on vielä niin lastenkengissä niin on sitten tyytyminen perinteisiin tauluihin. Kuulin että tuo diveillä rendaaminen olisi myäs nopeampaa kuin normaaleilla tauluilla.

No noista formi-"taulukoista" saa kyllä ihan taulukon näkösen ilman taulukkoakin:

<div style="border: 1px solid black;">
   <input type="text" name="Nimi" style="float: right;" />Anna nimesi:
</div>
<div style="border: 1px solid black;">
   <input type="text" name="Osoite" style="float: right;" />Anna osoitteesi:
</div>

Tyylien tuen rajoittuneisuudesta tässä ei suinkaan ole kyse, vaan siitä että merkintä vastaa merkitystä, tagi tietoa, toisin sanoen semantiikasta.

Sivun layout pitäisi optimaalisessa tapauksessa saada aikaan yhden tagin(<link> jolla CSS linkitetään sivuun) avulla, sillä se ei ole (useimmissa tapauksissa) sisältöä, vaan ohjeet sen näyttöön. Taulukoiden käyttö elementtien asetteluun rikkoo tätä ohjesääntöä täysin, kuin myös divien käyttö varsinaisen taulukkomuotoisen datan (esim. tutkimustulosten esitys, ei kuitenkaan esim. "taulukkoa muistuttava" formikenttä) esittämiseen.

Kun sisältö ja tyyli erotellaan kunnolla, sivujen ylläpito ja muokkaus on järjettömän paljon helpompaa, ja semanttisesti kirjoittamalla sisältö voi parhaimmillaan olla yhtä helppolukuista selaimella kuin ilmankin(sorsaa katsomalla, siis). Semanttinen merkkaus myös antaa selaimille enemmän mahdollisuuksia tiedonsaannin helpottamiseen, esimerkkinä vaikka title-attribuutilla varustettu <acronym>-tagi, josta pätevä selain osaa näyttää lyhenteen alkuperän kun hiiri sen päälle viedään.

Huomauttaisin että myös tuo ajv:n esimerkki on semanttisesti huonoa merkkausta, <legend> ja <fieldset> ovat olemassa juuri noita tekstejä varten.

EDIT: Vielä viimeisenä silauksena sopivan yksinkertainen esitelmöinti taulukkotaiton typeryydestä: http://www.aimedia.fi/stupid_tables/ :)

Tempfilen huomautus fieldsetistä ja legendistä ei mennyt aivan täysin kohdalleen. Fieldset toki menee divin tilalle, mutta legend on otsikko useammalle sitä seuraavalle elementille. Input-elementeille voi taas määrittää labelin avulla kuvauksen. Joten:

<fieldset>
	<legend>Henkilötiedot</legend>
	<p>
		<label for="nimitiedot">Nimi:</label>
		<input id="nimitiedot" name="nimi" type="text" value="" />
	</p>
	<p>
		<label for="kotipaikka">Kotipaikka:</label>
		<input id="kotipaikka" name="paikkakunta" type="text" value="" />
	</p>
</fieldset>

CSS:n avulla voi sitten hoitaa tyylittelyn miten haluaa, CSS:ää on minusta turha sotkea HTML-koodin sekaan. Koodin järjestyksellähän on väliä, sillä sivunhan pitäisi näyttää luettavalta ja tiedon olla oikeassa järjestyksessä myös ilman tyylejä (mikä usein unohtuu kun ajatellaan vain ulkoasulähtöisesti).

Tosin sanottakoon vielä tähän, että legendin tyylitteleminen ei ole aivan niin helppo nakki kuin haluaisi. Tästä on juttua yhdellä esimerkkisivulla.

Jep, tuo oma esimerkkini jäi kieltämättä tuonne ruohonjuuritasolle, eli siitä selviää vain CSS-koodit, joilla vasen-oikea -asetelman saa aikaiseksi.