1. 表格单元格合并

属性	值	描述
border-collapse	separate collapse	单元格边框独立（默认） 单元格边框合并

我写的:"使边框间距为0" 布局：

<table class="tab">
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>
<tr>
	<td>赵四</td>
	<td>58</td>
	<td>男</td>
</tr>
</table>

样式：

.tab, .tab td, .tab th{
	border: 1px solid red;
	border-collapse: collapse;
}

2. 表格单元格间距

属性	值	描述
border-spacing	0px	单元格之间的间距

布局：

<table class="tab">
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>
<tr>
	<td>赵四</td>
	<td>58</td>
	<td>男</td>
</tr>
</table>

样式：

.tab, .tab td, .tab th{
	border: 1px solid red;
	border-spacing: 20px;
}

3. 表格标题位置

属性	值	描述
caption-side	top bottom	标题在上方（默认） 标题在下方

布局：

<table class="tab">
<caption>象牙山村民表</caption>
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>
<tr>
	<td>赵四</td>
	<td>58</td>
	<td>男</td>
</tr>
</table>

样式：

.tab, .tab td, .tab th{
	border: 1px solid red;
	caption-side: bottom;
}

4. 表格空单元格显示

属性	值	描述
empty-cells	show hide	空单元格显示边框（默认） 空单元格不显示边框

布局：

<table class="tab">
<caption>象牙山村民表</caption>
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>
<tr>
	<td>赵四</td>
	<td>58</td>
	<td>男</td>
</tr>
</table>

样式：

.tab, .tab td, .tab th{
	border: 1px solid red;
	empty-cells: hide;
}

5. 表格单元格自适应

属性	值	描述
table-layout	auto fixed	内容过长拉伸单元格（默认） 自适应，改变其他的单元格

布局：

<table class="tab">
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>
<tr>
	<td>赵四赵四赵四赵四赵四赵四赵四赵四</td>
	<td>58</td>
	<td>男</td>
</tr>
</table>

样式：

.tab, .tab td, .tab th{
	width: 100px;
	border: 1px solid red;
	table-layout: fixed;
}

6. 完美表格设计

布局：

<table class="tab">
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>
<tr>
	<td>赵四</td>
	<td>58</td>
	<td>男</td>
</tr>
<tr>
	<td>刘能</td>
	<td>57</td>
	<td>男</td>
</tr>
<tr>
	<td>大脚</td>
	<td>18</td>
	<td>女</td>
</tr>
</table>

样式：

.tab, .tab td, .tab th{
	/*想让元素自己居中，使用margin: 0 auto;*/
	margin: 0 auto;
	/*想让元素里面的内容居中，使用text-align:center;*/
	text-align: center;
	width: 500px;
	border: 1px solid red;
	border-collapse: collapse;
}