Question

假设我们有一个旧式的六到八种产品，这些产品都包含在带边框的表格中（所谓的领导者或特殊产品）。是表格数据吗？是否值得用div替换它？如果是，那我该怎么办呢？

谢谢。

我想到以下几点：

这些产品不相关。从这个角度来看，这不是表格数据。
此表也有边框，由于液体布局（宽度为％），我无法用div（或可能不知道）模拟。
此表位于主页面上。而且我希望能够更方便地使用移动设备等设备。

所以我应该使用div但不知道最好的方法。顺便说一句，我认为这是现代网站不使用边框的主要原因，但是“阻塞”没有边框崩溃。

谢谢大家。

补充说：简单地说，我们有一个包含两行，六个单元格和border = 1的表格。这是一个我想保留的老式设计。

有问题： - 边界 - 边界崩溃

我只想知道经验丰富的设计师如何解决这个问题。怎么办？

抱歉这么多话。是的，我知道截图，但没有什么特别的表，每个单元格中都有一个图像。

Answer 1

将表用于真正的表没有任何问题，只需在代码中设置表结构，并使用纯css格式化它。（表格数据本质上必须至少包含两行和每列标题。）在构建[整个]页面布局时，只需要避免使用表格。

Answer 2

如果您想突出显示某些产品，请将它们显示为＆＃39; block＆＃39;而不是表格行，我会把它们放在div中，是的。

<div class="product">some product<br /><img src="product.jpg" /></div>
<div class="product">some other product<br /><img src="product.jpg" /></div>
<div class="product">yet some other product<br /><img src="product.jpg" /></div>

CSS：

div.product {
    width: 100px;
    height: 100px;
    float: left;
}

清除＆＃39; div的浮动，你需要在最后一个产品div下面这样的东西。

<div style="clear: both;"></div>

否则，您的下一个元素将位于产品的下方/上方。

Answer 3

我可能误解了（您可以提供链接或屏幕截图），但这听起来像不是表格数据。您所描述的是产品的 LIST ，因此它应该放在<UL>无序列表或<OL>有序列表中（如果订单很重要，则后者）。< / p>

所以你的产品看起来像：

<ul id="lead-products">
    <li>
         Amazing Product - $10.65
         ...
    </li>
    ...
</ul>

然后使用CSS你可以给它一些风格：

 #lead-products { //the list
      list-style: none; /* make it not display list markers */
      overflow: hidden; /* used to clear up floats */
      margin: 0;
 }

 #lead-products li { /* these are your elements/products */
      margin: 5px; /* some space around it */
      float: left; /* float them to the left so they are besides each other */
      border: 1px solid black; /* border around the products */
      width: 20%; /* dynamic width as you needed */
 }

表更换。我是不是该？

3 个答案: