x
 
Рома Турбо
22 ноября 2012

Артём, объясните, пожалуйста, в чём преимущество div перед table. Кроме того, что это молодёжно и уменьшает размер кода.



Рома! Молодёжные теги — article, section, nav, footer. Дивы — для старпёров :-)

Теперь без шуток предположим, что дизайнер попросил сверстать витрину товаров, три предмета в строке. Вы сверстали:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Дизайнер посмотрел вёрстку на Аймаке и попросил на большом разрешении увеличить количество товаров в строке, а в Айфоне наоборот — показывать картинки столбиком. Ничего не поделаешь — придётся разобрать табличную кладку и заменить её чем-то более гибким:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Другой пример. Три разновеликие колонки текста, которые «плавают» в зависимости от количества контента. Тут без таблицы с table-layout:auto не обойтись:

1 2 3

Общеизвестно, что тоталитарный тип политической культуры интегрирует антропологический тип общественной культуры, впрочем, это несколько не совпадает с концепцией.

Парадигма трансформации общества теоретически определяет политический процесс в современной России.

Тип политической культуры интегрирует антропологический тип общественной культуры.

1 2 3

Капиталистическое мировое общество, на первый взгляд, означает коллапс Советского Союза.

Краб неминуемо влечёт эскалацию напряжения в стране.

Парадигма трансформации общества теоретически определяет политический процесс в современной России.


Никаких абстрактных преимуществ у дивов, таблиц и других тегов друг перед другом нет.

О таблицах

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Алексей Мельников
22 ноября 2012

Полный список молодежных тегов:

Дмитрий Шишкин
22 ноября 2012

Молодёжные теги не работают в ИЕ-8, который очень многие просят поддерживать.

Денис Попов
22 ноября 2012

Довольно странно называть молодёжным то, что продвигают в жизнь старпёры: «Консорциум „Всемирной паутины“» — это ведь медлительная бюрократическая организация, не имеющая с молодёжностью ничего общего.

Скорее наоборот: делать всё дивами и спанами — молодёжно, бунтарски и неформально, и пусть старпёры из W3C сколько хотят, столько и осуждают это в своих никому не нужных спецификациях. Не так ли, молодёжь?

Станислав Лашманов
23 ноября 2012

Дивы неплохи тем, что табличное поведение там можно имитировать с помощью display:table и соответствующих свойств у дочерних элементов. При этом такие важные вещи как vertical-align сохраняются.

Денис Олешкевич
26 ноября 2012

Всегда следует помнить, что ХТМЛ — язык разметки гипертекста, и поэтому он будет развиваться постоянно, так же и объект который он описывает. Развиваются тексты, значит будет развиваться и язык разметки. Если в тексте встречаются даты, время, адреса и пр. конструкции, то логично, что для таких объектов будут придумываться соответствующие теги.

Некоторые теги — header, footer, nav, details — появились как естественное развитие веба. Все использовали хедеры, футеры, используя для этого дивы, а теперь эта практика закреплена тегами. Использование нужных тегов в нужных местах упрощает работу с кодом повышает его информативность, что прямо отражает СЕО — хочешь высокий рейтинг, используй правильные теги.

Понятно, что все можно сверстать с использованием всего 3 тегов — div, a, span. Но вряд ли хороший верстальщик ограничится таким набором.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 1 2 Поделитесь соображениями, как работать, путешествуя 8