[笔记]css2对表格增加的一些东东
看了《CSS网站布局实录》，发现在CSS2中间，表格的控制力又增加了许多，好像这个技术出来很久了，不过我是这几天刚刚看见。。呵呵。发现这个东西真的很好，可以方便对表格进行数据上的区别和处理，可以做出来所谓增加UE的表格。。哈哈 我现在发一些我自己学习之后的总结吧。小弟文笔比较笨拙，请大家见谅。
先来说说这个属性吧,传统的表格常用的就只有 table， tr， td，分别为 对象，行，单元格
caption：用于定义表格的名称
thead：用于定义表头
tbody：用于定义表格的内容，可以多个组合
tfoot：用于定义表尾
th：定义表头用的单元格
以下是使用新的标签制作的表格，未加CSS，大家可以看一下里面和传统表格区别。
先来说说这个属性吧,传统的表格常用的就只有 table， tr， td，分别为 对象，行，单元格
复制内容到剪贴板
而现在支持全新xhtml的表格除了刚才提到的3个标签，多了以下这些标签
代码:
<table>
<tr>
<td><td>
<td><td>
</tr>
<tr>
<td><td>
<td><td>
</tr>
</table>
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属性，是为了让重叠的边框变成叠在一起
提示：您可以先修改部分代码再运行
<style> #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; } </style> <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>
提示：您可以先修改部分代码再运行
以下是加过CSS的表格，可以发现对于表格的所写的CSS已经可以很有头绪的写出，基本上是成逻辑关系一一对应，传统的表格则不然，是以平行的关系来一一对应单元格
提示：您可以先修改部分代码再运行
<style> #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> <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>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
http://bbs.blueidea.com/thread-2751728-1-1.html