Почему DIV лучше TABLE


Почему DIV лучше TABLEМногие говорят, что табличная верстка «надежнее», проще и быстрее, но еще больше мнений о том, что все-таки блочная верстка быстрее проще и «надежней». Я постараюсь изложить свои мысли о том, почему блочная верстка лучше табличной и сделаю это небольшим списком.

1) Табличная верстка более громоздка, соответственно увеличивает размер загружаемого кода, что приводит к медленной загрузки страницы. Для наглядности пример:

Код на таблицах (109 байт):

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td>Hello world!</td>
</tr>
</tbody>
</table>

Код на дивах (23 байт):

<div>Hello world!</div>

Думаю комментарии излишни.

2) Таблица в браузере отображается только после полной прорисовки, что также пагубно влияет на время отображения контента на странице.

3) Вложенность таблиц и сложная структура строк и столбцов в итоге редактируется намного дольше и сложнее, чем блочно на дивах.

4) Гибкость верстки очень ограничена при табличной верстке. Чтоб добавить что-то куда-то, нужно практически переделывать всю структуру таблицы.

5) Таблицы семантически не предназначены для верстки. Они нужны для таблиц! Да, именно для вывода табличных данных, что нам удобней и привычней.

6) Индексация поисковыми роботами происходит хуже, когда сайт на таблицах, а все потому, что плотность нужного текста очень сильно разбавляется тегами таблиц. Это хорошо видно в 1 пункте.

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 7, в среднем: 3.43 из 5)
Loading ... Loading ...


  1. #1 zeloras - Август 16th, 2011 at 01:53

    Привидите пример пожалуйста как сделать простенький сайтец на дивах что бы он был оцентрован, естественно и использованием CSS, буду очень признателен)

  2. #2 AquaGen - Август 20th, 2011 at 11:36

    А блог какого года? Вроде как уже 10 лет никто на таблицах не верстает <_<

  3. #3 zeloras - Август 31st, 2011 at 18:29

    AquaGen :
    А блог какого года? Вроде как уже 10 лет никто на таблицах не верстает <_<

    Ну вообщето некоторые еще верстают…Например я, когда от меня не требуют делать дизайн и верстку, я использую таблицы.
    Но Div конечно же лучше)

  4. #4 krock - Октябрь 24th, 2011 at 04:03

    всё оно правильно. но последнее время поисковики и хостинги так наловчились, что вёрстка почти не влияет.

  5. #5 nice - Октябрь 25th, 2011 at 21:35

    ну хостинг тут не причем… а вот поисковики, да, очень маленький коэффициент релевантности выделяют на верстку.

  6. #6 Пашко - Ноябрь 15th, 2011 at 00:49

    Отличная статья, учитывая что на дворе 2011 и про табличную вёрстку можно прочитать только в книгах эпохи возрождения, является весьма актуальной.

  7. #7 Alexey - Февраль 5th, 2012 at 04:22

    Сайт должен верстаться Дивами. Для отображения табличных данных – таблицы.

  8. #8 Антон Коршун - Июнь 10th, 2012 at 13:11

    Вёрстка сайта, лучше вёрстки .
    div
    1. Гибкий;
    2. Проще (меньше кода);
    3. Индексация происходит быстрее и легче.
    table
    В основном должно использоваться для вёрстки таблиц, табличных данных.

  9. #9 Figlif - Ноябрь 15th, 2012 at 15:19

    div
    1. Гибкий;
    2. Проще (меньше кода);
    3. Индексация происходит быстрее и легче.
    table
    В основном должно использоваться для вёрстки таблиц, табличных данных.
    ____________________________________________________________
    …и ещё легко рубится если при загрузке в DOM прописать onload по которому div hidden…

    Table не индексируется медленнее, если весь дизайн вставляется через script, и из Table контент реально доверительный для робота. Но да, дивом ой как проще верстать и повесить див в начало кода – ой какое простое решения для оптимизации под таймаут робота… вот только div воспринимается как контейнер после body и его релевантность , прошу делите на общее число дивов в доке… )))

  10. #10 Rudolf - Февраль 12th, 2013 at 10:38

    Прекрасная статья.Очень доступно!Спасибо!)

  11. #11 123 - Декабрь 3rd, 2014 at 04:35

    AquaGen :
    А блог какого года? Вроде как уже 10 лет никто на таблицах не верстает <_<

    VKL.COM сделан полностью на таблицах ;)

  12. #12 Pavel - Сентябрь 14th, 2016 at 07:52

    Код на дивах (23 байт):

    view sourceprint?
    1.
    Hello world!
    ————————
    А где стили для этого дива?

    div{
    padding: 0;
    margin: 0;
    width: 100%;
    border: 0;
    }

    Это вы не считали? Так что там будет не 23 байта, а побольше.
    Но, конечно же, div лучше для верстки…

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.