Чем хуже табличная верстка?

@Rodion2703 · Регистрация: 06.01.2013

Студворк — интернет-сервис помощи студентам

Не понимаю! Почему все говорят, что не надо, какие то "казусы" происходят. Смотрю исходника нормального сайта, конечно посещаемость маловата, но сайт нормальный. И там таблица.

@Na1n · 31.07.2013, 01:09

Таблицы
...
В "Табличной" верстке все заключается в теге ...<div>... , то есть все выглядит в блоках.
...
На мой взгляд, это нормальный вариант верстки.
...
Возможно, вариант плох тем, что устройства со слабым интернетом будут долго грузить таблицы (Если сайт не имеет упрощенного варианта) , но я в этом не уверен.
P.s. - а Вы попробуйте оба варианта верстки, какой удобнее вам, с тем и работаете.

Почему все говорят, что не надо, какие то "казусы" происходят

А еще, есть люди которые говорят, что Spange Bob живет у них в соседнем подъезде.
Думаю суть понятна....

@Rodion2703 · 31.07.2013, 02:06 **[ТС]**

*sponge :-)

Конечно же через таблицы удобнее, но я как-то побаиваюсь ) Вдруг то, вдруг сё случится. В общем попробую и так и сяк)

@Alorian · 31.07.2013, 06:57

Что лучше table или DIV?

@Na1n · 31.07.2013, 10:52

sponge :-)

Square pants -)
А вообще, я всегда занимаюсь табличной версткой, получается на много красивее на мой взгляд.

@Academik · 31.07.2013, 15:24

В табличной вёрстке очень много кода получается, поэтому и пошла мода на дивах верстать. Когда сайт большой, то в коде ориентироваться сложно.

Я например верстаю всегда на дивах, таблицы использую только по назначению. (прайсы например)

KOPOJI · 31.07.2013, 15:28

Сообщение от Na1n

В "Табличной" верстке все заключается в теге ...<div>... , то есть все выглядит в блоках.

правда..? А я-то.. Я-то думал, что табличная верстка - когда все верстается таблицами, а не блоками.. А что тогда блочная верстка в вашем понимании и почему она так называется?

Сообщение от 35cm

В табличной вёрстке очень много кода получается, поэтому и пошла мода на дивах верстать

не совсем. Скорее, все дело в возможности более гибкой "настройки" дивов, нежели таблиц. И даже придумали "обратное" - дивы можно настроить "как таблицы", неспроста, я думаю

@Academik · 31.07.2013, 15:30

Я по простому объяснил) Там всё намного хитрее на самом деле.

@Rodion2703 · 31.07.2013, 15:40 **[ТС]**

Мнэ кажется здесь нет нужды по простому объяснять) И так все понятно будет)

@Academik · 31.07.2013, 15:55

Ну я придерживаюсь минимализма кода. Зачем громоздить код если можно обойтись двумя контейнерами.

Допустим нам нужно отрисовать две колонки. На таблицах это выглядет так:

HTML5
1
2
3
4
5
6
<table>
    <tr>
         <td></td>
         <td></td>
    </tr>
</table>

При использовании дивов так:

HTML5
1
2
<div class="leftCol"></div>
<div class="rightCol"></div>

Напрашивается вопрос - нахрена мне таблицы?

Идём дальше. Допустим каркас из двух колонок у нас уже есть, требуется вставить в левую колонку новостную ленту, опять же на таблицах это выглядет так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table>
    <tr>
         <td>
              <table>
                <tr>
                    <td>Новости</td>
                </tr>
                <tr>
                    <td><a href="#">Предполагаемый насильник с Матвеевского рынка арестован до 26 сентября</a></td>
                </tr>
                <tr>
                    <td><a href="#">Ущерб от пожара в "Останкино" составил 120 тыс. рублей</a></td>
                </tr>
                <tr>
                    <td><a href="#">Онищенко обещает проверить украинскую мучную продукцию</a></td>
                </tr>
              </table>
         </td>
         <td>
            правая колонка
         </td>
    </tr>
</table>

Ту же самую ленту верстаем с использованием списков:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="leftCol">
    <h2>Новости</h2>
        <ul>
            <li><a href="#">Предполагаемый насильник с Матвеевского рынка арестован до 26 сентября</a></li>
            <li><a href="#">Ущерб от пожара в "Останкино" составил 120 тыс. рублей</a></li>
            <li><a href="#">Онищенко обещает проверить украинскую мучную продукцию</a></li>
        </ul>
</div>
<div class="rightCol">
      правая колонка
</div>

А теперь представим, что у нас есть полноценный новостной сайт реализованный на таблицах. Какого вам будет работать со своим же кодом?

KOPOJI · 31.07.2013, 16:06

Сообщение от 35cm

При использовании дивов так:

Вы что-то забыли упомянуть о стилях. Для создания двух колонок с помощью таблицы достаточно прописать ей ширину, но для дивов необходимо, как минимум, прописать display:inline-block и ширину или float-ы и ширину и отступы. Что в совокупности по количеству кода будет примерно одинаково.

@Academik · 31.07.2013, 16:08

Ну я упростил код чтоб довести до вас истину. Конечно там ещё и атрибуты у таблицы нужны, стили дивам... И ещё много чего в зависимости от ситуации.

@Rodion2703 · 31.07.2013, 16:09 **[ТС]**

А хорошо ли вот так позиционировать 3 div блока?:

HTML5
1
2
3
<div id="lcon"></div>
<div id="rcon"></div>
<div id="mcon"></div>

CSS
1
2
#lcon {float:left;}
#rcon {float:right;}

Конечно еще фиксированная ширина, обертка и тд, но суть сама. Подходит?

@Academik · 31.07.2013, 16:13

Да, только не забываем обтекания обнулять после последнего дива или у родительского overflow: hidden; добавить.

Добавлено через 2 минуты
Предлагаю соревнование устроить. Давайте определим спеца на форуме, который бы сверстал макет на таблицах. Я заверстаю этот же макет на дивах и прекратим эти споры.

KOPOJI, справитесь с таблицами?

@Rodion2703 · 31.07.2013, 16:16 **[ТС]**

KOPOJI,

Не по теме:

можно сделать король: KOPOJlb :D

KOPOJI · 31.07.2013, 16:18

1. Я не спец.
2. Я не верстальщик вообще
3. Если и приходится верстать - то я использую блочную верстку, а не табличную (за редким исключением)
4. У меня нет ни желания, ни особо времени устраивать соревнования.

@Academik · 31.07.2013, 16:29

Я просто люблю говорить о преимуществах того или иного способа вёрстки в том случае, когда есть пример.

Добавлено через 5 минут
Вон соседняя тема разрослась на 6 страниц. В ней можно встретить много интересных мифов.

Тэг Table уже давно устарел, тэг Div поновее.

с таблицей все корректно

табличная верстка дольше грузится, и сам табличный тэг, как ни странно, используется для построения таблиц.

elnorbert · 31.07.2013, 16:29

1. табличная верстка это не модно.
2. табличная верстка очень простая, поэтому ей верстают только примитивные одноклеточн. веб мастера (отсюда п.1)
3. страницы сверстанные таблицами занимают много языка разметки

@Academik · 31.07.2013, 16:33

Я даже комментировать это не буду

@Rodion2703 · 31.07.2013, 16:40 **[ТС]**

Если честно:

Главные минусы Табличной верстки - долгая загрузка, много кода в html.
Главные минусы Блочной верстки - некая сложность, много кода в css.

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819

	Чем хуже табличная верстка? 31.07.2013, 00:22. Показов 4082. Ответов 35 Метки нет (Все метки) Не понимаю! Почему все говорят, что не надо, какие то "казусы" происходят. Смотрю исходника нормального сайта, конечно посещаемость маловата, но сайт нормальный. И там таблица. 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	31.07.2013, 02:06 [ТС]
	*sponge :-) Конечно же через таблицы удобнее, но я как-то побаиваюсь ) Вдруг то, вдруг сё случится. В общем попробую и так и сяк) 1

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	31.07.2013, 06:57
	Что лучше table или DIV? 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	31.07.2013, 15:24
	В табличной вёрстке очень много кода получается, поэтому и пошла мода на дивах верстать. Когда сайт большой, то в коде ориентироваться сложно. Я например верстаю всегда на дивах, таблицы использую только по назначению. (прайсы например) 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	31.07.2013, 15:30
	Я по простому объяснил) Там всё намного хитрее на самом деле. 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	31.07.2013, 15:40 [ТС]
	Мнэ кажется здесь нет нужды по простому объяснять) И так все понятно будет) 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	31.07.2013, 16:08
	Ну я упростил код чтоб довести до вас истину. Конечно там ещё и атрибуты у таблицы нужны, стили дивам... И ещё много чего в зависимости от ситуации. 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	31.07.2013, 16:13
	Да, только не забываем обтекания обнулять после последнего дива или у родительского overflow: hidden; добавить. Добавлено через 2 минуты Предлагаю соревнование устроить. Давайте определим спеца на форуме, который бы сверстал макет на таблицах. Я заверстаю этот же макет на дивах и прекратим эти споры. KOPOJI, справитесь с таблицами? 1

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	31.07.2013, 16:16 [ТС]
	KOPOJI, Не по теме: можно сделать король: KOPOJlb :D 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	31.07.2013, 16:18
	1. Я не спец. 2. Я не верстальщик вообще 3. Если и приходится верстать - то я использую блочную верстку, а не табличную (за редким исключением) 4. У меня нет ни желания, ни особо времени устраивать соревнования. 0

elnorbert 775 / 444 / 93 Регистрация: 24.10.2012 Сообщений: 3,240 Записей в блоге: 5
	31.07.2013, 16:29
	1. табличная верстка это не модно. 2. табличная верстка очень простая, поэтому ей верстают только примитивные одноклеточн. веб мастера (отсюда п.1) 3. страницы сверстанные таблицами занимают много языка разметки 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	31.07.2013, 16:33
	Я даже комментировать это не буду 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	31.07.2013, 16:40 [ТС]
	Если честно: Главные минусы Табличной верстки - долгая загрузка, много кода в html. Главные минусы Блочной верстки - некая сложность, много кода в css. 0