HTML 表格内边距与间距

HTML 表格可以调整单元格内部的内边距,以及单元格之间的间距。

带内边距
hello hello hello
hello hello hello
hello hello hello
带间距
hello hello hello
hello hello hello
hello hello hello

HTML 表格 - 单元格内边距

单元格内边距是单元格边缘与单元格内容之间的空间。

默认情况下,内边距设置为 0。

要为表格单元格添加内边距,请使用 CSS padding 属性:

实例

th, td {
  padding: 15px;
}

亲自试一试

要仅在内容上方添加内边距,请使用 padding-top 属性。

使用 padding-bottompadding-leftpadding-right 属性为其他侧边添加内边距:

实例

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

亲自试一试

HTML 表格 - 单元格间距

单元格间距是每个单元格之间的空间。

默认情况下,间距设置为 2 像素。

要更改表格单元格之间的间距,请在 table 元素上使用 CSS border-spacing 属性:

实例

table {
  border-spacing: 30px;
}

亲自试一试