表格table详细介绍

 

      <td>January</td>       <td>$100</td>     </tr>     <tr> 
      <td>February</td>       <td>$80</td>     </tr>   </tbody> </table> 
 
效果 
 
其他效果如下所示。 
1、表头、表体、表脚的划分 
代码 
<table width="250" border="1"> <thead> <tr> 
<th height="30">&nbsp;</th> <th>苹果</th><th>桔子</th> </tr> </thead> <tbody> <tr> 
<td height="30">9.10</td> <td>30</td><td>60</td> </tr> <tr> 
<td height="30">9.11</td> <td>8</td><td>12</td> </tr> <tr> 
<td height="30">9.12</td> <td>14</td><td>9</td> </tr> </tbody> <tfoot> <tr> 
<th height="30">总计</th> <th>52</th><th>81</th> 

 

</tr> </tfoot> </table> 

效果 
  苹果 桔子 9.10 
30 60 9.11 8 12 9.12 14 9 总计 
52 
81 
代码 
<table width="250" border="1"> 
<thead style="background-color:#DDDDDD"> <tr> 
<th height="30">&nbsp;</th> <th>苹果</th><th>桔子</th> </tr> </thead> 
<tbody align="center" style="background-color:#E0FFFF"> <tr> 
<td height="30">9.10</td> <td>30</td><td>60</td> </tr> <tr> 
<td height="30">9.11</td> <td>8</td><td>12</td> </tr> <tr> 
<td height="30">9.12</td> <td>14</td><td>9</td> </tr> </tbody> 
<tfoot style="color:green;background-color:#FFEFD5"> <tr> 
<th height="30">总计</th> <th>52</th><th>81</th> </tr> </tfoot> </table> 
效果 
  
苹果 桔子 9.10 
30 
60 

 

 

9.11 8 12 9.12 14 
9 
总计 
52 
81 
说明：用<thead>、<tbody>、<tfoot>标签划分表格后不会有特殊的视觉效果，但可以把每一部份作为一个整体设置统一的格式。 
 
2、只有表头横线的表格 代码 <table width="300" 
border="2" cellpadding="1" 
cellspacing="0" 
bordercolor="#000000" frame="hsides" 
rules="groups"> 
<thead align="center" valign="middle"> <tr> 
<th height="25">姓名</th><th>性别</th><th>年龄</th> </tr> </thead> 
<tbody align="center" valign="middle"> <tr> 
<td height="25">张三</td><td>男</td><td>25</td> </tr> <tr> 
<td height="25">李四</td><td>男</td><td>23</td> </tr> <tr> 
<td height="25">王五</td><td>男</td><td>21</td> </tr> </tbody> </table> 
效果 
姓名 性别 
年龄 
张三 男 25 李四 男 23 王五 
男 
21 
说明：<thead>和<tbody>标签把表格按行分为两组，<table>标签的属性rules="groups"表示只显示组与组间的分界线，属性frame="hsides"表示只显示上下边框。 
 
3、只有表头横线和列线的表格 代码 <table width="300" 
border="2" cellpadding="1" 
cellspacing="0" 
bordercolor="#000000" frame="hsides" 
rules="groups"> 
<colgroup></colgroup> 

 

<colgroup></colgroup> <colgroup></colgroup> 

<thead align="center" valign="middle"> <tr> 
<th height="25">姓名</th><th>性别</th><th>年龄</th> </tr> </thead> 
<tbody align="center" valign="middle"> <tr> 
<td height="25">张三</td><td>男</td><td>25</td> </tr> <tr> 
<td height="25">李四</td><td>男</td><td>23</td> </tr> <tr> 
<td height="25">王五</td><td>男</td><td>21</td> </tr> </tbody> </table> 
效果 
姓名 性别 
年龄 
张三 男 25 李四 男 23 王五 
男 
21 
说明：<thead>和<tbody>标签把表格按行分为两组，三个<colgroup>标签把表格按列分为 三组，<table>标签的属性rules="groups"表示只显示组与组间的分界线，属性frame="hsides"表示只显示上下 边框。 
 
4、有外框线和列线的表格 
代码 
<table width="300" border="2" cellpadding="1" cellspacing="0" bordercolor="#000000" frame="box" rules="groups"> 
<colgroup></colgroup> 
<colgroup span="2"></colgroup> 
<thead align="center" valign="middle"> <tr> 
<th height="25">姓名</th><th>性别</th><th>年龄</th> </tr> </thead> 
<tbody align="center" valign="middle"> <tr> 
<td height="25">张三</td><td>男</td><td>25</td> </tr> 

 

<tr> 

<td height="25">李四</td><td>男</td><td>23</td> 

</tr>

<tr> 

<td height="25">王五</td><td>男</td><td>21</td> 

</tr> 

</tbody>

 </table> 

效果 
姓名 性别 
年龄 
张三 男 25 李四 男 23 王五 
男 
21 
说明：<thead>和<tbody>标签把表格按行分为两组，两个<colgroup>标签把表格按列分为 两组，其中第二组占两列，<table>标签的属性rules="groups"表示只显示组与组间的分界线，属性frame="box"表 示显示外边框。