跳到主要内容

表格边框

HTML 表格可以设置不同样式和形状的边框。

添加边框​

要给表格添加边框，需要使用CSS样式属性设置：

<html>
    <head>
        <style>
            table,td, th {
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>物理</th>
                <th>化学</th>
            </tr>
            <tr>
                <td>郝来吴</td>
                <td>90</td>
                <td>100</td>
                <td>98</td>
                <td>100</td>
            </tr>
            <tr>
                <td>刘美溪</td>
                <td>94</td>
                <td>98</td>
                <td>100</td>
                <td>89</td>
            </tr>
        </table>
    </body>
</html>
about:blank

去掉表格双边框​

<html>
    <head>
        <style>
            table,td, th {
                border:1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>物理</th>
                <th>化学</th>
            </tr>
            <tr>
                <td>郝来吴</td>
                <td>90</td>
                <td>100</td>
                <td>98</td>
                <td>100</td>
            </tr>
            <tr>
                <td>刘美溪</td>
                <td>94</td>
                <td>98</td>
                <td>100</td>
                <td>89</td>
            </tr>
        </table>
    </body>
</html>
about:blank

边框样式​

<html>
    <head>
        <style>
            table,td, th {
                /** 设置表格边框样式（大小、样式、颜色） */
                border:1px dotted black;
                /** 设置边框圆角，当设置了 border-collapse: collapse 此设置无效 */
                border-radius: 10px; 
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>物理</th>
                <th>化学</th>
            </tr>
            <tr>
                <td>郝来吴</td>
                <td>90</td>
                <td>100</td>
                <td>98</td>
                <td>100</td>
            </tr>
            <tr>
                <td>刘美溪</td>
                <td>94</td>
                <td>98</td>
                <td>100</td>
                <td>89</td>
            </tr>
        </table>
    </body>
</html>
about:blank
红色边框
border: 1px solid red;

绿色边框

绿色边框
border: 1px solid green;

上例中的CSS border 属性是设置边框的样式。这个属性是CSS简写属性。

简写属性
border: 1px solid black;

上面的写法等于下面的写法

完整属性
border-size: 1px;
border-style: solid;
border-color: black;
  • border-size属性设置边框的宽度，0为没有边框。
  • border-style 属性设置边框的样子（类型）。它可以设置以下这些值：
    • dotted dotted 点
    • dashed dashed 线段
    • solid solid 实线
    • double double 双实线
    • groove groove 雕刻效果，与ridge相反
    • ridge ridge 浮雕效果，与groove相反
    • inset inset 凹陷
    • outset outset 突出
    • none none 不显示
    • hidden hidden 不显示
  • border-color属性设置边框的颜色。

圆角边框​

要设置圆角边框，使用CSS border-radius 属性设置，值可以是任意值，但必须是合法的CSS单位（如：10px、5px、10%、1rem等等）。

同时，表格必须是双边框才有效果，即border-collapseCSS属性不能设置为collapse值。

table,td, th {
   border:1px dotted black;
   /** 设置圆角边框，后面的值为任意数值 */
   border-radius: 10px;
}

去掉表格外边框​

不设置table的border即可。

table,td, th {
   border:1px dotted black;
}

改为：

td, th {
    border:1px dotted black;
}

HTML 参考​

名称描述

CSS 参考​

名称描述