Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

Div vs. Table

16 марта 2006 · Комментариев: 19 · Свалка

Кажется, уже любое упоминание слов div и table в одном предложении вызывает позывы к тошноте у всех кодеров. А я все равно скажу, как раз время послеобеденное.

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

  • Короткие сроки
  • Мало денег
  • Слишком лень

Если я слышу срок сдачи “вчера”, в моем мозгу переключается рубильник. Разумеется, я все равно сделаю картинку с подписью definition list’ом, а не таблицей. Но только потому, что мне так просто удобней. А вот разложить колонки в сложном макете таблицей — не буду испытывать никаких угрызений совести. Даже покажу кому-нибудь, потому как не стыдно ни разу.

Очень много разговоров о том, что таблицы плохо смотрятся без стилей. Да, я помню про vertical-align и иже с ними. И что? Div’ы позволяют сохранить look&feel с отключенными стилями? Наладонники-шмаладонники, печать страниц.. Брр. Все равно, если есть необходимость — мы пишем стили для печати и handheld’ов. К чему фанатизм?

Размер кода. Шмаразмер, блин. Таблица с четырьмя ячейками займет места не больше, чем три extra-wrapper’а. При этом работать с таким кодом будет легче. Впрочем, последний тезис — лишь мое скромное мнение.

О! Шаманство. Знаете, я не любитель бубнов. Конечно приятно написать fix для седьмой Оперы типа такого:

#id ul li {
    display:table-cell;
    display:inline-block;
    }
    * HTML #id ul li {display:inline;}

Но это быстро надоедает. Когда поддержка CSS в IE достигнет уровня последнего Огнелиса, а старые Оперы и Нетшкафы перестануть фигурировать в browser list’ах — я буду счастлив, а до тех пор я не стесняюсь таблиц.

Пусть заголовки будут заголовками, списки списками, а колонки колонками. Мне не интересны faux columns и жонглирования margin/padding’ами. Я хочу логики, стабильности и простоты. В таких случаях я делаю и пока буду делать таблицу. Хоть режьте, хоть не режьте.

P.S. И даже не говорите мне о поисковой оптимизации, лучше не надо.

Теги: · ·

Комментариев: 19 ↓

  • agat // 17 марта 2006 в 12:13

    Когда у меня короткие сроки, мало денег и слишком лень, я предпочитаю вообще не брать проект :)

    Год назад делал что-то на таблицах, проклинал потом всё и вся…

  • Flack // 17 марта 2006 в 12:26

    agat, я ж не говорю о полной табличности. Так, макет зафиксировать. Никаких colspan’ов и прочего дерьма :)

  • Иван Сагалаев // 17 марта 2006 в 13:24

    Интересно :-). Обычно сам я всем рекомендую ни в коем случае не смешивать таблицы и CSS’ную раскладку. Но тут я обязательно соглашусь с одним простым аргументом: “мне так удобней”. Действительно, когда речь не идет о какой-то субъективной “чистоте помыслов”, то удобство – едва ли не самая важная часть при выборе инструмента.

    Но вот новичкам, которые еще не успели сжиться с таблицами, я все равно советую выносить всю презентацию в CSS (насколько это возможно, конечно). И еще – не верстать, по возможности, колонками. Это не модно :-)

  • Flack // 17 марта 2006 в 15:22

    Иван Сагалаев, да кто бы спорил. В хороших проектах или в том, что делаю “для себя”, я бы даже о таком не заикнулся. Но, имхо, во всем нужна умеренность. Особенно когда имеешь дело с ранними версиями всяких опер и нетскейпов. Если мне надо сдать макет “вчера”—я не стану тратить несколько часов на то, чтобы придумать fix. Лучше еще раз проверю поведение макета при нестандартных ситуациях, перепроверю качество нарезки графики и так далее..

  • uggallery // 17 марта 2006 в 15:46

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

    > Наладонники-шмаладонники
    Мобильные устройства умеют переламывать таблицы—выстраивать в одну колонку. Можно не заметить разницы вообще. Особенно если таблицы простые и правильно написаны.

    > Таблица с четырьмя ячейками займет места не больше, чем три extra-wrapper’а.

    Это как? Таблица состоит минимум из трех элементов: TABLE, TR, TD. Недопонял.

  • Flack // 17 марта 2006 в 16:02

    uggallery, table-tr-td и div-div-div.

  • pepelsbey // 17 марта 2006 в 18:20

    Неплохой редизайн. И забавно прыгает содержимое, пока поплавки-колонки не загрузились. Боюсь, что даже слишком забавно…

    А по сути статьи скажу: пока у меня есть деньги на еду и я могу выбирать себе проекты — я буду выбирать те, в которых если и не предусмотрена бестабличная вёрстка, то хотя бы можно её под шумок сделать. Почему? Потому, что мне просто нравится верстать без таблиц. Если сроки, если мало денег и я понимаю, что бестабличку не сделать — я лучше проведу выходные с друзьями. Весна на дворе.

    Посмотрите портфолио студии trinet.ru и попробуйте догадаться почему меня тошнит от таблиц. Я там работал и мне хватило.

  • Flack // 17 марта 2006 в 18:37

    pepelsbey, там float направо. Зачем—не вспомню :) Будет еще не раз переделываться, когда порыв вернется.

    Мне, видимо, больше нужны деньги. Ну ты примерно в курсе моей ситуации.

    Да все видели и сочувствуют :)

  • TheBits // 19 марта 2006 в 00:46

    Что означает пункт „мало денег”?

  • Андрей Кузьмин // 19 марта 2006 в 09:14

    Ничего плохого в смешанной вёрстке и colspan’ах c rowspan’ами нет. Если нужно объеденить ячейки — объединяю. А всё исходит из ТЗ — если надо таблицами, делаю таблицами. Всё от заказчика.

  • Андрей Кузьмин // 19 марта 2006 в 09:18

    TheBits, означает, что если Вы не знаете как правильно ставить кавычки, то не надо понтоваться — ставьте знак дюйма.

  • SunAlex // 20 марта 2006 в 15:01

    Ты праф. Разумные компромиссы еще никому не вредили.

  • anzim // 18 августа 2006 в 07:11

    off top
    Андрей Кузьмин, кавычки у TheBits совершенно правильные. Другое дело то что сейчас их принято «использовать как „внутренние”».

    А мало денег — пока еще не всякий заказчик понимает, что работа может стоить хороших денег, и предложенная им цена часто в разы меньше реальной. Показательна фраза: «Как? Вы работали, а я еще и платить должен?» ;-)
    /off top

  • Alex // 23 декабря 2006 в 17:22

    IMHO, tables is for tabular data.

  • hidded // 6 февраля 2007 в 23:19

    Кавычки у TheBits таки не правильные. Правильные «лапки»: „ и “. (Ководство. § 104)

  • Читатель веб-страниц // 24 марта 2007 в 06:03

    Я как пользователь скажу. Я ставлю у себя в браузере увеличенный шрифт (для глаз, увы) и весь “див”ный дизайн на огромном количестве сайтов сразу отправляется коту под хвост – блоки налазят друг на друга, текст отрывается от всяких красивеньких цветных прямоугольничков под ним, что-то отползает вбок за пределы экрана (без полосы прорутки, конечно), что-то переползает вниз, и т.д. и т.п. А таблицы гарантируют и относительное расположение элементов, и то, что всё будет показано.

    Хотите делать картины, а не страницы для чтения – используйте пдф, флеш, гиф, в конце концов.

  • Игорь // 7 мая 2007 в 22:10

    to Автор:

    Правильные мысли. Холивары для дураков. Нужно думать своей головой и решения принимать в зависимости от проекта.

    to Андрей Кузьмин:
    Кавычки правильные.

    to hidded:
    Ководство для тех, кто о книжной верстке даже не слышал. Читай книги.

  • Ирина // 4 ноября 2007 в 07:08

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

  • Антон // 15 декабря 2010 в 00:50

    По мне так с таблицами работать проще и удобнее. Если руки прямые, то траффика не так уж и много от табличной вёрстки.

Оставить комментарий