Защо трябва да избягвате таблици за оформления на уеб страници

Научете се да пишете CSS оформленията могат да бъдат трудни, особено ако сте запознати с използването на таблици за създаване на изискани оформления на уеб страници. Но докато HTML5 позволява таблици за оформление, не е добра идея.

Масите не са достъпни

Подобен на търсачки, повечето екранни четци четат уеб страници в реда, в който се показват в HTML, а таблиците могат да бъдат много трудни за синтактичен анализ. Съдържанието в оформлението на таблицата, макар и линейно, не винаги има смисъл, когато се чете отляво надясно и отгоре надолу. Освен това с вложени таблици и различни обхвати в клетките на таблицата може да направи страницата трудна за разгадаване.

Това е причината, че Спецификация на HTML5 препоръчва срещу таблици за оформление и защо HTML 4.01 го забранява. Достъпните уеб страници позволяват на повече хора да ги използват и са марката на професионален дизайнер.

С CSS можете да определите раздел като принадлежащ към лявата страна на страницата, но да го поставите последен в HTML. Тогава четците на екрана и търсачките ще прочетат най-напред важните части (съдържанието) и последните по-малко важните части (навигацията).

instagram viewer

Масите са сложни

Дори ако създадете таблица с уеб редактор, вашите уеб страници пак ще бъдат сложни и трудни за поддръжка. С изключение на най-опростените дизайни на уеб страници, повечето таблици с оформление изискват използването на много и атрибути и на вложени таблици.

Изграждането на масата може да изглежда лесно, докато го правите, но след като е готово, трябва да го поддържате. Шест месеца по линията може да не е толкова лесно да си спомните защо сте вложили таблиците или колко клетки са били в ред и т.н. Да не говорим, че ако поддържате уеб страници като член на екип, трябва да обясните на всички участващи как работят таблиците или да очаквате да отделят допълнително време, когато трябва да направят промени.

CSS също може да бъде сложен, но поддържа презентацията отделно от съдържанието и улеснява поддръжката в дългосрочен план. Освен това с CSS оформлението можете да напишете един CSS файл и да оформите всичките си страници, за да изглеждате по този начин. След това, когато искате да промените оформлението на вашия сайт, просто променяте един CSS файл и целия промени в сайта - няма повече да преглеждате всяка страница една по една, за да актуализирате таблиците, за да актуализирате оформление.

Масите са негъвкави

Въпреки че е възможно да се създадат оформления на таблици с процентни ширини, те често се зареждат по-бавно и могат драстично да променят начина, по който изглежда оформлението ви. Но ако използвате определени ширини за вашите таблици, в крайна сметка получавате много твърдо оформление, което няма да изглежда добре на монитори, които са с размер, различен от вашия.

Създаването на гъвкави оформления, които изглеждат добре на много монитори, браузъри и резолюции, е относително лесно. Всъщност с CSS медийните заявки можете да създавате отделни дизайни за екрани с различен размер.

Таблици Боли Оптимизация на търсачките

Най-разпространеното оформление, създадено от таблица, използва лента за навигация от лявата страна на страницата и основното съдържание отдясно. Когато се използват таблици, този подход (обикновено) изисква първото съдържание, което се показва в HTML, да е лявата навигационна лента. Търсачките категоризират страниците въз основа на съдържанието и много двигатели определят, че съдържанието, показвано в горната част на страницата, е по-важно от другото съдържание. Така че, страница с навигация отляво първо ще изглежда със съдържание, което е по-малко важно от навигацията.

Използвайки CSS, можете да поставите важното съдържание първо във вашия HTML и след това да използвате CSS, за да определите къде трябва да бъде поставено в дизайна. Това означава, че търсачките ще видят първо важното съдържание, дори ако дизайнът го постави по-надолу на страницата.

Таблиците не винаги се отпечатват добре

Много дизайни на таблици не се отпечатват добре, защото те са просто твърде широки за принтера. Така че, за да ги пригодят, браузърите отрязват таблиците и отпечатват раздели по-долу, което води до разединени страници. Понякога се стига до страници, които изглеждат добре, но липсва цялата дясна страна. Други страници ще отпечатат раздели на различни листове.

С CSS можете да създадете отделен лист със стилове само за отпечатване на страницата.

Таблиците за оформление са невалидни в HTML 4.01

The Спецификация на HTML 4: "Таблиците не трябва да се използват само като средство за оформление на съдържанието на документа, тъй като това може да създаде проблеми при изобразяване на невизуални носители."

Така че, ако искате да напишете валиден HTML 4.01, не можете да използвате таблици за оформление. Трябва да използвате таблици само за таблични данни, а табличните данни обикновено изглеждат като нещо, което може да покажете в електронна таблица или евентуално база данни.

HTML5 обаче промени правилата и сега таблиците за оформление, макар и да не се препоръчват, се считат за валиден HTML. Спецификацията на HTML5 гласи: „Таблиците не трябва да се използват като помощни средства за оформление.“ Това е така, защото таблиците за оформление са трудни за разграничаване на екранните четци, както бе споменато по-рано.

Използването на CSS за позициониране и оформление на вашите страници е единственият валиден начин в HTML 4.01 да получите дизайните, които сте използвали за създаване на таблици, а HTML5 настоятелно препоръчва и този метод.