码农教程 - 一技在手,衣食无忧! tools

HTML 表格边框

❮ 上一节 下一节 ❯

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

如何添加边框

要添加边框，请使用 CSSborder属性于table,th， 和td要素：

     
     
     

示例

table, th, td {
  border: 1px solid black;
}
亲自试一试 »

折叠的表格边框

为了避免像上面的示例那样出现双边框，请设置 CSSborder-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练习

通过练习测试一下

练习:

使用正确的 CSS 边框值在表格元素上创建纯黑色 3 像素边框。

table, th, td {
  border: ;
}

开始练习


❮ 上一节 下一节 ❯