[笔记]css2对表格增加的一些东东

lm8520 · 发表于 2007-5-30 22:28:22

引用自： http://www.lming.cn

看了《CSS网站布局实录》，发现在CSS2中间，表格的控制力又增加了许多，好像这个技术出来很久了，不过我是这几天刚刚看见。。呵呵。发现这个东西真的很好，可以方便对表格进行数据上的区别和处理，可以做出来所谓增加UE的表格。。哈哈我现在发一些我自己学习之后的总结吧。小弟文笔比较笨拙，请大家见谅。

先来说说这个属性吧,传统的表格常用的就只有 table， tr， td，分别为对象，行，单元格

<table>
<tr>
<td><td>
<td><td>
</tr>
<tr>
<td><td>
<td><td>
</tr>
</table>

复制代码

而现在支持全新xhtml的表格除了刚才提到的3个标签，多了以下这些标签

caption：用于定义表格的名称
thead：用于定义表头
tbody：用于定义表格的内容，可以多个组合
tfoot：用于定义表尾
th：定义表头用的单元格

以下是使用新的标签制作的表格，未加CSS，大家可以看一下里面和传统表格区别。

<table id="browser">
<caption>浏览器兼容性一览表</caption>
<thead>
  <tr>
    <th>CSS 特征</th>
    <th>MSIE 6.0</th>
    <th>FireFox 1.0</th>
    <th>FireFox 1.5</th>
    <th>Opera 8.5</th>
  </tr>
</thead>
<tbody id="html">
  <tr>
    <th colspan="5" class="title">HTML 4.01</th>
  </tr>
  <tr>
    <th>a</th>
    <td>81%</td>
    <td>85%</td>
    <td>85%</td>
    <td>94%</td>
  </tr>
  <tr>
    <th>abbr</th>
    <td>N</td>
    <td>97%</td>
    <td>85%</td>
    <td>94%</td>
  </tr>
  <tr>
    <th>acronym</th>
    <td>94%</td>
    <td>97%</td>
    <td>97%</td>
    <td>75%</td>
  </tr>
</tbody>
<tbody id="xhtml">
  <tr>
    <th colspan="5" class="title"> XHTML 1.0 changes </th>
  </tr>
  <tr>
    <th>HTML in XML</th>
    <td>N</td>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
  </tr>
  <tr>
    <th>well-formed</th>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
  </tr>
  <tr>
    <th>Media Types </th>
    <td>N</td>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td colspan="5">[url]http://www.lming.cn[/url]</td>
  </tr>
</tfoot>
</table>

提示：您可以先修改部分代码再运行

这个为加过边框的表格，里面有一个border-collapse属性，是为了让重叠的边框变成叠在一起

提示：您可以先修改部分代码再运行

以下是加过CSS的表格，可以发现对于表格的所写的CSS已经可以很有头绪的写出，基本上是成逻辑关系一一对应，传统的表格则不然，是以平行的关系来一一对应单元格

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 lm8520 于 2007-5-30 22:36 编辑 ]

Spicegirl · 发表于 2007-5-31 08:06:22

非常感谢你，其实有了心得与大家分享一下是件很好的事，交流也是一种提高的过程，尤其是帮助了尚未理解的朋友，呵呵。

lm8520 · 发表于 2007-5-31 09:18:43

哈哈，我也只是刚知道了新的用法。。一下子才意识到的，觉得大家一直用div 忽视 table

其实table在显示数据上面还是有很大的作用的呢~~

对了，我想问一下，这个符不符合标准？

Singerlsf · 发表于 2007-5-31 09:43:52

有用的东西．．．我之前还没用过在css下用table tr td 标签！受用了！

webdesigning · 发表于 2007-5-31 10:26:20

这个符合标准！

lm8520 · 发表于 2007-5-31 13:41:09

原帖由 [i]webdesigning 于 2007-5-31 10:26 发表
这个符合标准！

好的，那这下div+css 布局就不再只是div+css了。。呵呵

静止 · 发表于 2007-6-4 09:33:36

很有逻辑的，受用了

希望有更好更多的好东东跟大家分享～～

Askyboy · 发表于 2007-6-9 15:30:06

原帖由 [i]webdesigning 于 2007-5-31 10:26 发表
这个符合标准！

这真是不错,自已也按这个做了一个表格,css控制起来那不是一般的方便啊,呵呵,可测了一下,tfoot不符合啊,好像是不允许的标签吧?楼主帮忙解决一下,本人英语不zd.错误看懂啊

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#browser{
	width:700px;
	border-collapse:collapse;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0px auto;
}
#browser th,td{
	border:1px solid #aaa;
}
#browser thead th{
	border-bottom:2px solid #3D580B;
	background-color:#8FC629;
	color:#fff;
	padding:5px 0px;
}
#browser th{
	background-color:#F2F4B9;
}
#browser th.title{
	background-color:#E3E685;
}
#browser tfoot td{
	border-width:0px;
	text-align:right;
	font-size:12px;
	color:#777;
}
#browser caption{
	border-weight:bold;
	padding:6px 0px;
	color:#3D580B;
	font-size:25px;
}
#xhtml th.title{
	background-color:#ffd56c;
}
#xhtml th{
	background-color:#ffe8ae;
}
</style>
</head>

<body>
<table id="browser">
<caption>浏览器兼容性一览表</caption>
<thead>
  <tr>
    <th>CSS 特征</th>
    <th>MSIE 6.0</th>
    <th>FireFox 1.0</th>
    <th>FireFox 1.5</th>
    <th>Opera 8.5</th>
  </tr>
</thead>
<tbody id="html">
  <tr>
    <th colspan="5" class="title">HTML 4.01</th>
  </tr>
  <tr>
    <th>a</th>
    <td>81%</td>
    <td>85%</td>
    <td>85%</td>
    <td>94%</td>
  </tr>
  <tr>
    <th>abbr</th>
    <td>N</td>
    <td>97%</td>
    <td>85%</td>
    <td>94%</td>
  </tr>
  <tr>
    <th>acronym</th>
    <td>94%</td>
    <td>97%</td>
    <td>97%</td>
    <td>75%</td>
  </tr>
</tbody>
<tbody id="xhtml">
  <tr>
    <th colspan="5" class="title"> XHTML 1.0 changes </th>
  </tr>
  <tr>
    <th>HTML in XML</th>
    <td>N</td>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
  </tr>
  <tr>
    <th>well-formed</th>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
  </tr>
  <tr>
    <th>Media Types </th>
    <td>N</td>
    <td>Y</td>
    <td>Y</td>
    <td>Y</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td colspan="5">[url]http://www.lming.cn[/url]</td>
  </tr>
</tfoot>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

帐号		自动登录	找回密码
密码			注册

[其他] [笔记]css2对表格增加的一些东东

评分

好东东怎能不顶？