html怎么设置表格间距-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在html中，可以使用border-spacing属性来设置表格间距，该属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式），语法格式“border-spacing:水平间距垂直间距;”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在html中，可以使用border-spacing属性来设置表格间距。

border-spacing属性用于表格的边框在“分离”的状态下，设置相邻单元格的边框间的距离。

该属性会在表格边框“分离”时，设置行和单元格的边框在横向和纵向上的间距。

注：只有当表格边框各自独立（即border-collapse属性设置separate时）此属性才起作用。

属性值：

值	描述
length length	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数，那么定义的是水平和垂直间距。
如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

示例：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <style>
            table,
            td,
            th {
                border: 1px solid black;
            }
            td,th{
                padding: 5px 20px;
            }
             
            #table2 {
                border-collapse: separate;
                border-spacing: 15px;
            }
             
            #table3 {
                border-collapse: separate;
                border-spacing: 15px 30px;
            }
        </style>
    </head>
 
    <body>
        <h2>border-spacing: 15px:</h2>
        <p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
        <table id="table2">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>20</td>
            </tr>
        </table>
    </body>
 
</html>