Таблица vs блоки

Softlink · June 21, 2011

Всем привет!

Часто в дизайне применяют некоторую структуру из изображений. Что-то вроде стены из картинок.

Все изображения одинакового размера.

Вот пример:

На форуме частенько попадаются такие вопросы. И вот заходит спор, как лучше решать такую (конкретную) задачу.

На таблицах или блоками(списками)?

Мое мнение, что здесь идеально подходит именно таблица.

Во-первых минимальный набор кода в ксс, по сравнению с блоками. При этом количество тегов явно не больше чем на блоках.

Во-вторых она полностью кроссбраузерна (в отличие от инлайн-блоков и т.д.).

В-третьих не надо заморачиваться на счет размерности если вдруг придется в дизайне поменять картинки со 150*150 на 160*160 например.

В-четвертых больше ничего не придумал.

У кого какое мнение?

psywalker · June 21, 2011

Всем привет!
Часто в дизайне применяют некоторую структуру из изображений. Что-то вроде стены из картинок.
Все изображения одинакового размера.
Вот пример:
На форуме частенько попадаются такие вопросы. И вот заходит спор, как лучше решать такую (конкретную) задачу.
На таблицах или блоками(списками)?
Мое мнение, что здесь идеально подходит именно таблица.
Во-первых минимальный набор кода в ксс, по сравнению с блоками. При этом количество тегов явно не больше чем на блоках.
Во-вторых она полностью кроссбраузерна (в отличие от инлайн-блоков и т.д.).
В-третьих не надо заморачиваться на счет размерности если вдруг придется в дизайне поменять картинки со 150*150 на 160*160 например.
В-четвертых больше ничего не придумал.
У кого какое мнение?

Сделай два варианта, один на таблицах, другой на списках пожалуйста.

klierik · June 21, 2011

списками

psywalker · June 21, 2011

списками

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

klierik · June 21, 2011

ага, если автор ещё сделает на списках и тут выложит объяснение этому то это будет ему шикарным бонусом в понимании построении семантического HTML кода

Softlink · June 21, 2011

пример у меня вот здесь

Может быть не совсем элегантно в ксс. Готов посмотреть другие подобные примеры.

klierik · June 21, 2011

невкурил зачем в списках ложить в каждую строку О_О

sigma77 · June 21, 2011

Блоки, ИМХО.

Т.к.

1) Это не табличные данные.

2) CSS кода не значительно больше, чем для таблицы, но html меньше и четко видна структура.

3) Инлайн-блоки вполне поддаются дрессировки.

4) С изменением размера картинки тоже не вижу особых проблем.

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

6) Большая гибкость и доступность не десктопным браузерам.

Softlink · June 21, 2011

невкурил зачем в списках ложить в каждую строку О_О

полностью согласен - это лишнее, убрал.

psywalker · June 21, 2011

Softlink

Блоки, ИМХО.
Т.к.
1) Это не табличные данные.
2) CSS кода не значительно больше, чем для таблицы, но html меньше и четко видна структура.
3) Инлайн-блоки вполне поддаются дрессировки.
4) С изменением размера картинки тоже не вижу особых проблем.
5) Не нужно ждать прогрузки всей таблицы, а изображения могут быть достаточно весомыми.
6) Большая гибкость и доступность не десктопным браузерам.

Ну а я тебе о чём в ЛС говорил, разве не слова Оксаны?

невкурил зачем в списках ложить в каждую строку О_О
полностью согласен - это лишнее, убрал.

Там очень много лишнего, кстати.

s0rr0w · June 21, 2011

Или я накуреный или вы. :dash:

Приведенную структуру делать просто на IMG или, если хочется повыпендриваться, на span с background-image.

Никаких списков, никаких таблиц.

Softlink · June 21, 2011

Softlink
Блоки, ИМХО.
Т.к.
1) Это не табличные данные.
2) CSS кода не значительно больше, чем для таблицы, но html меньше и четко видна структура.
3) Инлайн-блоки вполне поддаются дрессировки.
4) С изменением размера картинки тоже не вижу особых проблем.
5) Не нужно ждать прогрузки всей таблицы, а изображения могут быть достаточно весомыми.
6) Большая гибкость и доступность не десктопным браузерам.
Ну а я тебе о чём в ЛС говорил, разве не слова Оксаны?

не понимаю :dash: , пока не согласен <_<

1) табличные данные должны быть исключительно текстовые или как?

2) в таблице не видна она?

3) вообще ничего не надо дрессировать и выдумывать.

4) в таблице вообще никаких проблем нет, меняешь и все.

5) здесь соглашусь

6) что понимается под гибкостью здесь?

psywalker · June 21, 2011

Или я накуреный или вы.
Приведенную структуру делать просто на IMG или, если хочется повыпендриваться, на span с background-image.
Никаких списков, никаких таблиц.

Да, ты трезвый, но не смотря на это я всё равно выбираю списки, в связи с тем, что ими потом легче управлять и назначать например паддинги, маргины в ячейках и т.д.

klierik · June 21, 2011

Или я накуреный или вы.
Приведенную структуру делать просто на IMG или, если хочется повыпендриваться, на span с background-image.
Никаких списков, никаких таблиц.

ну по сути это, если правильно понял, список картинок.

на background вешать не целесообразно так как будут задержки в рендеринге.

psywalker · June 21, 2011

Softlink
Блоки, ИМХО.
Т.к.
1) Это не табличные данные.
2) CSS кода не значительно больше, чем для таблицы, но html меньше и четко видна структура.
3) Инлайн-блоки вполне поддаются дрессировки.
4) С изменением размера картинки тоже не вижу особых проблем.
5) Не нужно ждать прогрузки всей таблицы, а изображения могут быть достаточно весомыми.
6) Большая гибкость и доступность не десктопным браузерам.
Ну а я тебе о чём в ЛС говорил, разве не слова Оксаны?
не понимаю , пока не согласен
1) табличные данные должны быть исключительно текстовые или как?
2) в таблице не видна она?
3) вообще ничего не надо дрессировать и выдумывать.
4) в таблице вообще никаких проблем нет, меняешь и все.
5) здесь соглашусь
6) что понимается под гибкостью здесь?

1) Табличные данные - это табличные данные, про календарь я тебе говорил уже, как пример.

2) Это всё чушь, мерилка письками, кода, что там, что там, не так многа, тут дело не в этом.

3) Тут не нужны абсолютно никакие инлайн-блоки, задача легко решается на float; и я бы тут выбрал их.

4) В рамках конкртентой задачи тоже самое легко всё меняется в списке.

5) Пропускаем этот пункт)

6) Гибкость хотя бы в том, что блоками можно легко оперировать, переставляя их с места на место, в отличии от таблиц и их ячеек, намного проще работать со структурой HTML, что для меня тут имеет приоритет.

Softlink · June 21, 2011

6) Гибкость хотя бы в том, что блоками можно легко оперировать, переставляя их с места на место, в отличии от таблиц и их ячеек, намного проще работать со структурой HTML, что для меня тут имеет приоритет.

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

По поводу добавления и перестановки блоков внутри ничего не меняется. Что ты будешь добавлять <li></li>, что <td></td> все тоже самое.

sigma77 · June 21, 2011

не понимаю , пока не согласен
1) табличные данные должны быть исключительно текстовые или как?
2) в таблице не видна она?
3) вообще ничего не надо дрессировать и выдумывать.
4) в таблице вообще никаких проблем нет, меняешь и все.
5) здесь соглашусь
6) что понимается под гибкостью здесь?

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

2. Нет не видна.

Сравни:


<table>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
</table>

/* и */
<ul>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
</ul>

Что понятней и проще отражает твою структуру?

3. Здесь тоже выдумывать ничего не надо, все уже давно придумано.

4. И тут никаких проблем.

5. -

6. Гибкость в изменении кода, добавлении новых элементов, изменении количества картинок в строке, js, CMS и т.п.

Softlink · June 21, 2011

Слушайте, отцы-верстатели, сделайте пример на списках пожалуйста. А то я ведь неискушенный в них. Посмотрю на ваш нормальный код.

Может из-за этого я как раз парюсь, что не могу нормально(правильно) собрать такую штуку на блоках.

Edited June 21, 2011 by Softlink

SelenIT · June 21, 2011

В данном случае поддерживаю s0rr0w. Вертикальных связей, оправдывающих табличность, тут не найти даже с микроскопом, списочность... ну, можно притянуть за уши на таком же примерно основании, как обозвать любой текст списком составляющих его слов . А так обычный phrasing content, обычная строка инлайн-блоков (img-шки таковы по умолчанию), ограниченная по ширине. Увеличится размер картинок при той же ширине — уменьшится кол-во визуальных колонок, а смысл не изменится.

Edited June 21, 2011 by SelenIT

Softlink · June 21, 2011

1. Нет. Не исключительно. Но таблица представляет собой какие-либо структурированные данные, обычно имеющие какой-либо заголовок, идентифицирующий конкретную информацию.
2. Нет не видна.
Сравни:
<table>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
</table>

/* и */
<ul>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
</ul>
Что понятней и проще отражает твою структуру?
3. Здесь тоже выдумывать ничего не надо, все уже давно придумано.
4. И тут никаких проблем.
5. -
6. Гибкость в изменении кода, добавлении новых элементов, изменении количества картинок в строке, js, CMS и т.п.

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

2) абсолютно не вижу разницы. Структура полностью одинакова:

<tr>
<td><img src="" alt="" /></td>
</tr>

и


<ul>
<li><img src="" alt="" /></li>
</ul>

где, собственно, разница?

3) неубедительно

4) неубедительно

6) про добавление выше написал, про js и CMS наверное + спискам уйдет.

psywalker · June 21, 2011

В данном случае поддерживаю sorrow. Вертикальных связей, оправдывающих табличность, тут не найти даже с микроскопом, списочность... ну, можно притянуть за уши на таком же примерно основании, как обозвать любой текст списком составляющих его слов . А так обычный phrasing content, обычная строка инлайн-блоков (img-шки таковы по умолчанию), ограниченная по ширине. Увеличится размер картинок при той же ширине — уменьшится кол-во визуальных колонок, а смысл не изменится.

Илюх, я с тобой полностью согласен, и с sorrow тоже. Я выбираю списки не из-за того, что это модно, а потому что мой опыт меня привёл к тому, что таким образом легче управлять структурой и её изменениями и поддержкой в будущем.

1. Нет. Не исключительно. Но таблица представляет собой какие-либо структурированные данные, обычно имеющие какой-либо заголовок, идентифицирующий конкретную информацию.
2. Нет не видна.
Сравни:
<table>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
	<tr>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
		<td><img src="" alt="" /></td>
	</tr>
</table>

/* и */
<ul>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
	<li><img src="" alt="" /></li>
</ul>
Что понятней и проще отражает твою структуру?
3. Здесь тоже выдумывать ничего не надо, все уже давно придумано.
4. И тут никаких проблем.
5. -
6. Гибкость в изменении кода, добавлении новых элементов, изменении количества картинок в строке, js, CMS и т.п.
1) если я добавить над каждым столбцом какой-то заголовок, то списки здесь напрочь отметаются?
2) абсолютно не вижу разницы. Структура полностью одинакова:
<tr>
<td><img src="" alt="" /></td>
</tr>
и
<ul>
<li><img src="" alt="" /></li>
</ul>
где, собственно, разница?
3) неубедительно
4) неубедительно
6) про добавление выше написал, про js и CMS наверное + спискам уйдет.

Блочные стороны молодцы, смотрите, уже 2 пункта отквитали

Softlink · June 21, 2011

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

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

SelenIT · June 21, 2011

Самый простой пример гибкости — необходимость изменить кол-во колонок. В таблице придется передвигать </tr><tr>, в сплошной структуре не придется менять ничего, кроме одного-двух параметров в стилях...

Вариант без таблиц и списков: http://jsfiddle.net/TeCcN/

Edited June 21, 2011 by SelenIT

mishka · June 21, 2011

любой из вариантов который был предложен ( табличка, просто картинки, блоки ), в зависимости от задачи, но только не списки.

Говорите о гибкости? Так тогда юзайте блоки а не списки.

Список - как параграф, он для списка, а не для построения странички.

sigma77 · June 21, 2011

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

http://jsfiddle.net/UbnDf/

любой из вариантов который был предложен ( табличка, просто картинки, блоки ), в зависимости от задачи, но только не списки.
Говорите о гибкости? Так тогда юзайте блоки а не списки.
Список - как параграф, он для списка, а не для построения странички.

Список здесь тоже возможен. Если это, например, галерея, то это будет список картинок относящийся, допустим, к определенной теме.

Sign In

Таблица vs блоки

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

s0rr0w

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information