html table标签讲解
thead 标签 表示HTML表头
表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头。
tbody 标签 表示HTML表体
浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示。
scope 属性 定义了行或列的表头
scope可以定义行或列的表头
取值
col - 定义列表头
row - 定义行表头
colgroup - 定义列组的表头信息,是column group的缩写
rowgroup - 定义行组的表头信息,是row group的缩写
summary 属性 代表HTML表格的摘要
表格不仅可以有标题caption,还可以有一个摘要说明summary。摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等。
关于caption和th标签可以参考下面的文章。
CSS网页布局实例:以合适的标签创建具有语义的表格
http://www./article.asp?id=720
由于摘要summary不会显示在浏览器中,所以可以尽可能的使摘要描述足够长,这样更有利于那些通过“听”的浏览者了解你的table表格。
看下面的HTML代码:
<table id="MrJin_a" summary="关于www.52css.ocm网站的一些数据">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">IP</th>
<th scope="col">PV</th>
<th scope="col">RANK</th>
</tr>
</thead>
<tbody>
<tr>
<td> 网站首页</td>
<td>5000</td>
<td>47800</td>
<td>A</td>
</tr>
<tr>
<td>DivCSS教程</td>
<td>4500</td>
<td>42000</td>
<td>A-</td>
</tr>
<tr>
<td>CSS布局实例</td>
<td>4900</td>
<td>46300</td>
<td>A+</td>
</tr>
<tr>
<td>CSS2.0教程</td>
<td>4200</td>
<td>41800</td>
<td>A+</td>
</tr>
</tbody>
</table>
HTML代码中没有任何表现的部分,不设置边距,定义表格边线,色彩等。所有表现的内容都分离到CSS里去。
本文作者: 如需转载请建立本站链接(http://www./),并且不得随意改动文章内容、保留此版权声明文本!
看下面的CSS代码:
body
{
line-height: 20px;
}
#MrJin_a
{
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#MrJin_a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#MrJin_a td
{
color: #666;
padding: 9px 8px 0px 8px;
}
#MrJin_a tbody tr:hover td
{
color: #03c;
}