html中关于表格标签的理解和使用
对table表格标签的深入理解
表格目前已经不用来进行页面布局,更多的是用来显示表格数据,其本身就拥有较多的标签,加上css设置表格样式,以及javascript动态创建表格时也比较复杂,所以更应该透彻的理解html表格标签的意义。
(一)表格基本结构标签
<table></table>:定义表格
<th></th>:定义表格的标题栏
<tr></tr>:定义表格的行
<td></td>:定义表格的列
使用这几个标签就可以创建出最基本的表格结构:
如下代码就可以创建出一个三行三列的简单表格
1 <body>
2 <table> <!-- 定义表格 -->
3 <tr> <!-- 第一行 -->
4 <th>姓名</th> <!-- 三列 -->
5 <th>年级</th>
6 <th>学号</th>
7 </tr>
8 <tr>
9 <td>周时</td>
10 <td>一</td>
11 <td>01</td>
12 </tr>
13 </table>
14 </body>
(二)逻辑结构标签
<caption>:定义表格标题
<thead>:定义表格页眉
<tbody>:定义表格主体
<tfoot>:定义表格页脚
<col>:用来给表格中的一列或者多列设置属性
<colgroup></colgroup>:用来表示表格的列组,更方便的一次性给表格设置样式
使用表格的逻辑标签,使表格可读性更强,设置样式时也更加方便,示例代码如下:
1 <body>
2 <table>
3 <caption>表格标题</caption>
4 <colgroup> <!-- 用来存放列组 -->
5 <col span=2> <!-- 控制第一列和第二列 -->
6 <col span=1> <!-- 第三列 -->
7 /*<col>不添加span属性,默认一列,以在colgroup中的顺序为准*/
8 </colgroup>
9 <thead> <!-- 表头 -->
10 <tr>
11 <th>姓名</th>
12 <th>年级</th>
13 <th>学号</th>
14 </tr>
15 </thead>
16 <tbody> <!-- 表格的中间部分 -->
17 <tr>
18 <td>周时</td>
19 <td>一</td>
20 <td>01</td>
21 </tr>
22 </tbody>
23 <tfoot> <!-- 表格的底部 -->
24 <tr>
25 <td>小石</td>
26 <td>三</td>
27 <td>03</td>
28 </tr>
29 </tfoot>
30 </table>
在给标签添加结构化标签后,表格可读性大大增强。关于<col>和clogroup标签需要注意以下两点:
1、<col>:用来为表格中的一列或者多列设置属性,span属性用来控制列数。<col>标签只能在<table>元素或者<colgroup>元素内部使用.
2、<clogroup>标签的唯一作用是用来存放col标签。
更多关于表格设计的样式,请访问http://www.cnblogs.com/zhouyanlife/p/8673593.html