如何在 HTML 中添加边框

在 HTML 中添加边框是网页设计中的一个基础操作。边框不仅可以美化页面，还可以让页面的结构更加清晰。下面介绍几种在 HTML 中添加边框的方法。

使用 CSS 样式表添加边框

在 CSS 中添加边框最为常见的方法是使用 border 属性。其语法如下：

border: [border-width] [border-style] [border-color];

其中：

• border-width 表示边框的宽度，可以是像素、百分比等单位，默认值为 medium；
• border-style 表示边框的样式，常见值包括 solid（实线）、dotted（点线）、dashed（虚线）等，默认值为 none；
• border-color 表示边框的颜色，可以是颜色名称、十六进制数值等形式，默认值为当前元素的文本颜色。

例如，要为一个 <div> 元素添加红色实线边框，可以这样写：

<style>
    div {
        border: 1px solid red;
    }
</style>
<div>这是一个带边框的 div 元素。</div>

这里 border 属性的值为 1px solid red，表示边框宽度为 1px，样式为实线，颜色为红色。这样就会在 <div> 元素周围添加一个红色实线的边框。

直接在 HTML 标签中添加边框属性

另外一种添加边框的方法是在 HTML 标签中直接添加 border 属性。例如：

<div style="border: 1px solid red;">这是一个带边框的 div 元素。</div>

这里使用了 style 属性来声明 border 属性，其值与上一种方法中 CSS 样式表中的用法相同。注意，这种方法并不推荐，因为它会与 HTML 标签的内容混在一起，不利于维护和修改。

添加表格边框

在 HTML 中添加表格边框是比较常见的需求。可以使用 border 属性来为表格添加边框，也可以使用 table 标签的 border 属性来一次性为所有单元格添加边框。

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>
<table>
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
        <th>表头 3</th>
    </tr>
    <tr>
        <td>数据 1-1</td>
        <td>数据 1-2</td>
        <td>数据 1-3</td>
    </tr>
    <tr>
        <td>数据 2-1</td>
        <td>数据 2-2</td>
        <td>数据 2-3</td>
    </tr>
</table>

这里设置了 table、th、td 三个元素的 border 属性为 1px solid black，表示为它们添加黑色实线边框。同时，也可以使用 table 标签的 border 属性，将表格的所有单元格添加边框：

<table border="1">
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
        <th>表头 3</th>
    </tr>
    <tr>
        <td>数据 1-1</td>
        <td>数据 1-2</td>
        <td>数据 1-3</td>
    </tr>
    <tr>
        <td>数据 2-1</td>
        <td>数据 2-2</td>
        <td>数据 2-3</td>
    </tr>
</table>

这里 border 属性的值为 1，表示为表格的所有单元格添加宽度为 1px 的实线边框。注意，该属性值不能设置为其他的数值或形式。

总结

以上是在 HTML 中添加边框的几种方法，其中，在 CSS 样式表中通过 border 属性为元素添加边框是最常见的方法。向表格中添加边框可以用 border 属性或 table 标签的 border 属性。边框的粗细、样式和颜色可以根据自己的需要进行自定义。