HTML中的表格的基本结构与常用属性

1、表格的基本结构

　　首先看看图下<table>标签的布局

 1 <table border="1px">
 2         <!-- 表格标题 -->
 3         <caption>学生信息</caption>
 4         <!-- 表格头部 -->
 5         <thead>
 6             <tr>
 7                 <th>姓名</th>
 8                 <th>年龄</th>
 9                 <th>性别</th>
10             </tr>
11         </thead>
12         <!-- 表格主体 -->
13         <tbody>
14             <tr>
15                 <td>李白</td>
16                 <td>25</td>
17                 <td>男</td>
18             </tr>
19             <tr>
20                 <td>李清照</td>
21                 <td>18</td>
22                 <td>女</td>
23             </tr>
24         </tbody>
25         <!-- 表格脚注 -->
26         <tfoot>
27             <tr>
28                 <td></td>
29                 <td></td>
30                 <td>共计：2人</td>
31             </tr>
32         </tfoot>
33     </table>

 2、表格的常用属性

　　- table的属性

　　　　border -- 最外面边框的宽度

　　　　width -- 整个表格的宽度

　　　　height -- 整个表格的高度，但 thead 与 tfoot 部分的高度不会变

　　　　cellspacing -- 单元格与单元格之间的距离

 　　- thead 的属性

　　　　height -- 表格头部的高度

　　　　align:left | center | right -- 单元格中文字水平方向对齐方式（默认是center）

　　　　valign:top | middle | bottom --  单元格中文字垂直方向对齐方式

　　- tbody 的属性

　　　　height -- 表格头部的高度（该高度值与其它几部分高度值相加必须大于table的高度值才会生效）

　　　　align:left | center | right -- 单元格中文字水平方向对齐方式（默认为left）

　　　　valign:top | middle | bottom --  单元格中文字垂直方向对齐方　

　　- tfood 的属性

　　　　height -- 表格脚注的高度

　　　　align:left | center | right -- 单元格中文字水平方向对齐方式

　　　　valign:top | middle | bottom --  单元格中文字垂直方向对

注：对 <th>所在单元格的宽高进行设置，会影响所在行和列的宽高