标准化你的表格

2007-11-23 21:44:34

“div+css”极度盛行的今天,很多人已经忘了在HTML里还有table呃~,也有很多人记得只是不愿再想起。单纯为了div而完全抛弃table的做法绝对是不可取的。table没什么错,初衷就是用来显示数据的,错在很多人在那个年代把它用在了布局上,而且用滥了。

在table广泛用于布局的时代,或许很多人眼中table就是,其实不然,即使早在HTML4之前,至少就有了, 标签,HTML4开始引入<thead>,<tbody>,<tfoot>,<col>,<colgroup>标签。微软更是为table完美的数据表现添加了大量的扩展属性。当然了,如果表格单纯用于页面布局,这些标签或者属性基本是一无是处。但是当table回归它本来地位时,这一切变得重要。

<caption>:用于指定可选的表格外加标题,内容通常显示在表格上方或者下方以表明表格的内容,默认居中显示。

<th>:设置表格的标题,浏览器以不同的样式显示标题,一般将标题居中,并以黑体显示。

<thead>:其内容组成表格的标题,它可以包含<tr>,<th>
、 和<td> 。除了便于组织和应用样式外,为这些内容分组的优点在于这样可能在多个页面中重复某些元素,主要体现在打印表格中。

<tfoot>:与<thead>标签类似,其用于在表格中创建一个页脚,亦可在多页上出现。

<tbody>:指定表格正文,并可以出现多次(<thead> 、<tfoot>只可在表格中出现一次)。 熟悉各标签相应功能后,那么构建一个合理的用于呈现数据的表格,就变得很简单了。各尽其用,最大限度地表示出数据间的关系,这才是table真正用途之所在。那么我们可以构建如下完美数据表格。

  1. <table border="1" cellspacing="2" align="center" bordercolor="#cccccc">
  2. <caption>wondger's blog</caption>
  3. <thead>
  4. <tr>
  5. <th>Category ID</th>
  6. <th>Category Name</th>
  7. <th>Description</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>简单生活</td>
  14. <td>我的简单生活</td>
  15. </tr>
  16. <tr>
  17. <td>2</td>
  18. <td>web相关</td>
  19. <td>web应用,业界新闻</td>
  20. </tr>
  21. <tr>
  22. <td>3</td>
  23. <td>设计制作</td>
  24. <td>web标准,web设计</td>
  25. </tr>
  26. </tbody>
  27. </table>

查看代码效果

合理的数据表格呈现,远不止构建一个合理的代码结构,更要在数据的视觉表现上做一定的设计。比如标题与正文内容的区分,数据的显示方式,对齐原则等,设计者大可自由发挥。

BTW:啥是标准啊?我相信很多人回答不上来。尽管很多人都自称是css高手,div+css高手,在一个web标准的群里问,没人吭声,都是潜水王,都忘了这个世界除了70%的水,还有30%的空气。我也不知道啥是标准,绝大多数用户也不知道。但是我知道大谈标准化的今天,标准化并不是都是为了用户而标准化,相反更多地是在为计算机标准化。计算机笨,只认识代码,管他什么结构,表现,seo,大部分是为计算机做的。国外用人工搜索引擎工作时,不会去查看源代码。个人对标准化在HTML这部分的理解是,用最合理的标签和结构去呈现最适合的内容,纯属个人观点!意见相左者就当我在YY~···