Подходит ли макет таблицы для полноэкранных одностраничных HTML-приложений?

Существует общее мнение, что следует избегать использования таблиц для разметки в HTML. Но из каждого правила есть исключения. Я разрабатываю SPA (одностраничное приложение) со страницами, напоминающими используемый макет с помощью настольного приложения.

Очевидно, что HTML не очень хорошо подходит для таких типов страниц, но у меня нет другого выбора. Реализация этих макетов с помощью DIV — это сущий ад, требующий сочетания приемов CSS, жестко запрограммированных значений и даже вычислений JS для событий изменения размера. Недавно я спросил этот вопрос о реализации этих макетов с использованием сетки.

Но затем я остановился, чтобы еще раз подумать, может ли быть уместна табличная компоновка. Типичная критика, похоже, не применима к уникальному случаю SPA:

  • Отделение контента от макета. Поскольку SPA на самом деле не является контентом (это просто скелет с заполненными данными AJAX), этот аргумент не применяется. Это просто интерфейс; Я не ожидаю, что Google проиндексирует его.

  • Таблицы менее удобны в сопровождении — не в этом случае. CSS-ад, через который вам нужно пройти, чтобы реализовать это с помощью DIV, требует гораздо более высоких затрат на обслуживание.

  • Таблицы рендерятся медленнее. Конечно, но сложный макет, который мы будем создавать с использованием альтернатив, потребует еще больше вычислений для рендеринга, чем таблицы. Черт возьми, мы обычно компенсируем врожденные ограничения, используя события изменения размера JS. Для браузера было бы намного эффективнее сделать это внутри механизма рендеринга.

В свете этих аргументов уместны ли макеты на основе таблиц в конкретном случае SPA, или я не учел некоторые другие важные факторы? Есть ли еще лучший вариант?


person talkol    schedule 31.07.2013    source источник


Ответы (1)


Раньше люди ошибались насчет таблиц. Многие люди, которые ничего не знали, настаивали на нетабличной компоновке, даже если в то время это не имело никакого смысла, особенно когда нужно было беспокоиться о ie5+6. Было много заблуждений, например. что Google заботится о семантическом коде. Такого никогда не было и никогда не будет, потому что люди ошибаются, и вы не можете объяснить это.

Однако теперь, наконец, появилась реальная причина не использовать таблицы:

Медиа-запросы и адаптивный дизайн

В адаптивном дизайне, если у вас есть 2 столбца, имеет смысл опустить один столбец вниз на маленьких экранах. Например, несколько столбцов могут стать одним столбцом на экране телефона.

Вы не можете сделать это с таблицами.

Это, на мой взгляд, самая важная проблема с таблицами. Большинство других аргументов — не более чем умственная мастурбация.

Существуют и другие макеты, такие как каменная кладка (см., например, http://masonry.desandro.com/), которые Я думаю, что было бы трудно достичь только с таблицами. Но для классических проблем со столбцами полной высоты таблицы были правильным решением, хотя большинство людей предпочитало ужасные обходные пути, добавляя тонну хрупкой разметки и css просто для имитации таблицы.

Теперь, однако, все по-другому, поскольку таблица не дает вам гибкости, необходимой для реагирования.

person user1721135    schedule 31.07.2013
comment
Отличный момент! Действительно, адаптивный дизайн сложнее сделать с таблицами. Но в большинстве моих случаев SPA я не собираюсь использовать их с мобильным устройством. Это приложения, вы не можете работать с ними, если у вас нет экранной недвижимости. Обычно с помощью JS я обнаруживаю, что экран слишком мал, и показывает сообщение об ошибке или предупреждение. Я не ожидаю, что обычный MS Office будет работать на вашем iPhone :) - person talkol; 31.07.2013
comment
не подразумевайте использование мобильных устройств — вскоре это может стать проблематичным. Люди хотят ВСЕ на своих мобильных, даже SAP. - person user1721135; 31.07.2013
comment
Я знаю и согласен, но некоторые вещи просто требуют большего экрана. Рассмотрите возможность использования фотошопа или разработки (кодирования) в вашей любимой среде IDE. Вы не ожидаете, что эти профессиональные инструменты будут работать на мобильных устройствах. - person talkol; 31.07.2013
comment
Это зависит от того, предназначено ли приложение только для вас или вы хотите его продать. Если это действительно IDE, то все в порядке, но веб-приложение для редактирования фотографий может также быть отзывчивым, это вообще не исключено. - person user1721135; 31.07.2013
comment
Я планирую продавать свой SPA, но это скорее модель SAS. В будущем я хотел бы добавить поддержку мобильных устройств, но это не является обязательной функцией на начальном этапе. Точно так же, как 90% настольных приложений не имеют мобильного аналога для удобства. Хотите работать с моим приложением, подождите, пока вы приедете в свой офис :) - person talkol; 31.07.2013
comment
важнее выпустить бета-версию, чем всю ночь играть с css :) - person user1721135; 31.07.2013