CSS3 表格

边距间距

border-spacing

<table border="1" style="width:100px; height:100px; border-spacing: 5px;">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

效果

边距合并

border-spacing

<table border="1" style="width:100px; height:100px; border-collapse: collapse;">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

效果

垂直高度

vertical-align

<table border="1" style="width: 100px; height: 100px; border-collapse: collapse; text-align: center; vertical-align: middle;">
<tr><td>简</td><td>明</td></tr>
<tr><td>教</td><td>程</td></tr>
</table>

<!-- 文本的水平位置使用 “text-align” 而垂直位置使用 “line-height” 行高 -->
<!-- 由于表格是固定行高不支持 “line-height” ，所以增加了一个专属的垂直属性 “vertical-align” top / middle / bottom -->

效果

比例分布

table-layout

<table border="1" style="width: 200px;  border-collapse: collapse; table-layout: auto;">
<tr><td> Hello </td><td> ~ </td></tr>
</table>
<br>
<table border="1" style="width: 200px;  border-collapse: collapse; table-layout: fixed;">
<tr><td> Hello </td><td> ~ </td></tr>
</table>

<!-- 表格默认下会根据内容的大小动态分配空间 -->
<!-- table-layout: fixed; 等比例大小 -->

效果