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

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

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

---

7 ноября 2008 г.

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

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

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

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

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

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

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

```

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

У разработчиков есть бюджет и временные ограничения, а «хороший» [CSS](/tag5782) и разметка требуют времени.

Тот факт, что в Интернете есть множество ресурсов, которые объясняют с большим трудом подробные сведения о том, как вы можете выровнять два div для замены этой простой таблицы, говорит мне совершенно ясно, что этот дизайн по своей сути является ошибочным как таблицы. Сколько учебных пособий необходимо объяснить, как  [добавить таблицу с двумя столбцами на страницу](https://www.w3schools.com/html/html_tables.asp) ?

HTML5 должен принести нам некоторую здравомыслие с новыми заголовками, нижними колонтитулами, разделами, навигацией и другими тегами.  [Пример](http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/) , взятый из Nettuts +:

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

```

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

```
#content {
    display: table;
}

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

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

```

Те из вас, у кого есть острый глаз, будут любить чувство иронии, когда вы заметите, что [CSS](/tag5782) обладает свойствами:  `display: table;`  и  `display: table-cell;` .

 **Столы возвращаются! Снег через заднюю дверь HTML5; -)** 



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

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



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

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



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

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

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

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



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

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

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

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

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



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



Основания на основе DIV страдают от ограничений. Без таблиц по существу  [невозможно](https://stackoverflow.com/questions/35699/on-a-two-column-page-how-can-i-grow-the-left-div-to-the- такой же высотой-в-righ ) , чтобы реализовать макет из двух столбцов, который растет должным образом на основе высоты содержимого.





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

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

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

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

И это «почему таблицы». Конец.

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