HTML 中为 table 设置边框的方法

在 HTML 网页设计中，表格（table）是展示数据的常用元素，为表格设置合适的边框能够增强数据的可读性和页面的美观度。下面就为大家详细介绍在 HTML 中为 table 设置边框的方法。

方法一：使用 border 属性

在早期的 HTML 版本中，最直接的方式就是使用 table 标签的 border 属性。例如：<table border="1">，这里的“1”代表边框的宽度为 1 像素，值越大边框越粗。该属性还能作用于 tr（表格行）、td（表格单元格）标签，为每行或每个单元格单独设置边框。不过，这种方法已经逐渐被弃用，因为它将表现层（样式）和结构层（HTML 代码）混在一起，不利于代码的维护和扩展。

方法二：使用 CSS 的 border 属性

CSS（层叠样式表）提供了更强大、灵活且符合现代网页设计理念的方式来设置表格边框。要选中 table 元素，然后通过 border 属性来设置边框样式、宽度和颜色。比如：

table {
    border: 1px solid black;
}

这会为整个表格添加一个 1 像素宽、黑色的实线边框。若想分别设置边框的样式（如实线 solid、虚线 dashed 等）、宽度和颜色，也可以拆分开来写：

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

如果希望表格单元格也有边框，可以对 td 元素同样应用 border 属性：

td {
    border: 1px solid black;
}

但这样会出现相邻单元格边框重叠的问题，影响美观。

解决相邻单元格边框重叠问题

使用 CSS 的 border-collapse 属性可以解决这个问题。将其值设为 collapse，相邻单元格的边框就会合并为一个边框：

table {
    border-collapse: collapse;
}

另外，还可以通过 border-spacing 属性来设置单元格边框之间的间距：

table {
    border-spacing: 5px;
}

掌握这些在 HTML 中为 table 设置边框的方法，能让我们根据实际需求打造出各种风格的表格，提升网页设计的效果和用户体验，为创建专业、美观的网站打下坚实基础。