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

 

 

  

posted @ 2018-03-30 09:48  今声  阅读(4760)  评论(0编辑  收藏  举报