怎样在 HTML 中定义表格的边框？
天天向上
发布： 2025-01-03 22:58:42
原创
968
人浏览过
在 HTML 中，表格边框（table border）可以通过多种方式定义和控制。表格的边框不仅影响表格的外观，还可以增强表格的可读性和结构感。你可以使用 HTML 标签的属性、内联样式、外部 CSS 或者更复杂的 CSS 规则来定义表格的边框。
1. 使用 border 属性（HTML 标签）
在 HTML 中，最直接的方法是使用 <table> 标签的 border 属性来设置边框。这个方法简单，但是它并不符合现代的 Web 标准（HTML5 中不推荐使用该属性）。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表格边框示例</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>小红</td>
<td>30</td>
</tr>
</table>
</body>
</html>解释：
border="1"：直接在<table>标签上添加border属性，值为1时表示边框的宽度为 1px。
输出：
- 在页面上显示一个表格，每个单元格都有 1px 宽的边框。
2. 使用内联 CSS（style 属性）
内联 CSS 允许你在元素的 style 属性中定义样式，这种方法可以覆盖 HTML 属性的设置。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表格边框示例</title>
</head>
<body>
<table style="border: 2px solid black;">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>小红</td>
<td>30</td>
</tr>
</table>
</body>
</html>解释：
style="border: 2px solid black;"：给<table>元素添加了一个 2px 宽的黑色边框。- 这种方法使用了 CSS 中的
border属性，可以定义边框的宽度、类型和颜色。
输出：
- 显示的表格将拥有 2px 宽的黑色边框。
3. 使用外部 CSS（通过 <style> 或外部 CSS 文件）
使用外部 CSS 进行样式设置是最推荐的做法，因为它遵循分离内容与样式的原则，便于维护和修改。
示例 1：使用内部 <style> 标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表格边框示例</title>
<style>
table {
border: 3px solid red;
border-collapse: collapse; /* 合并单元格的边框 */
}
th, td {
border: 1px solid blue; /* 设置表头和表格数据单元格的边框 */
padding: 8px; /* 设置单元格内边距 */
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>小红</td>
<td>30</td>
</tr>
</table>
</body>
</html>解释：
table：定义了整个表格的边框为 3px 红色实线，border-collapse: collapse;使得单元格之间的边框合并为一个单一的边框。th, td：设置了表头和表格单元格的边框为 1px 蓝色实线，并且添加了 8px 的内边距来增加表格的可读性。
输出：
- 表格的外边框是红色，单元格之间的边框是蓝色的。
示例 2：使用外部 CSS 文件
创建一个外部 CSS 文件 styles.css：
table {
border: 2px dashed green;
border-collapse: collapse;
}
th, td {
border: 1px solid purple;
padding: 5px;
}在 HTML 文件中引入该外部 CSS 文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表格边框示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>小红</td>
<td>30</td>
</tr>
</table>
</body>
</html>解释：
styles.css中的 CSS 定义了表格外边框为 2px 绿色虚线，单元格的边框为 1px 紫色实线，且有 5px 的内边距。- 通过
<link>标签将外部 CSS 文件引入 HTML 页面。
输出：
- 显示的表格外边框是绿色虚线，单元格之间是紫色实线边框。
4. 使用 border-collapse 和 border-spacing
CSS 中还有两个重要属性可以影响表格的边框表现：
border-collapse：控制表格边框是否合并，默认是分离边框。border-spacing：设置单元格之间的间距，只有在border-collapse为separate时才有效。
示例：border-collapse 和 border-spacing
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格边框合并示例</title>
<style>
table {
width: 100%;
border-collapse: separate; /* 使用分离边框 */
border-spacing: 10px; /* 设置单元格之间的间距 */
}
th, td {
border: 2px solid black; /* 为每个单元格添加边框 */
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>小红</td>
<td>30</td>
</tr>
</table>
</body>
</html>解释：
border-collapse: separate;将单元格的边框分开，并通过border-spacing属性为单元格之间添加 10px 的间距。
输出：
- 表格单元格之间有明显的 10px 间距，每个单元格都有 2px 宽的黑色边框。
总结
在 HTML 中，定义表格边框的方法有多种：
- HTML
border属性：直接在<table>元素中定义，简单但过时。 - 内联 CSS：通过
style属性直接定义样式，适用于局部样式设置。 - 外部 CSS：通过
<style>标签或外部 CSS 文件定义，是推荐的做法。 border-collapse和border-spacing：控制边框合并和单元格间距，用于更精细的控制。
使用 CSS 进行表格样式设置更加灵活和现代，可以轻松实现各种边框样式、颜色、宽度等效果。