CSS控制Table内外边框、颜色、大小示例

下面我将详细讲解如何使用CSS控制HTML表格（Table）的内外边框、颜色和大小。

CSS控制表格外边框

表格外边框由表格的边框和表格外边距组成。CSS提供了多个属性，可以控制表格的外边框。以下是常用的属性及其用法：

border属性

border属性用于设置表格的边框样式、宽度、颜色。

table {
  border: 1px solid black;
}

上述代码将设置表格的边框为黑色实线，边框宽度为1像素。

border-collapse属性

border-collapse属性用于设置表格的边框是否合并。默认情况下，相邻单元格的边框会合并成一条边框。如果需要让相邻单元格的边框保持独立，则可以将border-collapse属性设置为separate。

table {
  border-collapse: separate;
  border: 1px solid black;
}

上述代码将表格的每个单元格边框分别显示，并设置边框样式、宽度、颜色。

CSS控制表格内边框

表格内边框是单元格的边框，而不是表格的边框。CSS提供了border属性和其他属性，可以控制表格的内边框。以下是一些常用的属性及其用法：

border-spacing属性

border-spacing属性用于设置相邻单元格之间的间距。

table {
  border-collapse: separate;
  border-spacing: 10px;
}

上述代码将相邻单元格间距设置为10像素。

border-collapse的值为collapse

当border-collapse属性的值为collapse时，设置border-spacing属性无效，单元格的边框会合并成一条边框。

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

上述代码将表格的所有单元格的边框合并成一条边框，边框样式、宽度、颜色同样也可以设置。

控制表格的颜色和大小

表格的颜色和大小也可以使用CSS进行控制。以下是一些常用的属性及其用法：

bgcolor属性

bgcolor属性用于设置表格的背景颜色。

<table bgcolor="#f8f8f8">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

上述代码将表格的背景颜色设置为#f8f8f8。

width和height属性

width和height属性分别用于设置表格的宽度和高度。这两个属性可以使用像素、百分比和其他单位进行设置。

table {
  width: 100%;
  height: 200px;
}

上述代码将表格的宽度设置为100%和高度设置为200像素。

以上就是关于如何使用CSS控制表格内外边框、颜色和大小的完整攻略。希望能对你有所帮助。