HTML/CSS: 用CSS与HTML实现表格的显示

在制作网页页面时，经常需要对页面进行分栏。据我现有的知识，目前有三种方法可以实现：

(1)float大法；

(2)position-absolute大法；

(3)表格大法。

今天重点讲述的是表格大法。对于前面两种，就简单说明一下：

(1)float大法便是将边栏设置为浮动，然后设置主内容的margin-left 或者是 margin-right 等于边栏的总宽度(外边距+内边距＋内容宽度)。如果出现浮动元素超出了某个逻辑块的边界，可以使用overflow:hidden解决。如果出现浮动元素覆盖到另外的逻辑块，可以使用clear:left 或者是 clear:right 解决。

(2)position-absolute大法便是将边栏固定在页面的某一个位置(你的目标位置)，然后与float大法一样设置外边距即可。

接下来是表格大法。在此之前我们先了解一下怎么用CSS与HTML实现表格的显示。下面是建立一个2*2的表格：

// HTML
<div id="tableContainer">
<div class="tablerow">
<div class="tableCell">
<p>Haha</p>
</div>
<div class="tableCell">
<p>Haha</p>
</div>
</div>
<div class="tableRow">
<div class="tableCell">
<p>Haha</p>
</div>
<div class="tableCell">
<p>Haha</p>
</div>
</div>
</div>

// CSS
div#tableContainer{
display: table;
}
div#tableRow{
display: table-row;
}
div#tableCell{
display: table-cell;
}

如此便能构成一个2*2的表格。对于分栏，其实就是一种特殊的情况，可以创建一个1*2的表格，然后将内容插入单元格。

注意：

1.该表格的单元格只能插入块状元素。如要插入內联元素，应在外面嵌套上块元素然后再插入；

2.border-spacing可以设置内容与边界的距离。同时，该距离也存在于边框外，但不能与其他元素的外边距重叠。

CSS表格显示与HTML表格有什么区别？

这个涉及到语义性。CSS表格与HTML表格不同，它显示只是使用一种类似表格的布局来表现这个结构中的内容。HTML表格面向的是表格数据，也就是应当有表格结构的数据。所以，使用CSS表格显示只是创建某种表现布局的一种方法，而HTML表格则是建立数据的结构。

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！