在强调web标准化的今天，我们常见的实现表格的方法大多是用的css实现，但是平时工作中如果单单需要一个简单的表格页面，我们还是去用div+css实现的话，未免有点大材小用了，而且还会复杂，尤其在设计网站后面的时候更是如此，其实我们完全可以用table来实现表格的布局。下面是WP管理员之家自己写的一个用table布局表格实例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<table>
<caption>这是表格标签：</caption>
<tr>
<th width="20%">编号</th>
<th>题目</th>
</tr>
<tr>
<td>1</td>
<td>文章题目一</td>
</tr>
<tr>
<td>2</td>
<td>文章题目二</td>
</tr>
</table>
</body>
</html>
<style type="text/css">
table{
width:90%;
border-collapse: collapse;
border: 1px solid black;
line-height: 1.5em;
margin-bottom: 8px;
}
table caption{
line-height: 1.8em;
text-align: left;
}
table th{
border:1px solid gray;
padding: 2px;
background-color: #CCCCCC;
}
table td{
border:1px solid gray;
padding: 3px 0 2px 5px;
background: #F6F6F6;
}
</style>
关注微信