|
下面的表格就是一个极为常见的表格，我们通过这个实例来学习一下完整的table原型结构。比如说：标签属性summary是用来获取对象的的描述和/或结构的；标签colgroup是用来指定表格中列或列组的。又比如说tfoot是怎样跑到tbody前面去了的。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
上图代码如下
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>一个比较完整的table原型结构</title>
<style type="text/css">
table {
width:100%;
table-layout:fixed;
border-collapse:collapse;
font:14px/25px Georgia, Arial, "宋体";
}
td {
padding:0 5px;
}
thead th {
color:#000;
}
tfoot td {
font-weight:normal;
text-align:center;
}
caption,.col1 {
font-weight:bold;
}
.col2 {
color:#050;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="一个基本完整的table原型结构">
<caption>
手机价目表
</caption>
<colgroup>
<col class="col1" />
<col span="2" class="col2" />
</colgroup>
<thead>
<tr>
<th>型号</th>
<th>价格</th>
<th>上市</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Copyright © 2011 jzxue.com</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>诺基亚5230XM</td>
<td>900-1100元</td>
<td>2009年</td>
</tr>
<tr>
<td>苹果iPhone4代</td>
<td>4700-5500元</td>
<td>2010年</td>
</tr>
<tr>
<td>摩托罗拉MB525/ME525</td>
<td>2100-2300元</td>
<td>2010年</td>
</tr>
</tbody>
</table>
</body>
</html>
(责任编辑：admin) |
