|
建立符合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文件中进行定义。
|
