在日常网页设计中，表格是一个很常见的元素，例如产品比较、数据展示、排名等等。但是，如何用简便的方式实现表格规整排列呢？这里介绍一个CSS属性——border-collapse，它可以让我们避免用繁琐的代码制作表格边框，实现简单的表格排列。

一、border-collapse 是什么？

border-collapse是CSS中的一个属性，它决定在表格元素中使用哪种边框模型。当border-collapse的值为“collapse”时，表格边框以一种类似于单元格的形式呈现，相邻的单元格共用一条边框。而当值为“separate”时，表格边框沿着单元格的外部分界呈现，并且相邻的单元格有各自独立的边框。

二、如何使用 border-collapse？

1.在table中使用

在table元素上使用border-collapse属性，可以将单元格边框合并为一条边框，除非在CSS中单元格(td)和表头单元格(th)上分别设置了自己的边框。

```CSS

table {

border-collapse: collapse; /* 可以将边框合并为一条 */

}

td, th {

border: 1px solid gray; /* 添加需要的单元格边框 */

```

2.在td, th元素上使用

使用border-collapse属性在各自的td和th元素上，可以让它们的边框合并为一条，需要将值设为“inherit”。

```CSS

table {

border-collapse: separate; /* 单元格边框不合并 */

}

td, th {

border-collapse: inherit; /* 表格的border-collapse值继承于table */

border: 1px solid gray; /* 添加需要的单元格边框 */

}

```

三、border-collapse的优点

1.改善表格样式

border-collapse属性能够去除相邻单元格的边框，让整个表格看起来更整洁和有序。我们可以看到下面的两个表格，右边的表格使用了border-collapse属性，让表格更好看。

2.减少代码书写量

使用border-collapse，我们可以将相邻单元格的边框合并为一条，从而省略了许多代码的书写，减少了代码复杂度，还可以有效减少它们所占用的空间。

下面是对比两个表格的代码：

```HTML

```

三、使用注意事项

1. border-collapse属性只适用于表格元素，而不适用于其它元素。

2. 如果表格单元格(td)和表头单元格(th)分别设置了自已的边框，则不能使用border-collapse。

3. 使用border-collapse时，同时为每个单元格添加一个边框其实是很容易的。使用“border”属性定义边框，或者通过单独“border-top”、“border-right”、“border-bottom”和“border-left”属性将边框添加到表格中的每个单元格。

四、总结

border-collapse是一个很有用的CSS属性，它可以让我们轻松地实现表格的规整排列，大大减少了CSS代码的书写量。总之，border-collapse属性是快速创建规则平整表格的有效工具。如果你还没有使用过这个属性，那就赶紧上手试试吧！