CSS表样式

Question

我想在我的页面中创建以下类似于表格的元素:

我曾经使用<table>...<table>标签来做,但现在我将我的所有网站切换到CSS,我正在使用DIV等.我想知道实现这种元素的"最佳"方法是什么(它仍然是<table>标签吗？).我不想在同一列中只创建3列和单独的项目,<BR />因为我想控制同一列中元素之间的间距(例如在Item1和Item4之间).

谢谢!!

乔尔

Answer 1

使用display:table,display:table-row,display:table-cell

#table {display:table;}
.row {display:table-row; }
.cell{display:table-cell;}

<div id="table">
  <div class="row">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
  </div>
  <div class="row">
    <div class="cell">Item 4</div>
    <div class="cell">Item 5</div>
    <div class="cell">Item 6</div>
  </div>
  <div class="row">
    <div class="cell">Item 7</div>
    <div class="cell">Item 8</div>
    <div class="cell">Item 9</div>
  </div>
</div>

实例http://jsbin.com/awagu4

...但是table如果你需要一张桌子,我建议你使用html标签.出于这个原因存在,然后你可以用css修改它.无论如何,两种解决方案都具有相同的结果.

Answer 2

使用表格来创建布局通常是不受欢迎的。将 div 与 CSS 一起用于表格数据也是不受欢迎的。正如您的问题所要求的，最好的方法是在这种情况下使用表格。

当然，除非图像中表示的项目不是表格数据，而是容器/盒子，而容器/盒子又将保存相应的数据。在这种情况下我可能会推荐 CSS。