去年5月30日写了一篇读后感在经典论坛《[笔记]css2对表格增加的一些东东》
现在就把它移植过来啦。

—————————————————————————

在N年前，提起表格，多数人想到的应该是布局，包括我自己，以前用dreamwear，表格是一个套一个，一个接一个的用。
不过接触了网页标准之后，发现表格更合理的用处应该是“显示数据”，为什么呢？
我们先来看看传统表格格式。
传统的表格常用的就只有 table， tr， td，分别为 对象，行，单元格

  1. <table>
  2.     <tr>
  3.        <td><td>
  4.        <td><td>
  5.     </tr>
  6. </table>


以上是一个一行二列的表格。(如果不明白每个标签的含义，可以点这里)
如果我对于一个表格的内容分别进行标注的话，估计就要运用大量的class来标注。而且修改起来也比较累。

而现在的表格在标签上，做了合理的修改，区别了，内容和名称，表头与表尾

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

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

  1. <table>
  2. <caption>浏览器兼容性一览表</caption><!--表名-->
  3. <thead><!--表头,注意里面有th-->
  4.   <tr>
  5.     <th>CSS 特征</th>
  6.     <th>MSIE 6.0</th>
  7.     <th>FireFox 1.0</th>
  8.     <th>FireFox 1.5</th>
  9.     <th>Opera 8.5</th>
  10.   </tr>
  11. </thead>
  12. <tbody><!--内容，里面有th和td之分-->
  13.   <tr>
  14.     <th colspan="5" class="title">HTML 4.01</th>
  15.   </tr>
  16.   <tr>
  17.     <th>a</th>
  18.     <td>81%</td>
  19.     <td>85%</td>
  20.     <td>85%</td>
  21.     <td>94%</td>
  22.   </tr>
  23. </tbody>
  24. <tfoot><!--表尾-->
  25.   <tr>
  26.     <td colspan="5">http://www.tan5.cn</td>
  27.   </tr>
  28. </tfoot>
  29. </table>

点击查看配合CSS制作的效果。



无觅相关文章插件，快速提升流量