用CSS制做表格初级篇

在人们都开始使用div+css的时候每每忽略了表格的重要性，在不少场合如会员注册等表单的使用时用表格制做比div+css要更具效率性。

下面简单和你们分享一下如何用css来制做表格

在讲如何制做表格以前先和你们分享一下关于table的几个基本标签

table  表示表格的对象，tr表示表格的行，td表示每一个单元格。这是使用最多3个的标签。

caption 定义表格的名称，tbody     定义表格内容区，thead    定义表格头，tfoot      定义表格页脚，th          定义表头的单元格。这些在传统的表格设计上几乎没有被使用，而在符合web标准的css布局中却很是实用。好比表头，若是使用thead来标记表头的话，那么对表头就没必要再对tr进行特别的class制定，只要用table thead选择符就能够进行样式设计。

实例：

<table id="table">

<thead>

<tr>

<th>css特征1</th><th>css特征2</th><th>css特征3</th>

</tr>

<tbody>

<tr>内容1</tr><tr>内容2</tr><tr>内容3</tr>

</tbody>

<tfoot>

<tr>表格页脚</tr>

</tfoot>

</table>

这个例子应用了表格页头，内容和表格页脚3部分，都放在了id为table的标签中。

下面简单讲一下表格的样式控制

其实表格的样式控制和其余对象的样式控制没什么区别。同样是使用width，margin，border，等等属性来控制表格的样式。

这须要指出的一点是，在对表格对象进行样式控制是，须要注意到是“ border-collapse：collapse；”这个是属性设置，此属性是将表中中单元格之间的线条合并。若是不合并，那么每一个单元格都将拥有1px的边框，（若是你的单元格边框为1px的话）而两个邻近的单元格的边框就是两者之和。若是使用了 border-collapse：collapse则能够避免相似状况出现。

 本博广告代码页面就是利用css控制表格来实现的。读者能够查看一下源代码！

地址： [url]http://www.2d30.cn[/url]（原文章地址） 版权全部，转载时必须以连接形式注明做者和原始出处及本声明。