DIVs против TABLEs, пожалуйста, опровержение

Question

Есть много людей, спрашивающих: «Почему бы нам не использовать таблицы для структурирования нашего HTML», и хотя приходит много ответов, я редко вижу, чтобы кто-то был обращен в мир семантики. Тем не менее, я еще не видел каких-либо убедительных опровержений в поддержку обоснования того, почему мы должны (или можем) использовать таблицы.

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

---

7 ноября 2008 г.

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

Из-за разочарования, прочитав аргумент «таблицы проще» один раз слишком много раз после вопроса «DIVs vs. TABLEs», я хотел немного больше разоблачить этот вопрос и не дать любителям таблиц так легко освободиться от этого.

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

Кто-нибудь использует Мамбо в тот день? Кто-нибудь должен был взять на себя ответственность за размещение дизайна на вершине Microsoft Sharepoint? Необходимость пробиваться сквозь все эти вложенные дерьмовые таблицы была адом, и, учитывая, что это было написано некоторыми чертовски хорошими программистами, меня это бесит. Разумная семантическая разметка существует достаточно давно, поэтому у разработчиков не должно быть оснований продолжать выступать за «таблицы легче». Таблицы не проще - они ленивые!

Мой вопрос заслуживал отрицательного ответа за то, как он был представлен, но я все еще жду, чтобы люди согласились с тем, что единственная причина, по которой они используют таблицы, заключается в том, что ОНИ НЕ ЗНАЮТ HTML. Потому что, если бы они это сделали, они бы поняли, как говорит jjrv, что таблицы предназначены для табличных данных.

Answer 1

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

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

Answer 2

RE: Почему таблицы?

Потому что некоторые люди (все еще после стольких лет) боятся перемен. Они слышали, что использование семантического HTML - хорошая вещь (и обычно не полностью понимают концепцию). Поэтому они пытаются собрать макет с помощью CSS, никогда не делая этого раньше. Они сталкиваются с несколькими (хорошо документированными и обычно легко решаемыми) проблемами, поднимают руки и бегут обратно к столам.

Затем они решают, что CSS «слишком много времени» («Я не хочу тратить время на изучение этого») или «не практично» («Я не понимаю. Это слишком сложно») и что таблицы являются единственным верным способом. Благодаря упрямству и невежеству они верят в свою чушь и убеждают своих клиентов и сверстников.

И их мир остается счастливым и неизменным, уходя в прошлое и углубляясь в устаревание *

И вот почему "таблицы". Конец.

(* за исключением того, что они хорошо подходят для кодирования электронных писем в формате HTML)

Answer 3

Таблицы предназначены для разработчиков, которые не могут потрудиться возиться с часами с помощью CSS, чтобы получить два смежных деления на столбцы, чтобы увеличить до 100% высоты и ширины независимо от содержимого, а затем получить взломать для работы во всех браузерах без добавления дополнительных оболочек div и, наконец, в абсолютном разочаровании, они прибегают к 5-секундному исправлению:

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

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

Разработчики имеют ограничения по бюджету и времени, а «хороший» CSS и разметка требуют времени.

Тот факт, что в Интернете существует множество ресурсов, в которых подробно и детально объясняется, как можно выстроить два деления для замены этой простой таблицы, совершенно ясно говорит мне, что этот дизайн по своей природе столь же несовершенен, как и таблицы. Сколько учебных пособий требуется, чтобы объяснить, как добавить таблицу с двумя столбцами на страницу ?

HTML5 должен принести всем нам здравый смысл с новыми тегами заголовка, нижнего колонтитула, раздела, навигации и отступления. Пример взят из Nettuts +:

<div id="content">
    <div id="mainContent">
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
    </div>
    <aside>
        <!-- Sidebar -->
    </aside>
</div>

, а затем это для CSS:

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

Те из вас, у кого острый взгляд, полюбят чувство иронии, когда вы заметите, что CSS обладает свойствами: display: table; и display: table-cell;.

Столы вернулись, детка! Пробрался через заднюю дверь HTML5; -)

Answer 4

Интересное примечание связано с очень сложными приложениями JavaScript. Если вы выберете Gmail или Календарь Google с Firebug, вы увидите, что таблицы широко используются, даже для разметки. Конечно, они обычно генерируются динамически, но это показывает, что в редких случаях некоторые очень визуально сложные интерактивные пользовательские интерфейсы чрезвычайно сложно создать с использованием только DIV.

Answer 5

Макеты на основе DIV страдают от ограничений. Без таблиц по существу невозможно реализовать макет из двух столбцов, который правильно увеличивается в зависимости от высоты содержимого.

Answer 6

Использование современной семантической разметки намного проще, когда вы добавляете функции, исправляете ошибки или изменяете внешний вид веб-сайта, управляемого данными. Добавление функций AJAX или любого другого интерактивного скриптинга будет намного лучше работать с DIV и CSS, чем с TABLE.

Переход на менеджер контента, такой как Drupal, Joomla, WordPress и т. П., Будет намного проще, если вы уже организовали семантическую разметку.

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

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

Что касается допустимой структурной разметки, то здесь есть: Таблицы являются отличным способом отображения табличных данных, таких как таблицы базы данных или таблицы. Они не являются действительной разметкой для чего-либо еще.

Answer 7

Используйте таблицы для наименьшего общего знаменателя html или для табличных данных, где имеет смысл охватить столбцы или строки. В противном случае компоновки CSS гораздо менее многословны и их намного легче поддерживать, когда вы освоите их.

Answer 8

Я бы сказал, что jjrv прав в том, что таблицы отлично подходят для табличных данных, если вы пытаетесь заставить что-то «работать», например, таблицу, вместо того, чтобы просто использовать таблицу, это задерживает границы.

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

если вам нужно обслуживать действительно старые браузеры, то есть до страшного ie6, тогда у вас будет много проблем в css, и с учетом текущей статистики использования вполне безопасно предположить, что у всех будет «современный» браузер, который поддерживает макеты CSS.

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

Answer 9

Таблицы поддерживаются даже в старых старых браузерах HTML v1.0. Если ваш целевой рынок включает людей, использующих встроенные браузеры в мобильных телефонах 1990-х годов, это может быть хорошей причиной для использования таблиц.

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