HTML表格边框

本页内容
上一节: HTML表格 下一节: HTML表格宽度高度


HTML 表格可以有不同样式和形状的边框。 <html> <style> .border table,.border th,.border td {

 border: 1px solid black;

} </style>

<tbody> </tbody>
     
     
     

<html>

如何添加边框

为表格添加边框时,还会在每个表格单元格周围添加边框:

要添加边框,请在、和 元素上使用 CSS border 属性 : table ' th ' td


示例

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

折叠的边框

为避免出现上例中的双边框,请将 CSS border-collapse 属性设置为 collapse .

这将使边框折叠成单个边框:



示例

table, th, td {  border: 1px solid black;   border-collapse: collapse;}

样式表

如果为每个单元格设置背景颜色,并将边框设置为白色(与文档背景相同),您会得到不可见边框的印象:



示例

table, th, td {  border: 1px solid white;   border-collapse: collapse;}th, td {  background-color: #96D4D4; }

圆桌

使用该 border-radius 属性,边框会变成圆角:



示例

table, th, td {  border: 1px solid black;   border-radius: 10px;}

table 通过从 css 选择器中省略来跳过表格周围的边框:



示例

th, td {  border: 1px solid black;   border-radius: 10px;}

虚线图片

使用该 border-style 属性,您可以设置边框的外观。



允许使用以下值:

dotted dashed solid double groove ridge inset outset none hidden

示例

th, td {  border-style: dotted;}

颜色

使用该 border-color 属性,您可以设置边框的颜色。



示例

th, td {  border-color: #96D4D4;}
上一节: HTML表格 下一节: HTML表格宽度高度
此页面最后编辑于2022年8月4日 (星期四) 22:09。