Question

我没能用div制作复杂的表格最大的问题就是这样。 http://snook.ca/archives/html_and_css/getting_your_di

但它仅在简单表格中有用

所以任何人都可以将其作为div：

<html> <head> <style> td { TEXT-ALIGN: center; PADDING: .25em; } </style> </head> 
<body> 
<table width="205" border="1" cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="3" >1</td><td width="14%" colspan="2" rowspan="2">2</td>
</tr>
<td width="15%">3</td>  <td width="16%">4</td>  <td width="18%">5</td>  
</tr> 
<tr> 
<td height="42" >6</td> <td height="42" >6.1</td>  <td >7</td>  <td >7.1</td> <td >7.2</td> 
</tr> 
<tr> 
<td height="42" >6</td> <td height="42" >6.1</td>  <td >7</td>  <td >7.1</td> <td >7.2</td> 
</tr> 

</table> 
</body> 
</html>

Answer 1

使用该方法重建表格有点拉伸，因为没有CSS替换rowspan和colspan，但可以通过浮动和清除div来完成，或者使用绝对定位来完成某些内容。如果您不熟悉这些方法，可以在http://www.alistapart.com/articles/css-floats-101/和http://www.alistapart.com/articles/css-positioning-101/上找到一些很棒的教程。

但是，如果您的表用于显示表格数据，则无需将其转换为div，因为表格可以用于此目的。

Answer 2

不要将<div>用于表格数据。使用<table>。

<div>应该用于（页面）布局目的，因为它们没有附加语义含义，不应该用它们代替<table>。

Answer 3

我建议使用twitter bootstrap。这是包含您可以使用的表格和表格的网站：

http://twitter.github.com/bootstrap/scaffolding.html

祝你好运。

从Divs创建一个表格

3 个答案: