Плоха ли табличная разметка сайта?

Question

[maksam07]

Лазил по некоторым генераторам шаблонов для сайта, и там в основном блочные элементы везде использовались. Так вот мне интересно, почему бы не делать генератор шаблона сайт в виде таблицы? Мне кажется что там намного удобнее, чем мучаться, как минимум с float. Да и раньше, когда готовые шаблоны искал для разных CMS, тоже ни где не видел шаблонов в виде таблиц.

Comments

[ksim_miloff]

толсто :)

[Сергей delphinpro]

Из криогенной камеры сбежал что ли?..

[maksam07]

Сергей: я всего лишь начинаю познавать мир html и css так сказать с "правильного" ракурса. Изначально же делал просто как удобно)

Answer 1

[Alexander Pushkarev]

От таблиц наоборот все ушли. Изначально вёрстка была табличная.
Таблицы крайне неудобные. Если не нравится float, то используйте flex, а точнее используйте только flex

Comments

[maksam07]

Можете написать минусы таблиц? Ну понятное дело, что ячейки разделять нельзя от ширины/высоты экрана и нельзя/проблематичнее сделать сайт по совместительству с телефоном, например. Ну а что, если нужна проосто фиксированная таблица шириной в 800пикс, например. И все.

[Alexander Pushkarev]

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

Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout.

Громоздкий код
Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер «шелухи», т.е. кода, который не принимает непосредственного участия в отображении веб-страницы.

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

Нет разделения содержимого и оформления
В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.

Несоответствие стандартам
В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

Взято из htmlbook.ru/content/preimushchestva-i-nedostatki-t...

[maksam07]

AXP-dev: спасибо, буду учитывать это

[Максим Тимофеев]

Максим Компаниец: Добавлю к выше скопипастеному: SEO при табличной верстке будет в попке

[maksam07]

Максим Тимофеев: я уже по нексту понял, что интернет не очень хорошо относится к таблицам :-)

Answer 2

[Максим Тимофеев]

Только успели забыть что когда-то верстали таблицами и тут Вы. Хотите вернуться в прошлое?
Табличная верстка это:

• прощай seo
  
• досвидание адаптация под разные размеры экрана
  
• медленная скорость рендера
  
• и много, много мелочей
  

Сейчас версnка переходит к flexbox, лучше им займитесь

Comments

[Денис Денис]

и отказаться от css, все в атрибуты)

[maksam07]

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

[Максим Тимофеев]

Максим Компаниец: Задумайтесь о flexbox. Пока он только начинает набирать популярность, но через год-два, на верстку без flexbox будут смотреть так же, как сегодня на табличную

[maksam07]

Максим Тимофеев: хорошо, учту, спасибо

Answer 3

[Алексей Васильевич]

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

Answer 4

[ThunderCat]

Есть один весомый аргумент против таблиц (точнее 2, но второй скорее семантического свойства)
Таблица не может быть нормально отрендерена до момента закрытия тега. В силу этого структура табличной верстки ухудшает загрузку страниц, многие об этом не знают, или не помнят, тк не застали эпоху верстки в таблицах и пограничные холивары в эпоху смены парадигмы на "дивную" верстку. И второй момент семантического свойства - таблицами должны отображаться табличные данные, то есть там где у вас колонки/строчки аля прайс - таблица к месту и подходит, только учитывайте длину таблицы в строках, тоже не очень хорошо делать их километровыми портянками, в крайнем случае есть дисплэй тэйбл для блочных элементов.

Comments

[maksam07]

Я недавно сделал себе таблицу со скроллом на css, долго мучался над тем, что бы шапка не скрывалась, но смог сделать. Минус такого, конечно, тоже был, но в принципе работает пока хорошо)

[ThunderCat]

Максим Компаниец: я тоже недавно наступил на собачью мину, а потом ботинки почистил, но это не повод для гордости.

[maksam07]

ThunderCat: Это в ответ на второй момент, где вы говорили о километровой высоте.

[ThunderCat]

Максим Компаниец: непонятно, в итоге сделали таблицей? или в итоге сделали имитацию блочными элементами? а то так то - див сверху с шапкой, ниже див с оверфлоу скролл, внутрь второго любой набор элементов - вуаля скролл.

[maksam07]

ThunderCat: я думал о дивах, но меня больше привлекли таблицы, а именно выравнивание текста. В строку мне казалось немного проблематичнее поместить несколько дивов, потом еще и настраивать ширину между ними. Поэтому сделал скролл в таблице

[ThunderCat]

Максим Компаниец: ну так шапку дивом, внутрь второго див таблицу, второму див - стиль оверфлоу скролл ) то есть надо просто творчески подойти к проблеме )

[maksam07]

ThunderCat: да, я там изначально и думал. Но меня напрягала ситуация, что если у меня там колонок 5-7, то для каждой нужно делать ширину, что бы все стояло четко и никаких смещений не было. В принципе примерно по этой же схеме и сделана таблица, но это уже совсем другая история..
А вообще почитав тут советы, скорее всего буду понемногу уходить с таблиц в будущем

Answer 5

[Егор Живагин]

Хуже таблиц только генераторы шаблонов) Серьёзно

div-ами верстать как раз удобнее, а не нравятся div-ы - вышел html5 . Таблицы и прогружаются долго, и адаптивность делается сложнее, и ... вы правда хотите сделать сайт по колоночкам и рядочкам?) Кроме того, вам всё равно придётся либо блоки пихать в ячейки, либо ещё ячейки пихать в ячейки. Поскольку, ну, не видел я пока дизайна, который можно было бы сделать именно табличной вёрсткой.

Таблицы есть в html письмах, и только они там есть. На одно письмо вам делать 3-5 вложенных таблиц минимум. Я не хочу делать так сайт) А тем более поправлять потом код из генератора, он и так нечитабельный

Comments

[maksam07]

мне вроде как нормальный генератор попадался, но не об этом.
Ну удобно же сделать таблицей:
ШАПКА (2 столбца)
сайтбар | контент
ФУТЕР (2 столбца)
вот тебе и вся таблице

[Егор Живагин]

Максим Компаниец: а внутри таблицы блоки? Возникает один логичный вопрос - а зачем делать таблицу? Что удобного?)
Почитайте про html5 . Семантика ныне предполагает наличие элементов footer, header, main, aside, ...

[Егор Живагин]

Максим Компаниец: и я действительно не понимаю, чем ячейки таблицы с padding-ами - а иначе сайдбар и контент будут ровно по пол экрана, условно - удобнее, нежели блокии.

[Егор Живагин]

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

Answer 6

[ksenofobius]

Чтобы понять почему табличная верстка хуже блочной достаточно отбросить софтины для генерации верстки и спилить пару сайтов руками, для начала желательно без фреймворков

Comments

[maksam07]

да, я делал в основном блочные и пару табличный. Но если вопрос не касался адаптивности, то я особых то проблем и не замечал в табличной верстве. Я ж вот и решил узнать что и как лучше.