-- 作者：admin
-- 发布时间：2012/3/14 17:12:02
-- 回头来看看Table：完整的table结构原型
还是table的文章，讲的是关于table的非常基础的东西。其实是在写了《回头来看看Table：TD也玩overflow:hidden》之后从硬盘里翻出来一段代码后修改整理的，也不知道是什么时候的作业了，估计是在某年某月某日那个月黑风高的晚上：）
其实这只是一段把能往table里嵌套的东东都嵌套进去了的代码（差点说漏嘴，说把不能往里嵌套的东东也嵌套进去了）。
table估计搞web的人都用过，就算现在不复以前那么风光了，但还是应该要知道和认识的一个东西。
在table里，tr, td, th等几个家伙估计是可以信手拈来的。但还有一些诸如colgroup, col, caption, tfoot之类的可能就不是那么眼熟了。
以下这段代码就是在刚从硬盘里找出来的那段代码上修改而来的，估计已经把可以在表格结构中出现的标签都加上去了：
【演示地址：http://www.doyoe.com/model/xhtml/markup/table.htm】
<!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" c />
<meta http-equiv="Content-Language" c />
<title>一个基本完整的table原型结构</title>
<meta name="Author" cmailto:edzmaster@gmail.com">edzmaster@gmail.com" />
<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>摩托罗拉 MOTO</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 © 2006 Doyoe（飘零雾雨）</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>摩托罗拉 V3</td>
<td>550-1400元</td>
<td>2004年</td>
</tr>
<tr>
<td>摩托罗拉 V3i</td>
<td>900-1980元</td>
<td>2006年</td>
</tr>
<tr>
<td>摩托罗拉 V3ie</td>
<td>950-1980元</td>
<td>2006年</td>
</tr>
</tbody>
</table>
</body>
</html>
以上代码运行出来的效果就是一个极为常见的表格，但这个结构你是否熟悉呢？某些从属于table的标签你是否认识或使用过呢？
比如说：标签属性summary是用来获取对象的的描述和/或结构的；标签colgroup是用来指定表格中列或列组的（非IE核心的浏览器并不买账）。又比如说tfoot是怎样跑到tbody前面去了的。
http://blog.doyoe.com/article.asp?id=162
|