标

• 表格边框合并
• 表格边框的间距设置
• 表格标题位置的设置

表格可以说是网页必备的元素之一，但是原生的表格样式都是很丑，列如表格加入边框的默认情况下，单元格与单元格之间有一定的空隙；设置单元格边框间距等等，都是可以通过css来设置自己的默认样式

表格边框合并

默认情况下，表格有边框的情况下，内部看似有一层填充物，其实是表格的外边框和内部单元格的间距。

这层间距是可以通过表格的标签属性进行设置，让它看起来像是合并了一样，但是这样的合并并不完美，会得到一个很粗的边框。

理想中的边框合并，应该达到exelce表格那样，是一个细线表格。Css专门有个属性是为了表格边框合并服务的。

语法：border-collapse：属性值

会发现，通过css控制合并和通过标签属性合并的效果都不一样，通过css控制的效果跟exelce表格一模一样，属于细线表格。

表格边框间距

如果想自己设置表格边框的间距，一样是可以通过css来控制。

语法：border-spacing:像素值;

这个属性可以设置两个值。指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。

单元格之间的距离也是一样的。

表格标题位置

表格的标题不一定都是设置在表格的上方，也有可能是设置在下方。

可以使用css来定义表格标题的位置

语法：caption-side:属性值;

这样就可以得到一个倒置标题的表格

总结

<table>
			
</table>

<table>
	<tr></tr>		
</table>

<table>
	<tr>
		<th>我是表头</th>
	</tr>
	<tr>
		<td>我是单元格</td>
	</tr>
</table>

5行CSS样式码，让你的表格更加漂亮，先放最终效果：

HTML表格代码如下：

<table class="style-table">
        <thead>
            <tr>
                <th>序号</th>
                <th>物品名称</th>
                <th>金额</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>洗衣粉</td>
                <td>15.00</td>
                <td>自己用</td>
            </tr>
            <tr class="active-row">
                <td>2</td>
                <td>洁尔阴</td>
                <td>25.00</td>
                <td>老婆用</td>
            </tr>
            <tr >
                <td>3</td>
                <td>搓衣板</td>
                <td>5.00</td>
                <td>自己用</td>
            </tr>
        </tbody>
    </table>

CSS代码如下：