Miksi sinun pitäisi välttää verkkosivujen asetteluitaulukoita

Opi kirjoittamaan CSS asettelut voivat olla hankalia, varsinkin jos olet perehtynyt taulukoiden käyttämiseen hienojen verkkosivujen asettelujen luomiseen. Mutta kun HTML5 sallii taulukoiden asettelun, se ei ole hyvä idea.

Taulukot eivät ole käytettävissä

Samanlainen kuin hakukoneet, useimmat näytönlukuohjelmat lukevat verkkosivuja siinä järjestyksessä kuin ne näkyvät HTML-muodossa, ja taulukoiden lukeminen voi olla erittäin vaikeaa. Vaikka taulukon asettelun sisältö on lineaarinen, sillä ei ole aina järkevää lukea vasemmalta oikealle ja ylhäältä alas. Lisäksi sisäkkäisillä taulukoilla ja erilaisilla alueilla taulukon soluissa voi olla vaikea ymmärtää sivua.

Tämä on syy siihen, että HTML5-määrittely suosittelee vastaan taulukot asettelua varten ja miksi HTML 4.01 estää sen. Esteettömien verkkosivujen avulla useammat ihmiset voivat käyttää niitä ja ne ovat ammattimaisen suunnittelijan merkki.

CSS: n avulla voit määrittää osan kuuluvaksi sivun vasemmalle puolelle, mutta sijoittaa sen viimeiseksi HTML: ään. Sitten näytön lukijat ja hakukoneet lukevat tärkeät osat (sisältö) ensin ja vähemmän tärkeät osat (navigointi) viimeisenä.

instagram viewer

Pöydät ovat hankalia

Vaikka luot taulukon web-editorilla, verkkosivusi ovat silti monimutkaisia ​​ja vaikeita ylläpitää. Yksinkertaisimpia verkkosivumalleja lukuun ottamatta useimmat asettelutaulukot edellyttävät paljon ja attribuutteja sekä sisäkkäisiä taulukoita.

Pöydän rakentaminen voi tuntua helpolta, kun teet sitä, mutta kun se on valmis, sinun on ylläpidettävä sitä. Kuusi kuukautta viivaa pitkin ei ehkä ole yhtä helppoa muistaa, miksi taitoit pöydät tai kuinka monta solua oli rivissä ja niin edelleen. Puhumattakaan siitä, että jos ylläpidät verkkosivuja tiimin jäsenenä, sinun on selitettävä kaikille mukana oleville taulukkojen toiminta tai odotettava heidän käyttävän lisäaikaa muutosten tekemisessä.

CSS voi olla myös monimutkainen, mutta se pitää esityksen erillään sisällöstä ja helpottaa ylläpitämistä pitkällä aikavälillä. Lisäksi CSS-asettelulla voit kirjoittaa yhden CSS-tiedoston ja tyylittää kaikki sivusi näyttämään tältä. Kun sitten haluat muuttaa sivustosi asettelua, vaihdat yksinkertaisesti yhden CSS-tiedoston ja koko sivustomuutokset - ei enää tarvitse käydä läpi jokaista sivua yksi kerrallaan päivittääksesi taulukot päivittääksesi layout.

Pöydät ovat joustamattomia

Vaikka on mahdollista luoda taulukon asettelut prosenttileveydellä, ne ovat usein hitaampia ladata ja voivat muuttaa dramaattisesti ulkoasun ulkoasua. Mutta jos käytät määritettyjä leveyksiä pöytiin, päädyt erittäin jäykkään asetteluun, joka ei näytä hyvältä näytöiltä, ​​jotka on kooltaan eri kuin omasi.

Joustavien ulkoasujen luominen, jotka näyttävät hyviltä monissa näytöissä, selaimissa ja resoluutioissa, on suhteellisen helppoa. Itse asiassa CSS-mediakyselyillä voit luoda erillisiä malleja erikokoisille näytöille.

Taulukot vahingoittavat hakukoneoptimointia

Yleisimmässä taulukon luomassa asettelussa käytetään siirtymispalkkia sivun vasemmalla puolella ja pääsisältöä oikealla. Taulukoita käytettäessä tämä lähestymistapa (yleensä) edellyttää, että ensimmäinen HTML-muodossa näkyvä sisältö on vasen siirtymispalkki. Hakukoneet luokittelevat sivut sisällön perusteella, ja monet moottorit päättävät, että sivun yläosassa näkyvä sisältö on tärkeämpää kuin muu sisältö. Joten sivulla, jossa on ensin vasen navigointi, näyttää olevan sisältöä, joka on vähemmän tärkeää kuin navigointi.

CSS: n avulla voit laittaa tärkeän sisällön ensin HTML-koodiin ja sitten CSS: n avulla määrittääksesi, mihin se tulisi sijoittaa suunnitteluun. Tämä tarkoittaa, että hakukoneet näkevät tärkeän sisällön ensin, vaikka muotoilu sijoittaa sen alaspäin sivulle.

Taulukot eivät aina tulosta hyvin

Monet pöydän mallit eivät tulostu hyvin, koska ne ovat yksinkertaisesti liian leveitä tulostimelle. Joten, jotta ne olisivat sopivia, selaimet leikkaavat taulukot irti ja tulostavat alla olevat osiot, jolloin sivut ovat erillään. Joskus päädyt sivuille, jotka näyttävät hyvältä, mutta koko oikea puoli puuttuu. Muut sivut tulostavat osioita eri arkeille.

CSS: n avulla voit luoda erillisen tyylisivun vain sivun tulostamista varten.

Asettelun taulukot ovat virheellisiä HTML 4.01: ssä

HTML 4 -määrittelytilat: "Taulukoita ei pidä käyttää pelkästään välineenä asiakirjan sisällön asetteluun, koska tämä voi aiheuttaa ongelmia renderöitessä muuhun kuin visuaaliseen mediaan."

Joten, jos haluat kirjoittaa kelvollisen HTML 4.01: n, et voi käyttää taulukkoja asetteluun. Käytä taulukoita vain taulukkotietoihin, ja taulukkotiedot näyttävät yleensä siltä, ​​mitä saatat näyttää laskentataulukossa tai mahdollisesti tietokannassa.

HTML5 muutti kuitenkin sääntöjä ja nyt asettelutaulukoita pidetään kelvollisina HTML-tiedostoina, vaikka niitä ei suositella. HTML5-määrityksessä todetaan: "Taulukoita ei tule käyttää ulkoasun apuvälineinä." Tämä johtuu siitä, että ulkoasun taulukoita on vaikea erottaa näytönlukuohjelmista, kuten aiemmin mainittiin.

CSS: n käyttäminen sivujen sijoittamiseen ja asetteluun on ainoa kelvollinen tapa HTML 4.01 saada mallit, joita käytit taulukkojen luomiseen, ja HTML5 suosittelee myös tätä menetelmää.