Что использовать для верстки корзины интернет-магазина — таблицу или div'ы?

Question

[Porebro]

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

<div id="down_left">
 		<h3>Shopping bag</h3>
 			<div class="table2">
	 			<img src="pics/pic_mini1.jpg" alt="">
	 			Vans Vault 2012 Summer OG Era LX Pack  <a href="#">[Remove]</a>
	 			 <span class="one">1</span>
	 			 &pound;54.00
 			 </div>
 			<div class="table2">
	 			<img src="pics/pic_mini2.jpg" alt="">
	 			Emerica Pure 12 T Shirt Red  <a href="#">[Remove]</a>
	 			 <span class="one">2</span>
	 			 &pound;54.00
 			</div>
 			<div class="table2">
	 			<img src="pics/pic_mini3.jpg" alt="">
	 			Fred Perry Dark Yellow Checked Shirt <a href="#">[Remove]</a>
	 			 <span class="one">3</span>
	 			 &pound;54.00
 			</div>

 			 <div id="deep_right">
	 			<h3 id="total">Total: £156.00</h3>
	 			<div id="orange">
	 			<img src="pics/orange_button.jpg" alt="" >
	 			</div>
 			</div><!-- /#deep_right -->
 			
 					
 		</div><!--/#down_left -->

Извиняюсь за то, что код не условный.
Я честно сказать тоже за таблицу, но вот в голове код не могу сформулировать. Мне это видится как :
1)Заголовок
2) Сама таблица, состоящая из двух столбцов. В левом столбце будет инфа вплоть до "ссылки" "[remove]" , в правом столбце 1 и ценник.
3) Снизу будет два плавающих блока. В левом цена, в правом кнопка.
Или возможно сразу все запихнуть в таблицу? Очень хотелось бы на условный код посмотреть.

Answer 1

[Алексей Уколов]

Таблицы проще и надежнее, дивы - гибче. Что именно выбрать, зависит от ситуации.

Comments

[Porebro]

Дык ситуация есть) Я честно сказать тоже за таблицу, но вот в голове код не могу сформулировать. Мне это видится как :
1)Заголовок
2) Сама таблица, состоящая из двух столбцов. В левом столбце будет инфа вплоть до "ссылки" "[remove]" , в правом столбце 1 и ценник.
3) Снизу будет два плавающих блока. В левом цена, в правом кнопка.
Или возможно сразу все запихнуть в таблицу? Очень хотелось бы на условный код посмотреть.

[Алексей Уколов]

Чисто семантически я бы сделал так: jsfiddle.net/b7eqjau2/1

Answer 2

[D']

Таблицей.

Почему все так боятся таблиц? Что за фобия середины нулевых?
Многие уже дошли до маразма, и ТАБЛИЦЫ верстают дивами.

Comments

[Иван Антонов]

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

[D']

Иван Антонов: Про адаптивку ничего не было сказанно. Если так, то да, лучше дивами сверстать такую корзину.

[Dark_Dante]

У таблицы есть один недостаток - отрисовка таблицы браузером довольно ресурсоемкая процедура. Столкнулся недавно с этим. Надо было js-ом создать таблицу с данными. Данных может быть огромное количество, у меня например были варианты когда количество tr-ов доходило до 1000. Chrome просто зависал, firefox крашился, осел тормозил. Заменил все на дивы с display:table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Теперь даже на таких приличных объемах браузеры летают

[Иван Антонов]

SelenIT2: я еще так не извращался поэтому не знаю :)

Answer 3

[WhiteSama]

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

Answer 4

[Александр]

Верстай таблицей=)
Либо дивами с табличным отображением=) Но таблицей сделаешь быстрее и надежнее

Answer 5

[Алексей]

Дивом будет практичнее и правильнее.
Таблицы - они для табличных данных.
Из названий CSS классов думаю все понятно.

<div id="cart">
<div class="row">
  <div class="image span-2">
     <img />
  </div>
  <div class="name span-6">
    Pruduct #1
  </div>
  <div class="quantity span-2">
    <input type="test" value="1" />
  </div>
  <div class="price span-2">
    66.6
  </div>
</div>
</div>

Comments

[65536]

А содержание заказа это не табличные данные?

[Алексей]

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

Answer 6

[Therapyx]

Классам можно присваевать значения, к примеру table-cell, table-row. и можно просто заменять все свои tr td.
В любом случае дивами надо, универсальней и новее, таблицы это уже старенькое... ))

Comments

[Алексей]

Таблицы не "старенькое", а семантически придумано для другого.

[Therapyx]

Алексей: Нет, это именно "старенькое", Я сейчас уже 2 недели переделываю эти сраные таблицы по заявленым стандартам. У дивов куда больше возможностей по сравнению с обычными таблицами. И кто знает? Когда-то ведь это может пригодится. И вот, нашей фирме это пригодилось, и теперь 400 страниц прихоидится переделывать, дак почему же это не сделать сразу? Чтобы в будущем избежать таких проблем.

Answer 7

[Turtle_Onni]

Воспользуйтесь готовыми адаптивными css фреймворками.
Статья на хабре