1、基本结构
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
</tr>
</tfoot>
</table>
2、特点
- 表头显示方式
display: table效果: 垂直水平居中 - 单元格显示方式
dispaly: table-cell效果 : 垂直居中
3. 常用属性
table
-- border: <integer>：表格外框及单元格外框
-- cellpadding: <integer>：单元格的内边距
-- cellspacing: <integer>：单元格之间的间距，最小为0
-- rules：rows、cols、groups、all：边框规则
td
-- rowspan: <integer>：行合并(该单元格占多行)
-- colspan: <integer>：列合并(该单元格占多列)
-- width: : <integer>%：列宽占比 : 每列宽度加起来不用等于100% , 按比例分配的
caption
-- align: left | right | top | bottom：标题方位
3、垂直水平居中
在特点中看出display: table-cell;可以实现垂直居中
.sup {
width: 200px;
height: 200px;
/*父集通过显示方式控制子集垂直居中,需以下两步合用*/
display: table-cell;
vertical-align: middle;/*设置垂直排列方式*/
}
.sub {
width: 100px;
height: 100px;
margin: 0 auto;/*子集自己实现水平居中*/
}
