Таблиците бяха универсалния инструмент в HTML, преди да бъдат анатемосани от поддръжниците на уеб-стандартите и да се превърнат в табу за уеб-разработчиците. Но има ли нещо по-лошо от тях? Да, има, и това е сляпото им отбягване и стремежът да се представят табличини данни с други елементи. Поводът да пиша това е следната случка:

За един проект наскоро трябваше да създам страница, която съдържа описание на продукт и списък с предимства и недостатъци. Естествено реших предимствата и недостатъците да ги представя като неподредени списъции да ги разположа един до друг, така лесно се вижда кое преобладава и потребителя си прави обща оценка с един поглед. Този подход обаче има един недостатък – отделните позиции в двата списъка не винаги са разположени едни срещу други поради различната дължина на текста. Най-често позициите се събират на един или два реда, така че като зададох минимална височина на отделните li елементи, равна на два реда, нещата в повечето случай се нареждат добре. Но от време на време се появява накоя позиция, която заема три реда и разбива хубавата подредбата и силно нарушава естетическото чувство както на клиента, така и моето, и потенциално на потребителите. Докато обсъждахме проблема, едно от решенията беше да се редактират по-дългите текстове, или да отидат на края на списъците. Другото възможно решение беше да вкарам предимствата и недостатъците в две колони на таблица – нещо, което исках да избегна, защото смятах, че списъците са семантично по-правилния вариант.

<h3>Предимсва</h3>
<ul>
    <li>предимство едно</li>
    <li>предимство две</li>
</ul>
<h3>Недостатъци</h3>
<ul>
    <li>недостатък първи</li>
    <li>недостатък втори</li>
</ul>

Сравнете горната конструкция с тази:

<table>
    <thead>
        <tr>
            <th>Предимства</th>
            <th>Недостатъци</th>
            </tr>
    </thead>
    <tbody>
        <tr>
            <td>предивство едно</td>
            <td>недостатък първи</td>
        </tr>
        <tr>
            <td>предивство две</td>
            <td>недостатък втори</td>
        </tr>
    </tbody>
</table>

Междувременно клиентът се допитал до сврой приятел, който дал друг вариант за постигане на желания ефект, избягвайки използването на таблица:

<div>
    <div>предимство едно</div>
    <div>недостатък първи</div>
</div>
<div>
    <div>предимство две</div>
    <div>недостатък втори</div>
</div>

Като се използва float:left за вътрешните div елементи и clear за външните, се постига точно ефекта на таблица, но без омразните table, tr, td. Но дали това прави този подход по-добър? Категорично не! Защото чрез използването на анонимни div елементи, които не дават никакво описание на съдържанието в тях, лишаваме съдържанието от значението, което другите елементи биха му дали. Докато таблицата указва ясно, че всяка клетка принадлежи на колоната с плюсове, или колоната с минуси, поредицата от div елемени служи единствено да отдели фразите една от друга, без да казва нищо за тяхното значение. Чрез използването на неподредени списъци ясно показвам, че това са два независими набора от характеристики на продукта, и чрез заглавните елементи обозначавам двата списъка, докато поставянето на заглавни елементи в div-подхода допълнително обърква нещата, защото двете заглавия са едно след друго и първото всъщност не оглавява никакво съдържание.

Е какво от това, ще попитате, нали като ги оформим със CSS, всички варианти изглеждат (почти) еднакво? А кой е казал, че потребителите ще разглеждат сайта с браузър, поддържащ CSS и JavaScript? И преди да ме замерите със статистики колко нищожно малко са мобилните потребители или текстовите браузъри, аз ще ви припомня, че повечето инструменти за статистика на посещенията разчитат на JavaScript и на картинки, така че никога няма да видите в списъка с браузъри Lynx например. За потребителите с нарушено зрение вашия CSS няма никакво значение (освен ако не сте се погрижили екранния четец да произнася различните елементи с различен глас), Google, Yahoo и останалите търсачки също не се интересуват от визуалното представяне на страницата ви.

Винаги, когато създавате един уеб-сайт, първо структурирайте правилно съдържанието с подходящи HTML тагова, поставете id и class атрибути, описващи ролята на даден блок от съдържане (а не изгледа му). Помислете дали няма да е подходящо да използвате микроформати за някои елементи от сайта. И чак след това подредете визията чрез виртуозно съчетание от CSS правила. Направете сайта си достъпен и накарайте и слепите да прогледнат, и чак догава дарете зрящите с визуална наслада.

Етикети: CSS, HTML, достъпност, микроформати, уеб стандарти