而不是html表使用div ..好,但表很容易

Question

伙计我是一名程序员,当我需要添加一些看起来像眼睛的桌子并使用html表格的东西时,我总是被我的网页设计师们所震撼.我怎样才能为div构建一个通用的html div结构,所以我可以拥有它,并且当我需要看起来像桌子的东西时总是复制粘贴html？

所以在这个表html结构的情况下

<table>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
</table>

什么是相似的div结构？

Answer 1

您将要使用的显示器table,table-row以及table-cell:

CSS:

.table
{
   display:table;
}

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

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

HTML:

<div class="table">
   <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
   </div>
   <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
   </div>
</div>

演示

需要注意的是table,table-row和table-cell显示值不支持在IE7或以下,IE8需要一个!DOCTYPE.

此外,表格应该用于表示表格数据,因为它给标记在一堆带有类的div上提供了更多的语义含义.您不应该使用表格进行布局.

Answer 2

如果你正在使用HTML table元素表格数据,那么我建议你回击你的网页设计师!

table在显示表格数据时,HTML表格不是邪恶的,可以接受和推荐使用HTML .

http://webdesign.about.com/od/tables/a/aa122605.htm