Miksi sinun pitäisi välttää taulukoita Web-sivuasetteluille

CSS on paras tapa rakentaa web-sivuja

CSS- ulkoasun kirjoittamisen oppiminen voi olla hankalaa, varsinkin jos olet perehtynyt taulukoiden käyttämiseen fancy-sivujen ulkoasujen luomiseen. Mutta vaikka HTML5 sallii taulukoita ulkoasulle, se ei ole hyvä idea.

Taulukot eivät ole käytettävissä

Aivan kuten hakukoneet, useimmat näytönlukijat lukevat verkkosivuja siinä järjestyksessä, että ne näkyvät HTML-muodossa. Ja taulukot voivat olla hyvin vaikeita, kun näytönlukijat analysoivat. Tämä johtuu siitä, että taulukon asettelun sisältö, lineaarisesti, ei aina ole järkevää lukemalla vasemmalta oikealle ja ylhäältä alas. Plus, sisäkkäisillä taulukoilla ja erilaisilla pöydän soluilla voi olla vaikea selvittää sivua.

Tämä johtuu siitä, että HTML5-määritys suosittelee layoutien taulukoita ja miksi HTML 4.01 estää sen. Käytettävissä olevat verkkosivut antavat enemmän ihmisille mahdollisuuden käyttää niitä ja ovat ammattimainen suunnittelija.

CSS: llä voit määritellä osion sivun vasemmalta puolelta, mutta asettaa sen viimeiseksi HTML-muotoon. Sitten näytönlukuohjelmat ja hakukoneet lukevat tärkeät osat (sisältö) ensin ja vähemmän tärkeät osat (navigointi) viimeiseksi.

Taulut ovat hankalia

Vaikka luot taulukon, jossa on web-editori, verkkosivut ovat edelleen hyvin monimutkaisia ​​ja vaikeita ylläpitää. Yksinkertaisimmista verkkosivujen suunnittelusta lukuun ottamatta useimmat layouttaulukot edellyttävät paljon ja ominaisuuksia ja sisäkkäisiä taulukoita.

Pöydän rakentaminen saattaa tuntua helpolta, kun teet sen, mutta sen pitää ylläpitää. Kuusi kuukautta alaspäin ei välttämättä ole yhtä helppoa muistaa, miksi nimetit taulukot tai kuinka monta solua oli peräkkäin ja niin edelleen. Lisäksi, jos ylläpidät verkkosivuja tiimin jäsenenä, sinun on selitettävä jokaiselle henkilölle, miten taulukot toimivat tai odottaa heiltä lisäaikaa, kun he tarvitsevat muutoksia.

CSS voi olla myös monimutkainen, mutta se pitää esityksen erillään HTML: stä ja helpottaa sen pitämistä pitkällä aikavälillä. Lisäksi CSS-ulkoasun avulla voit kirjoittaa yhden CSS-tiedoston ja muotoilla kaikki sivut näin. Ja kun haluat muuttaa sivustosi ulkoasua, voit yksinkertaisesti vaihtaa yhden CSS-tiedoston, ja koko sivusto ei voi enää käydä läpi jokaista sivua kerrallaan päivittääksesi taulukoita ulkoasun päivittämiseksi.

Taulukot ovat joustamattomia

Vaikka on mahdollista luoda taulukon ulkoasuja, joiden prosenttiosuus on leveys, ne ovat usein hitaampia lataamaan ja voivat muuttaa dramaattisesti ulkoasun ulkoasua. Mutta jos käytät taulukoille määritettyjä leveyksiä, pääset hyvin jäykkään ulkoasuun, joka ei näytä hyvältä näytöistä, jotka ovat eri kokoisia kuin omasi.

Joustavien ulkoasujen luominen, jotka näyttävät hyviltä monilta monitoreilta, selaimilta ja päätöslauselmilta, on suhteellisen helppoa. Itse asiassa CSS-mediakyselyissä voit luoda erillisiä malleja eri kokoisia näyttöjä varten.

Sisäkkäiset taulukot latautuvat hitaasti kuin CSS samalle mallille

Tavallisin tapa luoda kuvitteellisia taulukoita on "pesiä" pöytiä. Tämä tarkoittaa, että yksi (tai useampi) taulukko sijoitetaan toiseen. Mitä useampia sisäkkäisiä pöytiä on, sitä kauemmin verkkoselaimelle tehdään sivu.

Useimmissa tapauksissa taulukon ulkoasu käyttää enemmän merkkejä kuin CSS-mallin. Ja vähemmän merkkejä tarkoittaa vähemmän ladata.

Taulukot voivat vahingoittaa hakukoneoptimointia

Tavallisimmalla taulukon luomalla ulkoasu on sivun vasemmalla puolella oleva navigointipalkki ja oikealla oleva pää sisältö. Taulukoita käytettäessä tämä (yleensä) edellyttää, että ensimmäinen sisältö, joka näkyy HTML-muodossa, on vasemmanpuoleinen navigointipalkki. Hakukoneet luokittelevat sivut sisällön perusteella, ja monet moottorit määrittävät, että sivun yläosassa näkyvä sisältö on tärkeämpää kuin muu sisältö. Joten sivu, jossa vasemmalla on navigointi ensin, näyttää olevan sisällön, joka on vähemmän tärkeä kuin navigointia.

CSS: n avulla voit sijoittaa tärkeän sisällön ensin HTML: ään ja käyttää sitten CSS: ää määrittämään, mihin se pitäisi sijoittaa suunnitteluun. Tämä tarkoittaa sitä, että hakukoneet näkevät tärkeän sisällön ensin, vaikka muotoilu alentava sivulle.

Taulut eivät aina tulosta hyvin

Monet taulukkomallit eivät tulosta hyvin, koska ne ovat yksinkertaisesti liian suuria tulostimelle. Joten, jotta ne sopivat, selaimet leikata taulukot pois ja tulostaa osia alla aiheuttaen hyvin disjointed sivua. Joskus pääset sivuille, jotka näyttävät kunnolta, mutta koko oikea puoli puuttuu. Muut sivut tulostavat osioita eri levyille.

CSS: n avulla voit luoda erillisen tyylitiedoston vain sivun tulostusta varten.

Layout-taulukot ovat virheellisiä HTML 4.01: ssä

HTML 4 -spesifikaatiossa todetaan: "Taulukoita ei pidä käyttää pelkästään asiakirjan sisällön asetteluun, koska se voi aiheuttaa ongelmia tulostettaessa ei-visuaaliseen mediaan."

Joten, jos haluat kirjoittaa voimassa olevan HTML 4.01: n, et voi käyttää taulukoita ulkoasulle. Käytä vain taulukkotietojen taulukkoja. Ja taulukkotietoja yleensä näyttää jotain, jota saatat näyttää laskentataulukossa tai mahdollisesti tietokannassa.

Mutta HTML5 muutti sääntöjä ja nyt taulukoita ulkoasulle, mutta ei suositella, ovat nyt voimassa HTML. HTML5-määrityksessä sanotaan: "Taulukoita ei tule käyttää ulkoasumateriaaleina."

Koska seulontalaitteiden taulukoita on vaikea erottaa, kuten edellä mainitsin.

CSS: n käyttäminen sijainnissa ja ulkoasussa sivuillasi on ainoa kelvollinen HTML 4.01 -tapa, jolla voit luoda malleja, joita käytit taulukoiden luomiseen. HTML5 suosittelee myös tätä menetelmää.

Taittojen taulukot voivat vaikuttaa työn näkymiin

Kun yhä useammat uudet suunnittelijat oppivat HTML: n ja CSS: n, taitosi rakennuksen pöydän asettelut ovat yhä vähemmän kysyntää. Kyllä, on totta, että asiakkaat eivät yleensä kerro sinulle tarkkaa tekniikkaa, jota sinun pitäisi käyttää verkkosivujen rakentamiseen. Mutta he kysyvät sinulta sellaisia ​​asioita kuin:

Jos et pysty toimittamaan sitä, mitä asiakkaat pyytävät, he lopettavat teidän tulleen suunnitteille, ehkä ei tänään, mutta ehkä ensi vuonna tai sitä seuraavana vuonna. Onko sinulla todella varaa antaa yrityksesi kärsiä, koska et ole valmis aloittamaan tekniikkaa, joka on ollut käytössä 1990-luvun lopulta lähtien?

Moral: oppia käyttämään CSS: tä

CSS: tä voi olla vaikea oppia, mutta kaiken arvoinen on vaivan arvoista. Älä pidä taitojasi pysähtyneenä. Opi CSS: ää ja rakenna verkkosivustasi tavalla, jolla ne oli tarkoitus rakentaa - CSS: llä asettelua varten.