`

(转)重新认识表格

    博客分类:
  • html
阅读更多

表格一直是网页设计制作过程中一个重要的组成部分,在没学习CSS布局前,大多是用来布局的,但到目前位置发现居然还没真正地了解和完全掌握表格,不得不需要重新认识表格......

在现代网页设计制作中,表格主要的用途应该是用来存放多元二维数据。和表格相关的标签有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption,如何合理地应用这些标签呢?先从名词解释开始。

名词解释
table
显示二维数据

tr
表格中的一行

td
数据单元格

th
表头单元格,定义一行或者一列的表头信息,不能使用在布局表格里。

tbody
表格中的某一行或者多行编成组,要结合thead、tfoot一起使用

thead
将表格中的某一行或者多行编成组,要结合tbody、tfoot一起使用

tfoot
将表格中的某一行或者多行编成组,要结合tbody、thead一起使用

col
列,给某一列或者几列应用特定的属性,结合colgroup一起使用

colgroup
列的组合,结合col一起使用

caption
定义表格的标题,在表格开始的地方使用,仅一次

summary
说明表格的用途

例子:

代码

 

  1. <table summary="这是一个具有亲和力的表格的演示" id="demotab">    
  2. <caption>    
  3. 访问 forest53 浏览器统计    
  4. caption>    
  5. <thead>    
  6. <tr>    
  7. <th>浏览器 / 月 th>    
  8. <th>2005 / 11 th>    
  9. <th>2006 / 04 th>    
  10. <th>2006 / 05 th>    
  11. tr>    
  12. thead>    
  13. <tfoot>    
  14. <tr>    
  15. <th>总计th>    
  16. <td>1,646 ( 98.45% )td>    
  17. <td>6,978 ( 99.48% ) td>    
  18. <td>5,366 ( 99.56% ) td>    
  19. tr>    
  20. tfoot>    
  21. <tbody>    
  22. <tr>    
  23. <th>Internet Explorerth>    
  24. <td>1,535 (91.81%)td>    
  25. <td>5,905 (86.41%)td>    
  26. <td>4,550 (84.42%)td>    
  27. tr>    
  28. <tr>    
  29. <th>Firefoxth>    
  30. <td>98 (5.86%)td>    
  31. <td>746 (10.92%)td>    
  32. <td>640 (11.87%)td>    
  33. tr>    
  34. <tr>    
  35. <th>Operath>    
  36. <td>13 (0.78%)td>    
  37. <td>147 (2.15%)td>    
  38. <td>176 (3.27%)td>    
  39. tr>    
  40. tbody>    
  41. table>   

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics