А что плохого в таблицах? - Флейм

Ребята! У меня тут клиент мечтает выровнять картины в галерее по вертикали. Поскольку все картины разной высоты, единственный путь - засунуть каждую картину в табличку с фиксированной высотой и выровнять имидж внутри нее. Возможно, еще и названия надо туда же в таблицу))) Короче, фигня.
А вот почему отказались от верстки таблицами? Потому что они долго грузятся? Или еще по какой-то причине? А если много таблиц на одной странице - это как, лучше?
Мне-то все равно - клиент сказал "надо", значит надо) Просто для общего развития

div{display:table-cell;vertical-align: middle;} имитирует таблицу для блока. чем не подходит?

Потому что table — это элемент содержания а не представления. Никому же не приходит в голову верстать всё тэгом H1 например. Это плохо для семантики. А ваша задача проще решается. Вариант 2 (кроме предложенного Динамитом): display:inline-block. Будет небольшой глюк: небольшие отступы между элементами. Решается двумя вариантами:
1. Склеивать элементы, чтобы не было пробелов между блоками: <li>элемент</li><li>элемент</li>
2. Задать для ul размер шрифта:0 и отрицательный межбуквенный интервал, а для li вернуть обратно.

У меня там нет списка. И тэйбл-селл что-то не покатил.... А чем таблицы плохи для семантики?

Смысл написанного мной способа в том, что неважно, какие там у вас тэги. Способ решает задачу описанную вами. Почему не получилось с table-cell — хз, решение тоже стопроцентно рабочее. Про семантику лучше SEOшников спросить. Вообще, таблицами «верстают» всегда только по-одной причине: недостаточные знания в области вёрстки в целом. Т.к. нет ни одной задачи, которую нельзя было бы решить без таблиц, более красиво и практично.

У меня там нет списка. И тэйбл-селл что-то не покатил.... А чем таблицы плохи для семантики?

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

Вообще, таблицами «верстают» всегда только по-одной причине: недостаточные знания в области вёрстки в целом.

не на все 100% но «в яблочко»

Этот блин тэйбл-селл маргины не воспринимает и не хочет по горизонтали центроваться! Вот в чем зло))))))))) А так, да - vertical-align есть, зато horizontal-align в пролете))))))

Пришлось использовать два вложенных дива:

.works-table {
   display: table;
   width: 100%;
}
.works {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Прикольно....

Этот блин тэйбл-селл маргины не воспринимает

border-spacing....

Аня, покажите эскиз. Может там как-то по-другому можно сделать.

Да  все нормально вроде. Два вложенных дива - это ведь не катастрофа?
 
http://superartnow.com/category/paint/
http://superartnow.com/rostov-veliky/

Вообще, таблицами «верстают» всегда только по-одной причине: недостаточные знания в области вёрстки в целом.

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

более красиво и практично.

Вот когда пишешь код, то "красивость" - это простое решение + минимум кода. А здесь: отказ от таблицы с помощью имитации таблицы. Посветите еще, пожалуйста.

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

Верстальщик из меня никакой, и я тоже иногда прибегаю к использованию таблиц. Но я так и не понял, почему без таблицВот когда пишешь код, то "красивость" - это простое решение + минимум кода. А здесь: отказ от таблицы с помощью имитации таблицы. Посветите еще, пожалуйста.

Просвещаю: Во-первых, имитацию таблицы делает браузер, а поисковики получают чистый контент. Во-вторых, Для таблицы нужны минимум три обязательных тэга: <table><tr><td>, а display:table-cell можно назначать элементам без обёрток. Т.е. не надо делать, как сделала Аня, обёртывать в div.row и div.table.

Спасибо за урок

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

horizontal-align - а это что?)

В тред врывается IE7 и FF один из них не поддерживает display: table-cell; в принципе, другой не умеет абсолютно в них позиционироваться ))

кто-то еще верстает под под 7-ку? 6-кой не балуетесь?

А я думал что уже и 8ка в мусорке.. не?

кто-то еще верстает под под 7-ку?

Вы будите удивлены)) Но проблему с FF это все рано не решает приходится адские костыли писать для него

А я думал что уже и 8ка в мусорке.. не?

Не припомню не одного раза что бы не нужно поддерживать 8 (хотя есть пару исключений). Возможно на визитках прокатит но на больших порталах его нужно поддерживать 100%

На самом деле конечно может вы и правы, я в верстаю постолько - поскольку, всех нюансов не знаю, но порой намного проще таблицей сверстать. К примеру у меня php скрипт динамически текст формирует с картинками под этим текстом по несколько штук в ряд.  У картинок высота пусть будет фиксированный, у блока с текстом плавающая. Как мне сделать чтобы и текст и картинки по вертикали выравнивались? Если текста много он картинку вниз начинает сдвигать.. В табличной верстке две строки : vertical-align = center  и все. Тогда как в блочной верстке этот процесс превращается в сущий ад + всякие проблемы с кроссбраузерностью у display: table-cell. javascript-ом и то проще это хозяйство по вертикали  выровнить чем в случае блочной верстки. Как бы вы поступили в такой ситуации?

zomby6888, я выше выкладывал решение куда более сложного примера. А вашем случае просто display:inline-block; Правда, это правило не будет работать в IE6 ))

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

zomby6888, нарисуйте эскиз пожалуйста. Уверен, задача тривиальная.

Мазохизм какой-то. Проще сверстать таблицами, так верстайте таблицами. В чем проблема? С семантикой все в порядке. Поисковики вполне с этим справляются. Кроме верстальщетского снобизма разницы нет.

passer, кому-то удобно в Wordе сайты делать, тоже всё в порядке, если поисковики справятся? Конечно, сейчас поисковики не те, что были десять лет назад, контент Flash умеют читать, к слову. Мочему бы тогда не делать все сайты целиком на Flash? Тут дело не в снобизме, а в рационализации и логике.

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

passer, именно так. В том то и дело, что без таблиц всегда получится меньше кода. И у таблиц нет ни шанса

Только есть еще и семантика