Skip to main content

De ce ar trebui să evitați tabelele pentru aspectul paginilor web

Week 9 (Aprilie 2025)

Week 9 (Aprilie 2025)
Anonim

Învățarea de a scrie machete CSS poate fi dificilă, mai ales dacă sunteți familiarizați cu utilizarea tabelelor pentru a crea pagini web fanteziste. Dar, în timp ce HTML5 permite tabele pentru aspect, nu este o idee bună.

Tabelele nu sunt accesibile

La fel ca și motoarele de căutare, majoritatea cititoarelor de ecran citesc paginile web în ordinea în care sunt afișate în HTML, iar tabelele pot fi foarte greu pentru cititorii de ecran pentru analiză. Acest lucru se datorează faptului că conținutul într-un tabel, în timp ce este liniar, nu are întotdeauna sens atunci când este citit de la stânga la dreapta și de sus în jos. În plus, cu mese imbricate și cu diferite spanuri de pe masă, celulele pot face pagina foarte dificilă să-și dea seama.

Acesta este motivul pentru care specificația HTML5 recomandă ca tabelele să nu fie structurate și de ce HTML 4.01 nu le permite. Paginile web accesibile permit mai multor persoane să le folosească și sunt marca unui designer profesionist.

Cu ajutorul CSS, puteți defini o secțiune ca aparținând părții din stânga paginii, dar plasați-o ultima în HTML. Apoi, cititorii de ecran și motoarele de căutare vor citi mai întâi părțile importante (conținutul), iar cele mai puțin importante (navigația) ultime.

Tabelele sunt dificile

Chiar dacă creați un tabel cu un editor web, paginile dvs. web vor fi totuși foarte complicate și dificil de întreținut. Cu excepția celor mai simple modele de pagini web, majoritatea tabelelor de layout necesită utilizarea multor atribute și a tabelelor imbricate.

Construirea mesei poate părea ușoară în timp ce o faci, dar odată ce ai terminat, trebuie să o menții. După șase luni, nu este ușor să vă amintiți de ce ați îmbrăcat mesele sau câte celule au fost în ordine și așa mai departe. Să nu mai vorbim, dacă mențineți paginile web ca membru al echipei, trebuie să explicați tuturor celor implicați cum funcționează tabelele sau să aștepte ca ei să ia mai mult timp atunci când trebuie să facă schimbări.

CSS poate fi și mai complicat, dar păstrează prezentarea separată de HTML și face mult mai ușor de întreținut pe termen lung. În plus, cu aspectul CSS puteți scrie un fișier CSS și stilul tuturor paginilor dvs. pentru a arăta astfel. Apoi, atunci când doriți să schimbați aspectul site-ului dvs., schimbați pur și simplu un fișier CSS și întregul site se modifică - nu mai treceți prin fiecare pagină unul câte unul pentru a actualiza tabelele pentru a actualiza aspectul.

Tabelele sunt inflexibile

În timp ce este posibil să creați machete de tabelă cu lățimi procentuale, acestea sunt adesea mai greu de încărcat și pot schimba dramatic aspectul aspectului. Dar dacă utilizați lățimi specificate pentru tabelele dvs., veți ajunge cu un aspect foarte rigid, care nu va arăta bine pe monitoare care sunt dimensionate diferit de cele ale dvs.

Crearea de machete flexibile care arată bine pe multe monitoare, browsere și rezoluții este relativ ușoară. De fapt, cu interogările media CSS, puteți crea desene separate pentru ecrane de dimensiuni diferite.

Tabelele încorporate se încarcă mai încet decât CSS pentru același design

Cea mai obișnuită metodă de a crea machete fanteziste cu mese este să "cuibărești" tabelele. Aceasta înseamnă că una (sau mai multe) tabelă este plasată în interiorul alteia. Cu cât mai multe tabele sunt imbricate, cu atât va dura mai mult timp ca browserul web să redea pagina.

În majoritatea cazurilor, o structură de tabel utilizează mai multe caractere pentru a crea decât un design CSS. Și mai puține personaje înseamnă mai puțin pentru descărcare.

Tabelele pot afecta optimizarea motorului de căutare

Cea mai obișnuită structură de tabelă creată are o bară de navigare în partea stângă a paginii și conținutul principal din partea dreaptă. Atunci când utilizați tabele, aceasta (în general) necesită ca primul conținut care se afișează în HTML să fie bara de navigare din stânga. Motoarele de căutare clasifică paginile pe baza conținutului, iar multe motoare determină faptul că conținutul afișat în partea de sus a paginii este mai important decât alt conținut. Deci, o pagină cu navigație stânga în primul rând, va apărea că are conținut mai puțin important decât navigația.

Folosind CSS, puteți pune primul conținut important în HTML și apoi utilizați CSS pentru a determina locul în care ar trebui să fie plasat în design. Acest lucru înseamnă că motoarele de căutare vor vedea mai întâi conținutul important, chiar dacă designul îl plasează mai jos pe pagină.

Tabelele nu imprimă întotdeauna bine

Multe modele de tabelă nu imprimă bine, deoarece acestea sunt pur și simplu prea largi pentru imprimantă. Deci, pentru a le face să se potrivească, browserele vor tăia tabelele și se vor imprima secțiunile de mai jos, rezultând pagini foarte separate. Uneori ajungeți la pagini care arată bine, dar întreaga parte dreaptă lipsește. Alte pagini vor imprima secțiuni pe diverse coli.

Cu CSS puteți crea o foaie de stil separată doar pentru imprimarea paginii.

Tabelele pentru aspect nu sunt valide în HTML 4.01

Specificația HTML 4 specifică: "Tabelele nu ar trebui să fie utilizate exclusiv ca mijloc de structurare a conținutului documentelor, deoarece acestea ar putea prezenta probleme atunci când sunt redate la medii non-vizuale".

Deci, dacă doriți să scrieți HTML 4.01 valid, nu puteți folosi tabelele pentru aspect. Ar trebui să utilizați numai tabele pentru date tabulare, iar datele tabelare arată în general ca ceva ce ar putea fi afișat într-o foaie de calcul sau eventual într-o bază de date.

Cu toate acestea, HTML5 a modificat regulile și acum tabelele pentru aspect, în timp ce nu sunt recomandate, sunt acum considerate valide HTML. Specificația HTML5 prevede: "Tabelele nu ar trebui să fie utilizate ca ajutoare de aspect." Acest lucru se datorează faptului că tabelele pentru aspect sunt dificil pentru cititorii de ecran să se diferențieze, așa cum am menționat anterior.

Folosind CSS pentru poziționarea și aspectul paginilor dvs. este singura cale HTML 4.01 valabilă pentru a obține modelele pe care le-ați folosit pentru a utiliza tabelele pentru a crea, iar HTML5 recomandă cu tărie această metodă.

Tabelele pentru aspect pot afecta perspectivele dvs. de lucru

Pe măsură ce tot mai mulți designeri noi învață HTML și CSS, aptitudinile dvs. în ceea ce privește structura tabelelor de clădiri vor fi mai puțin și mai puțin solicitate. Da, este adevărat că clienții nu vă spun de obicei tehnologia exactă pe care ar trebui să o utilizați pentru a construi paginile web, dar aceștia solicită lucruri precum:

  • Pagini web accesibile: desenele care pot fi vizualizate de cititorii de ecran sunt mandatate de multe țări și corporațiile găsesc accesibilitatea din ce în ce mai importantă în fiecare zi.
  • Pagini web mentenabile: desene sau modele pe care le pot lua cu ei, chiar dacă nu le veți menține în viitor.
  • Proiecte flexibile: desene sau modele care funcționează în mai multe browsere, rezoluții și dispozitive.
  • Descărcarea rapidă a paginilor: viteza devine din ce în ce mai importantă, chiar și pentru SEO.
  • Proiecte tipărite: pagini care imprimă fără scripturi speciale sau pagini extra.

Dacă nu puteți livra ceea ce solicită clienții, ei vor înceta să vină la dvs. pentru desene sau modele - perioadă. Îți permiteți cu adevărat să lași afacerea să sufere pentru că nu vrei să înveți și să încorporezi o tehnică care a fost folosită de la sfârșitul anilor 1990?

Moralul: Învață să folosești CSS

CSS poate fi dificil de învățat, dar orice merită merită efortul. Nu vă mențineți abilitățile stagnante. Aflați CSS și construiți paginile dvs. web așa cum ar trebui să fie construite - cu CSS pentru aspect.