DIVs против TABLEs, пожалуйста, опровержение
Есть много людей, спрашивающих: "Почему бы нам не использовать таблицы для структурирования нашего HTML", и хотя приходит много ответов, я редко вижу, чтобы кто-то был обращен в мир семантики. Тем не менее, я еще не видел каких-либо убедительных опровержений в поддержку обоснования того, почему мы должны (или могли бы) использовать таблицы.
Кто-нибудь хочет предложить обоснование того, когда таблицы являются допустимой структурной разметкой?
7 ноября 2008 г.
Учитывая, что этот вопрос не исчез, как я думал, я бы лучше уточнить свой вопрос и объяснить его существование.
Из-за разочарования, прочитав аргумент "таблицы проще", слишком много раз повторяя вопрос "DIVs vs. TABLEs", я хотел немного подробнее разобраться в этом вопросе и не дать любителям таблиц так легко снять трубку.
Каждый мог бы сказать, что их собственные, но мне навсегда дают какое-то приложение для размещения на наших сайтах, созданное некоторыми разработчиками "таблиц проще", которые выкладывают на мои страницы кусок дрянного HTML, и, честно говоря, я Я просто не вижу достаточного количества любителей таблицы, слушающих аргументы.
Кто-нибудь использует Mambo назад в тот же день? Кто-нибудь должен был взять на себя ответственность за размещение дизайна на вершине Microsoft Sharepoint? Необходимость пробиваться сквозь все эти вложенные дерьмовые таблицы была адом, и, учитывая, что это было написано некоторыми чертовски хорошими программистами, меня это бесит. Разумная семантическая разметка существует достаточно давно, поэтому у разработчиков не должно быть никаких оснований выступать за "таблицы легче". Таблицы не проще - они ленивые!
Мой вопрос заслуживал отрицательного ответа за то, как он был представлен негативно, но я все еще жду, когда люди признают, что единственная причина, по которой они используют таблицы, это то, что ОНИ НЕ ЗНАЮТ HTML. Потому что если бы они это сделали, то они бы поняли, как говорит jjrv, что таблицы предназначены для табличных данных.
9 ответов
Таблицы действительны, когда у вас есть таблица данных. Я видел интерактивные виджеты сетки, где они стараются изо всех сил использовать кучу div, чтобы избежать страшного тега таблицы. Когда это табличные данные, сделайте это таблицей.
Более спорный вид моего в том, что когда у вас есть проблемы, решение вопросов вертикальной компоновки в CSS, вы можете просто использовать таблицу и часто позволяет решить сразу. Не так красиво, как могло бы быть, смешивать контент с презентацией, но он выполняет свою работу и избегает хаков CSS, чтобы обойти IE.
RE: Почему таблицы?
Потому что некоторые люди (все еще после стольких лет) боятся перемен. Они слышали, что использование семантического HTML - хорошая вещь (и обычно не полностью понимают концепцию). Поэтому они пытаются собрать макет с помощью CSS, никогда не делая этого раньше. Они сталкиваются с несколькими (хорошо документированными и обычно легко решаемыми) проблемами, поднимают руки вверх и бегут обратно к столам.
Затем они решают, что CSS "слишком много времени" ("я не хочу тратить время на его изучение") или "не практично" ("я не понимаю. Это слишком сложно") и что таблицы единственный верный путь. Благодаря упрямству и невежеству они верят в свою чушь и убеждают своих клиентов и сверстников.
И их мир остается счастливым и неизменным, уходя в прошлое и углубляясь в устаревание *
И вот "почему таблицы". Конец.
(* за исключением того, что они хорошо подходят для кодирования электронных писем в формате HTML)
Таблицы предназначены для разработчиков, которые не могут часами возиться с CSS, чтобы получить два смежных div-столбца для увеличения до 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;-)
Интересная заметка связана с очень сложными приложениями JavaScript. Если вы выберете Gmail или Календарь Google с Firebug, вы увидите, что таблицы широко используются, даже для разметки. Конечно, они обычно генерируются динамически, но это показывает, что в редких случаях некоторые очень визуально сложные интерактивные пользовательские интерфейсы чрезвычайно сложно создать с использованием только DIV.
Использовать современную семантическую разметку намного проще, когда вы добавляете функции, исправляете ошибки или изменяете внешний вид веб-сайта, управляемого данными. Добавление функций AJAX или любого другого интерактивного сценария будет работать намного лучше с DIV и CSS, чем с TABLE.
Переход на менеджер контента, такой как Drupal, Joomla, WordPress и т.п., будет намного проще, если вы уже организовали семантическую разметку.
Более новые версии браузера также будут более эффективно поддерживать современную разметку, и ваш сайт будет отображаться быстрее. Изменение порядка всех этих таблиц может привести к медленному отображению.
С другой стороны, столы здесь, чтобы остаться. Некоторые люди продолжат использовать их, и браузеры продолжат отображать их. В несемантической разметке нет ничего плохого, если вы этого хотите. Полностью статичный сайт, который никогда не будет изменен, может работать как с таблицами, так и с современной разметкой.
Что касается допустимой структурной разметки, то здесь есть: Таблицы являются отличным способом отображения табличных данных, таких как таблицы базы данных или таблицы. Они не являются действительной разметкой для чего-либо еще.
Макеты на основе DIV страдают от ограничений. Без таблиц практически невозможно реализовать макет из двух столбцов, который правильно растет в зависимости от высоты содержимого.
Таблицы поддерживаются даже в старых старых браузерах HTML v1.0. Если ваш целевой рынок включает людей, использующих встроенные браузеры в мобильных телефонах 1990-х годов, это может быть хорошей причиной, чтобы использовать таблицы.
Многие из существующих автоматически сгенерированных HTML использует таблицы. Если ваш код должен взаимодействовать с этими таблицами или включать их, было бы лучше пойти на согласованность.
Я бы сказал, что jjrv прав в том, что таблицы отлично подходят для табличных данных, если вы стараетесь сделать что-то "работающее", например, таблицу, вместо того, чтобы просто использовать таблицу, это является задержкой на границе.
если вы заботитесь о стандартах и переходите к надежной реализации во всех браузерах, тогда большая часть вашей разметки должна быть в виде таблиц без таблиц... и ваши табличные данные находятся в... вы догадались, что это таблицы!
если вам нужно обслуживать действительно старые браузеры, то есть до страшного ie6, тогда у вас будет много проблем в css, и, учитывая текущую статистику использования, вполне безопасно предположить, что у всех будет "современный" браузер, который поддерживает макеты css.
все это сказано, и это те времена, когда вы бьетесь головой о стену на макете, и вы хотите / действительно говорите f___ через него в таблице, и это работает. Я надеюсь, что это устаревшая практика, но в клинике это дает предсказуемые результаты.
Используйте таблицы для html наименьшего общего знаменателя или для табличных данных, где имеет смысл охватить столбцы или строки. В противном случае компоновки CSS гораздо менее многословны и их намного легче поддерживать, как только вы освоите их.