Miks peaksite vältima tabeleid veebilehe kujunduste jaoks

CSS on parim veebisaitide kujundamise viis

CSS- skeemide kirjutamise õpetamine võib olla keeruline, eriti kui olete tuntud tabelite kasutamisega, et luua fantastilisi veebilehe kujundusi. Kuigi HTML5 lubab paigutamiseks tabeleid, pole see hea mõte.

Tabelid ei ole kättesaadavad

Täpselt nagu otsingumootorid, enamik ekraanilugejaid loeb veebilehti järjekorras, et neid kuvatakse HTML-is. Ja lauad võivad ekraanilugejate jaoks analüüsimiseks olla väga raske. Seda seetõttu, et tabeli paigutuse sisu, kui see on lineaarne, ei ole alati loogiline, kui lugeda vasakult paremale ja ülevalt alla. Peale selle on pandud tabelid ja lauakellade mitmesugused kalded võivad lehte väga raske välja mõelda.

See on põhjus, miks HTML5-spetsifikatsioon soovitab paigutamise tabeleid ja miks HTML 4.01 keelab selle. Juurdepääsetavad veebilehed võimaldavad rohkem inimesi neid kasutada ja on professionaalse kujundaja märgiks.

CSS-iga saate määratleda osa, mis kuulub lehe vasakusse serva, kuid asetage see HTML-i viimati. Siis loeb ekraanilugejad ja otsingumootorid esmalt tähtsad osad (sisu) ja vähem olulised osad (navigeerimine).

Tabelid on keerulised

Isegi kui loote veebirakendajaga tabeli, on teie veebilehed ikkagi väga keerulised ja raskesti hooldatavad. Enamike lihtsamate veebilehtede kujunduste jaoks on enamikul paigutustabelitel vaja kasutada palju ja atribuute ning pandud tabeleid.

Tabeli ehitamine võib tunduda lihtne, kui te seda teete, kuid siis peate seda säilitama. Kuue kuu jooksul rida ei pruugi olla nii lihtne meeles pidada, miks sa laudasid või kui palju rakke oli järjest ja nii edasi. Veelgi enam, kui teete veebisaite meeskonnaliikmena, peate iga inimese kohta selgitama, kuidas tabeleid töötab või oodata, et neil on vaja muudatusi teha täiendava aja jooksul.

CSS võib olla keeruline, kuid see hoiab esitluse eraldi HTML-st ja muudab pikas perspektiivis palju lihtsamaks. Lisaks saab CSS-i kujundusega kirjutada ühe CSS-faili ja lohistada kõiki oma lehti sellisel viisil. Ja kui soovite oma saidi kujundust muuta, siis lihtsalt muudate ühe CSS-faili ja kogu saidi chnges - mitte rohkem lehte iga lehe järel korraga, et värskendada tabeleid paigutuse värskendamiseks.

Tabelid on paindumatud

Kuigi on võimalik luua protsentuaalsete laiusega laualoode, on need sageli laadimisele aeglasemad ja võivad dramaatiliselt muuta kujunduse välimust. Aga kui kasutate oma tabelite jaoks määratud laiusi, jõuate lõpuni väga jäigale paigutusele, mis ei tundu hea välja monitoride puhul, mis on teie enda jaoks erinevad.

Paindlike paigutuste loomine, mis sobib paljudele monitoridele, brauseritele ja resolutsioonidele, on suhteliselt lihtne. Tegelikult saate CSS-i meediumipäringute abil luua erineva suurusega ekraanide kujunduse.

Sisestatud tabelid laaditakse aeglasemalt CSS-i samale kujundusele

Kõige levinum viis tabelitega väljamõeldud kujundite loomiseks on "lohistada" tabeleid. See tähendab, et üks (või rohkem) tabel paigutatakse teisele. Mida rohkem tabeleid on lingitud, seda kauem kulub veebilehe kujundamiseks veebibrauser.

Enamikul juhtudel kasutab laua paigutus kui CSS disaini loomiseks rohkem märke. Ja vähem märke tähendab vähem allalaadimist.

Tabelid võivad halvendada otsingumootori optimeerimist

Kõige levinumal tabelis loodud paigutusel on lehe vasakul küljel olev navigeerimisriba ja paremal olev põhisisu. Tabelite kasutamisel eeldab see (üldiselt), et esimene HTML-is kuvatav sisu on vasakpoolne navigeerimisriba. Otsingumootorid liigitavad lehtede järgi sisu ja paljud mootorid leiavad, et lehe ülaosas kuvatav sisu on olulisem kui muu sisu. Seega näib, et vasakpoolse navigeerimise lehel esineb sisu, mis on navigatsioonist vähem oluline.

Kasutades CSS-i, võite sisestada oma HTML-is olulise sisu esmalt ja seejärel kasutada CSS-i, et määrata kindlaks, kuhu see paigutada disainile. See tähendab, et otsingumootorid näevad kõigepealt olulist sisu, isegi kui disain paigutab selle lehele allapoole.

Tabelid ei pruugi alati printida

Paljud laua kujundused ei prindita hästi, kuna need on printeri jaoks liiga suured. Nii et need sobivad nii, et brauserid lõigavad tabelid välja ja printida allpool toodud jaotised, mille tulemuseks on väga erinevad lehed. Mõnikord saate lõpuks leheküljed, mis tunduvad hästi, aga kogu parempoolne osa puudub. Muud lehed prindivad eri lehtede sektsioone.

CSS-iga saate luua eraldi stiililehe lehe printimiseks.

Paigutuse tabelid on valedokumendis HTML 4.01

HTML 4-spetsifikatsioon sätestab: "Tabeleid ei tohiks kasutada ainult dokumendisisu paigutamise vahendina, kuna see võib tekitada probleeme mittevisuaalse meediumiga renderdamisel."

Seega, kui soovite kirjutada kehtivat HTML 4.01, ei saa te tabeleid paigutuse jaoks kasutada. Peaksite tabeleid ainult tabeleid kasutama. Ja tabeliandmed näevad üldiselt välja midagi, mida võite kuvada arvutustabelis või andmebaasis.

Kuid HTML5 muutis reegleid ja nüüd paigutamiseks tabelid, kuid pole soovitatav, on nüüd kehtiv HTML. HTML5-i spetsifikatsioon sätestab: "Tabeleid ei tohiks kasutada paigutusena."

Kuna ekraanilugejate jaoks on tabelid paigutamiseks raskendatud, nagu ma eespool mainisin.

CSS-i kasutamine lehtede paigutamiseks ja paigutamiseks on ainus kehtiv HTML 4.01 viis, kuidas luua kujundusi, mida te kasutasite tabelite kasutamiseks. Ja HTML5 soovitab tungivalt ka seda meetodit.

Paigutuse tabelid võivad teie tööpakkumisi mõjutada

Kuna üha rohkem uusi disainereid õpib HTML-i ja CSS-i, muutuvad teie oskused hoone laua kujunduste järele vähem ja vähem nõudlust. Jah, on tõsi, et kliendid ei ütle teile tavaliselt täpset tehnoloogiat, mida peaksite oma veebisaitide loomiseks kasutama. Aga nad küsivad teilt asju nagu:

Kui te ei saa pakkuda klientide nõudmisi, siis nad ei tule teie juurde disainilahenduste, võib-olla mitte täna, kuid võib-olla järgmisel aastal või aasta pärast. Kas saate tõesti endale lubada, et teie ettevõte kannatab, sest te ei soovi õppida tehnikat, mida on kasutatud alates 1990-ndate aastate lõpust?

Moraal: õppida kasutama CSS-i

CSS-i võib olla raske õppida, kuid midagi väärt on väärib jõupingutusi. Ärge hoidke oma oskusi seiskumisest. Lugege CSS-i ja ehitage oma veebisaidid nii, nagu need olid mõeldud ehitamiseks, CSS-i kujundamiseks.