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

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

52CSS原创，如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

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

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

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

XHTML代码如下：

div css xhtml xml Example Source Code

Example Source Code [www.52css.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为表格定义外观样式。

div css xhtml xml Example Source Code

Example Source Code [www.52css.com]

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

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

div css xhtml xml Example Source Code

Example Source Code [www.52css.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属性的定义您可以参考这里：
　　整理资料：与表格边框有关的CSS语法
　　http://www.52css.com/article.asp?id=394
　　CSS去除表格td默认间距及制作1px细线表格
　　http://www.52css.com/article.asp?id=593
　　css教程：实现符合Web标准的细线表格
　　http://www.52css.com/article.asp?id=676

div css xhtml xml Example Source Code

Example Source Code [www.52css.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。

div css xhtml xml Example Source Code

Example Source Code [www.52css.com]

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

　　background-color定义tr背景色，关于此效果的实现原理及expression属性的应用，您可以参考这里：
　　如何用CSS定义表格行背景色交替出现？
　　http://www.52css.com/article.asp?id=249
　　CSS2.0中的expression应用
　　http://www.52css.com/article.asp?id=117
　　CSS中expression怎么用？ CSS expression详解
　　http://www.52css.com/article.asp?id=230

div css xhtml xml Example Source Code

Example Source Code [www.52css.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。

div css xhtml xml Example Source Code

Example Source Code [www.52css.com]

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

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

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

最终的运行效果：

div css xhtml xml Source Code to Run

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS网页布局实例：以合适的标签创建具有语义的表格 - www.52CSS.com</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:13px;
color:#000;
}
#MrJin {
width:500px;
margin:0 auto;
border:1px solid #03c;
border-width:1px 0 0 1px;
border-collapse:collapse;
}
#MrJin caption {
margin:0 auto;
width:500px;
line-height:30px;
font-size:15px;
font-weight:800;
text-align:left;
color:#c00;
}
#MrJin tr{
background-color:expression('#ededed,#fff'.split(',')[rowIndex%2]);
}
#MrJin td,#MrJin th{
border:1px solid #03c;
border-width:0 1px 1px 0;
padding:3px 5px;
}
#MrJin th {
padding:6px 3px;
color:#03c;
}
</style>
</head>
<body>
<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>
</body>
</html>

[ 可先修改部分代码再运行查看效果 ]

　　再次重申，应用CSS网页布局，并不是完全不使用表格，表格类的数据依然用表格来表现，但表格的样式与外观，需要分离到CSS中进行定义，而不是在HTML代码中进行设置。

　　52CSS原创，如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

posted on 2008-06-26 21:26 莫莫阅读(151) 评论(0) 收藏举报

刷新页面返回顶部

导航

公告