这篇文章和大家分享两个设置table边框的方法，一种常用的，一种更灵活的。

方法一：

在table的标签上使用border属性就可以：

<table border="1"></table>

效果是每个单元格cell都有一个边框，可以通过cellspacing将边框合并

<table border="1" cellspacing="0"></table>

这些样式是全局性，不灵活，而且还被弃用了，不推荐使用

这是链接，详情可以进去看看：表格元素 - MDN

方法二

这个方法就是老老实实地使用css样式来设置表格的边框，这也是MDN网站推荐的方式

table {
  width: 50vw;
  margin: 50px;
	//border
  border-top: 1px solid gray;
  border-left: 1px solid gray;

  th,
  td {
    text-align: center;
    //border
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
  }
}

思路是先给table的最外面，top和left的位置加上border，然后每个cell各自加上right和bottom位置的border

用了sass语法, css语法效果也是一样的

---

这是没有加边框的效果图：这是加了之后的效果图：可以看到table的右边和下面的线不是连在一起的，这是有cellspacing的表现，我们将该border-collapse值设为collapse就可以

table{
    border-collapse: collapse;
}

最终效果图:

是不是整齐多了😄

通过设置单独的td边框样式，可以对整个table样式把控更加精准，基于此还可以实现单双行不同边框，不同背景颜色等系列个性化需求

总结

这篇文章分享了两个设置table边框的方法，第一种更为死板且已经被弃用，第二种用纯css样式来控制，会更灵活。这样的变化也是编程设计的一种思想：单一原则，组件归组件，样式归样式