html - 如何使用CSS实现表格结构

Question

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

我如何使用 <div> 复制这种结构？或 <span> 'ed CSS

Answer 1

取决于您要复制的内容。

通过您给出的简单示例，要准确说明您要实现的目标并不容易，但是如果您要做的是并排放置两个 block (即作为页面布局中的列), 你只需要创建几个 <div>元素并使用 CSS 将它们设置为彼此相邻的样式。根据您的具体需要，您可以通过多种方式制作样式表。

一个选项是将它们都设置为 float:left; .使用 width:...以像素或百分比设置您想要的宽度。

如果float对你来说太复杂了(与基于表格的布局相比，概念上有很大的飞跃)，你可能需要考虑使用 display:inline-block;反而。这也将允许 <div> s 彼此相邻放置，但可以让您更好地控制它们的放置方式。

最后，如果 <table> 的内容实际上是一个数据表，不要害怕将它保存在一个表中 - <table>标记及其 friend 仍然是有效的 HTML，将表格数据放入表格中仍然是一件好事。