表格
# 表格表单
## 、表格
#### 1、基本结构
```html
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
```
#### 2、常用属性
```css
table
-- border: <integer>：表格外框及单元格外框
-- cellpadding: <integer>：单元格的内边距
-- cellspacing: <integer>：单元格之间的间距，最小为0
-- rules：rows、cols、groups、all：边框规则
td
-- rowspan: <integer>：行合并(该单元格占多行)
-- colspan: <integer>：列合并(该单元格占多列)
-- width: : <integer>%：列宽占比
caption
-- align: top | bottom：标题方位
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
table {
width: 600px;
height: 400px;
/*border: 1px solid #333;*/
}
td, th {
/*border: 1px solid #333;*/
}
</style>
</head>
<body>
<!-- table: display: table -->
<!-- th,td: dispaly: table-cell -->
<!-- tr: 代表表格中的行 -->
<!-- td: 代表表格中的单元格 -->
<!-- 表格的特点 -->
<!-- 1.表头垂直水平居中 -->
<!-- 2.单元格垂直居中 -->
<!-- 3.cellspacing控制单元格之间的间距 -->
<!-- 4.table的显示特性:内容不超过规定宽高,采用规定的宽高,当内容显示区域的宽高超过规定宽高,表格的宽高由内容显示区域决定 -->
<!-- 5.rules:边框规则,设置后会合并边框(cellspacing失效): groups rows cols all -->
<!-- 6.cellpadding:cell的padding设置,对内容进行格式化布局 -->
<!-- -->
<!-- 7.cell的width可以规定列宽占比 -->
<!-- 8.colspan:合并列 -->
<!-- 9.rowspan:合并行 -->
<table border="1" cellspacing="0" rules="all" cellpadding="10">
<caption align="bottom">表格标题</caption>
<!-- <thead> -->
<tr>
<th width="1%">表头</th>
<th width="3%">表头</th>
<th width="6%">表头</th>
</tr>
<!-- </thead> -->
<!-- <tbody> -->
<tr>
<td colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td rowspan="2">单元格</td>
</tr>
<!-- </tbody> -->
<!-- <tfoot> -->
<tr>
<td>单元格</td>
<td>单元格</td>
<!-- <td>单元格</td> -->
</tr>
<!-- </tfoot> -->
</table>
</body>
</html>
