如何给表格添加边框
表格默认没有边框。用 CSS 添加：每个单元格上的 border 画出网格，表格上的 border-collapse: collapse 把每对相邻的边框合并成一条线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table border</title>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #6b7280; padding: 6px 12px; }
</style>
</head>
<body>
<table>
<tr><th>Size</th><th>Price</th></tr>
<tr><td>Small</td><td>3.00</td></tr>
<tr><td>Large</td><td>4.50</td></tr>
</table>
</body>
</html>
border 简写属性接收宽度、样式和颜色，顺序不限：1px solid #6b7280。把它设在 th, td 上，而不是只设在 table 上：表格上的边框只会画出外框。
border-collapse：separate 与 collapse
border-collapse 决定单元格之间是否共用边框。
| 值 | 效果 |
|---|
separate（默认） | 每个单元格都有自己的边框，单元格之间的间隙由 border-spacing 设置 |
collapse | 相邻的单元格共用一条边框；border-spacing 被忽略 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>border-collapse</title>
<style>
body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
table { border: 2px solid #2563eb; }
th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
.separate { border-collapse: separate; border-spacing: 6px; }
.collapse { border-collapse: collapse; }
</style>
</head>
<body>
<table class="separate">
<caption>separate</caption>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
<table class="collapse">
<caption>collapse</caption>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</body>
</html>
在 separate 表格中，你能看到两层：蓝色的表格外框，以及每个单元格周围各自独立的琥珀色框，两者之间隔着 border-spacing。把 6px 改成 0，单元格会贴在一起，但线条仍然是双线。只有 collapse 才能把它们合并。
当两条合并的边框相遇且不相同时，较宽的那条胜出。宽度相同时，由样式决定（double 胜过 solid，solid 又胜过 dashed 和 dotted）；如果还是平局，单元格的边框胜过行的边框，行的又胜过表格的。这就是为什么合并后的表格外边缘是琥珀色而不是蓝色：在那里，单元格和表格都有 2px 的实线边框，单元格胜出。
只显示横线，或只显示内部线条
大多数现代表格并不会画出每一条线。两种常见的做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Border patterns</title>
<style>
body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
table { border-collapse: collapse; }
th, td { padding: 6px 12px; text-align: start; }
/* 1. Row lines only */
.rows th, .rows td { border-bottom: 1px solid #d1d5db; }
.rows thead th { border-bottom: 2px solid #111827; }
/* 2. Inner grid, no outer frame */
.inner th, .inner td { border: 1px solid #d1d5db; }
.inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
.inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
.inner th:first-child, .inner td:first-child { border-inline-start: 0; }
.inner th:last-child, .inner td:last-child { border-inline-end: 0; }
</style>
</head>
<body>
<table class="rows">
<thead><tr><th>Name</th><th>Score</th></tr></thead>
<tbody>
<tr><td>Ana</td><td>92</td></tr>
<tr><td>Bob</td><td>87</td></tr>
</tbody>
</table>
<table class="inner">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>
第二个表格去掉了每个边缘单元格外侧的边框。border-inline-start 和 border-inline-end 指的是行的开头和结尾，所以在从右到左书写的语言中，同样的 CSS 依然正确，因为在这些语言里第一个单元格位于另一侧。
表格圆角
在设置了 border-collapse: collapse 的表格上，border-radius 不起任何作用。圆角表格使用 separate 模型并且不留间距，同时只给单元格设置底边框和结尾边框，让每条线只画一次：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rounded table</title>
<style>
table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #9ca3af;
border-radius: 10px;
font-family: system-ui, sans-serif;
}
th, td {
padding: 8px 14px;
border-bottom: 1px solid #9ca3af;
border-inline-end: 1px solid #9ca3af;
}
th { background: #e5e7eb; }
tr:first-child > :first-child { border-start-start-radius: 9px; }
tr:first-child > :last-child { border-start-end-radius: 9px; }
tr > :last-child { border-inline-end: 0; }
tr:last-child > * { border-bottom: 0; }
</style>
</head>
<body>
<table>
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Free</td><td>0</td></tr>
<tr><td>Pro</td><td>12</td></tr>
</table>
</body>
</html>
表头的两个角单元格有各自的圆角，这样灰色背景才会顺着弧线走。如果不设置，它们的直角就会从圆角边框外面露出来。圆角半径是 9px，即表格的 10px 减去它 1px 的边框，这样两条弧线才能对齐。
按部分设置边框颜色和粗细
表格的不同部分可以有不同的边框。针对 thead、tfoot 和单独某些行的选择器，可以在表头下方或合计行上方设置更粗的线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Border per part</title>
<style>
table { border-collapse: collapse; font-family: system-ui, sans-serif; }
th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
thead th { border-bottom: 3px solid #2563eb; }
tfoot td { border-top: 3px double #111827; font-weight: bold; }
</style>
</head>
<body>
<table>
<thead><tr><th>Month</th><th>Sales</th></tr></thead>
<tbody>
<tr><td>July</td><td>120</td></tr>
<tr><td>August</td><td>135</td></tr>
</tbody>
<tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
</table>
</body>
</html>
在相遇的地方，3px 的线胜过 1px 的灰线，遵循的正是上面的合并规则。表格结构的其余部分（thead、tfoot、th），参见 HTML 表格。
border 属性
老教程会在 <table> 标签上使用属性：
<table border="1" cellspacing="0" cellpadding="6">
浏览器仍然支持 border="1"：它会在 separate 模型下给表格和每个单元格画上边框，于是出现双线的效果。这三个属性在 HTML5 中都已过时。对应的 CSS 写法是：单元格上的 border，表格上的 border-spacing（或 border-collapse: collapse），以及单元格上的 padding。
常见错误
- 只在
table 上设置边框。你会得到一个外框，里面却没有线。把边框加到 th, td 上。
- 忘了写
border-collapse: collapse，结果看到双线。
border-radius 搭配 border-collapse: collapse。圆角会被忽略。border-spacing 搭配 border-collapse: collapse。间距只在 separate 模型中有效。- 在 separate 模型中给
<tr> 设置边框。除非表格是合并边框的，否则行不会画出边框；请改为设置单元格的样式。
- 在新代码中使用
border="1"。它仍然有效，但无法设置颜色，而且已经过时。
