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>所在单元格的宽高进行设置，会影响所在行和列的宽高
3、跨行与跨列
rowspan -- 指定要跨的行数
colspan -- 指定要跨的列数
