Html：正确给table表格加边框

表格代码

<table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Tom</td>
          <td>23</td>
        </tr>

        <tr>
          <td>2</td>
          <td>Jack</td>
          <td>24</td>
        </tr>

        <tr>
          <td>3</td>
          <td>Steve</td>
          <td>25</td>
        </tr>
      </tbody>
    </table>

默认显示

方式一：属性方式

给表格加边框

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

效果

方式二：css方式（推荐）

table, td, th { 
   
  text-align: center;
  border: 1px solid #000;
  border-collapse: collapse;
}

table td { 
   
  padding: 10px 30px;
}

加上边框之后

一个常用的表格样式

/* 表格边框 */
table { 
   
  border-collapse: collapse;
}

table td, table th { 
   
  border: 1px black solid;
  padding: 10px 30px;
}

table th { 
   
  background-color: lightgray;
}

边框效果

在线示例：https://mouday.github.io/front-end-demo/table-border.html

参考

1. Html-浅谈如何正确给table加边框
2. css中的border-collapse属性如何设置表格边框线？（代码示例）