CSS网页布局实例：以合适的标签创建具有语义的表格

建立符合Web标准的网站，谈表格即色变的态度完全不可取。在页面中不可避免的存在着表格类型的数据内容，例如分析报表，统计报表，财务报表等等。表格类型的数据就应该使用表格来表现。对于页面的布局则应该完全摒弃表格，用合适的标签来表现页面的结构、组织页面内容是我们的目标。

　　今天52CSS.com和大家共同学习在CSS网页布局中，对表格数据的处理。这个案例或许并不具有典型意义，但标签结构明确，大家在以后的工作中可以借鉴。本案例是八行五列式的表格，在表格最顶端，有一个表格的标题。最终完成的效果如下图所示。

首先开始编写XHTML代码，主要由table、tr、td标签构成，但是表格的标题用caption标签，表格的表头用th标签，这样设置更合适，也具有语义。我们给table赋予id为MrJin。

XHTML代码如下：

 Example Source Code [www.xxcss.com]

<table id="MrJin">
    <caption>52CSS.com分析统计表</caption> 
    <tr>
        <th>关于栏目</th>
        <th>文章分布</th>
        <th>用户关注</th>
        <th>52CSS规划</th>
        <th>统计概况</th>
    </tr>
    <tr>
        <td rowspan="2">52CSS.com</td>
        <td>30</td>
        <td>40</td>
        <td colspan="2">52CSS.com</td>
    </tr>
    <tr>
        <td>200</td>
        <td>100</td>
        <td>52CSS.com</td>
        <td>500</td>
    </tr>
    <tr>
        <td>30</td>
        <td>50</td>
        <td>52CSS.com</td>
        <td>40</td>
        <td>52CSS.com</td>
    </tr>
    <tr>
        <td>200</td>
        <td>52CSS.com</td>
        <td>150</td>
        <td>280</td>
        <td>180</td>
    </tr>
    <tr>
        <td>290</td>
        <td>211</td>
        <td>52CSS.com</td>
        <td>380</td>
        <td>310</td>
    </tr>
    <tr>
        <td>200</td>
        <td>50</td>
        <td>180</td>
        <td>52CSS.com</td>
        <td>280</td>
    </tr>
    <tr>
        <td>380</td>
        <td>52CSS.com</td>
        <td>290</td>
        <td>211</td>
        <td>370</td>
    </tr>
</table>

　　对于table、tr、td标签我们都非常熟悉。面对了N年了。重点介绍以下两个标签caption和th。

caption标签

　　caption标签可以为表格提供一个描述，和图像的说明alt标签相类似。
　　caption标签成对出现，以<caption>开始，</caption>结束。
　　在默认情况下，浏览器显示表格标题在表格的上方。 
　　CSS中caption-side属性用来控制表格标题显示的位置。
 
th标签

　　th是table header cell的缩写。来用表示表格的表头。
　　th标签成对出现，以<th>开始，</th>结束。
　　th标签其他一些属性的定义与使用与td基本相似。

　　建立了具有语义的表格结构，下面开始用CSS为表格定义外观样式。

 Example Source Code [www.xxcss.com]

* { 
    margin:0; 
    padding:0; 
    font-size:13px; 
    color:#000;
}

　　整体布局声明，使用通配选择器*，设置元素外边距、内边距、文字大小和文字颜色。

 Example Source Code [www.xxcss.com]

#MrJin { 
    width:500px; 
    margin:0 auto; 
    border:1px solid #03c; 
    border-width:1px 0 0 1px; 
    border-collapse:collapse;
}

　　定义id为MrJin的表格，宽度为500px，左右居中对齐，1px的蓝色实线边框，但是只有上边与左边有边框（border-width:1px 0 0 1px; ）。border-collapse属性的定义您可以参考这里：

 Example Source Code [www.xxcss.com]

#MrJin caption { 
    margin:0 auto;
    width:500px;
    line-height:30px; 
    font-size:15px; 
    font-weight:800;
    text-align:left;
    color:#c00;
}

　　设置表格标题的样式，左右居中对齐，宽度为500px，设置行距为30px，文字大小15px，文字加粗，左对齐，文字颜色为深红色#c00。

 Example Source Code [www.xxcss.com]

#MrJin tr{ 
    background-color:expression('#ededed,#fff'.split(',')[rowIndex%2]);
}

　　background-color定义tr背景色，关于此效果的实现原理及expression属性的应用，您可以参考这里：

 Example Source Code [www.xxcss.com]

#MrJin td,#MrJin th{
    border:1px solid #03c;
    border-width:0 1px 1px 0;
    padding:3px 5px;
}

　　应用群组选择器，定义td与th的样式。1px的蓝色实线边框，但只有右边和下边有（border-width:0 1px 1px 0;）。设置内边距上下为3px、左右为5px。

 Example Source Code [www.xxcss.com]

#MrJin th {
    padding:6px 3px;
    color:#03c;
}

　　为了使表头与表格内容的单元格有一定的区别。层叠定义表头th的样式。
　　设置内边距上下为6px、左右为3px。文字颜色为蓝色#03c。

　　至此整个案例基本结束了，实现了不错的效果。将表格的表现层的东西全部分离至CSS文件中进行定义。