RSS
热门关键字:  CSS教程  CSS布局  CSS样式  CSS hack  CSS JS
当前位置 :| 主页>HTML/XHTML>

重新认识表格

来源:cssplay 作者:cssplay 时间:2008-09-09 点击:

表格一直是网页设计制作过程中一个重要的组成部分,在没学习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
说明表格的用途


例子程序代码:

<table summary="这是一个具有亲和力的表格的演示" id="demotab">
<caption>
访问 <a href="http://www.cssplay.org.cn">www.cssplay.org.cn</a> 浏览器统计
</caption>
<thead>
<tr>
<th>浏览器 / 月 </th>
<th>2005 / 11 </th>
<th>2006 / 04 </th>
<th>2006 / 05 </th>
</tr>
</thead>
<tfoot>
<tr>
<th>总计</th>
<td>1,646 ( 98.45% )</td>
<td>6,978 ( 99.48% ) </td>
<td>5,366 ( 99.56% ) </td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Internet Explorer</th>
<td>1,535 (91.81%)</td>
<td>5,905 (86.41%)</td>
<td>4,550 (84.42%)</td>
</tr>
<tr>
<th>Firefox</th>
<td>98 (5.86%)</td>
<td>746 (10.92%)</td>
<td>640 (11.87%)</td>
</tr>
<tr>
<th>Opera</th>
<td>13 (0.78%)</td>
<td>147 (2.15%)</td>
<td>176 (3.27%)</td>
</tr>
</tbody>
</table>


实例运行代码框如下:


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


Tag:表格   HTML   table   tr   td  
最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
热点实例