三九空间博客

顶级香港空间、美国空间、国内空间提供商!关注和研究网站设计前端开发及IDC行业技术应用。

订阅RSS

采用CSS样式定义表格(Table)及标签意义

类别:前端开发    时间:2011-01-04

目前大部份网站都是采用DIV+CSS架构来制作,其实合理的采用表格还是不错的,该用Table的地方就大胆去用。但是有些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。

HTML有10个表格相关标签。下面是一个带有简介的列表,但是首先,文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:

<caption> 定义表格标题(4, 5)
<col> 为表格的列定义属性(4, 5)
<colgroup> 定义表格列的分组(4, 5)
<table> 定义表格(4, 5)
<tbody> 定义表格主体(4, 5)
<td> 定义一个单元格 (4, 5)
<tfoot> 定义表格的表注(底部)(4, 5)
<th> 定义表格的表头 (4, 5)
<thead> 定义表格的表头(4, 5)
<tr> 定义表格的行(4, 5)

CSS定义Table 样式

table{width: 100%; border-collapse:collapse; clear:both; margin-top: 20px;}
table caption{border: 1px solid #ccc; border-bottom: none; background: #E9E9E9 url(img/line_3.gif) repeat-x 0 0; font-weight:bold; height: 28px; line-height: 28px; text-align:left; padding-left: 10px; margin: 0;}
table td{border: 1px solid #ccc; text-align:center; line-height: 25px;}
table td img{margin: 3px 0;}
table th{border: 1px solid #ccc; background: #f7f7f7; font-weight:normal;line-height: 25px; text-align:left; padding-left: 10px;}

转载声明:
原载:三九空间博客 - 顶级香港空间、美国空间、国内空间提供商!
本文链接:http://www.39wa.com/blog/css-table.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作!

前端开发其他文章

文章分类

服务项目

友情链接

关于我们 | 站长工具
Copyright © 2006-2011 三九空间 版权所有