thead、tbody、scope、summary标签定义表格结构与语义

0411月

thead、tbody、scope、summary标签定义表格结构与语义

实现表格类的数据时，也应该做到“表现与内容分离”。所建立的表格并不是在dreamweaver中设置即可。应该是建立具有语义和良好结构的HTML文档，然后表格部分的设置通过CSS进行。

结构与语义明确。数据内容与表现分离。这样才是WEB标准的宗旨所在。

首先我们来熟悉几个不常用的标签thead、tbody、scope、summary，正确的使用这些标签使我们的代码具有良好的结构与语义。

thead 标签表示HTML表头
表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头。

tbody 标签表示HTML表体
浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时，可以使用tbody分段显示。

scope 属性定义了行或列的表头
scope可以定义行或列的表头
　　取值
　　col – 定义列表头
　　row – 定义行表头
　　colgroup – 定义列组的表头信息,是column group的缩写
　　rowgroup – 定义行组的表头信息,是row group的缩写

summary 属性代表HTML表格的摘要
表格不仅可以有标题caption，还可以有一个摘要说明summary。摘要是不会显示出来的，通常是给一些其它的工具使用的，比如盲人阅读器等。

由于摘要summary不会显示在浏览器中，所以可以尽可能的使摘要描述足够长，这样更有利于那些通过“听”的浏览者了解你的table表格。

看下面的HTML代码：

Example Source Code
<table id=”MrJin_a” summary=”葡提子网站建设”>
    <thead>
        <tr>
            <th scope=”col”>52CSS.com</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>Div+CSS</td>
            <td>4500</td>
            <td>42000</td>
            <td>A-</td>
        </tr>
        <tr>
            <td>SEO网站推广</td>
            <td>4900</td>
            <td>46300</td>
            <td>A+</td>
        </tr>
        <tr>
            <td>C网站运营</td>
            <td>4200</td>
            <td>41800</td>
            <td>A+</td>
        </tr>
    </tbody>
</table>
　　HTML代码中没有任何表现的部分，不设置边距，定义表格边线，色彩等。所有表现的内容都分离到CSS里去。

看下面的CSS代码：

Example Source Code
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;
}
　　由于数据内容与表现分离，我们可以轻松的为表格设置不同的样式而无需更改HTML编码。最终的HTML文档，我们设置了一个类似的表格，并改变了一些外观。