正在加载...

HTML 表格边框

没有线的表格也能读；边框让网格一眼就清楚。上一课用 table、tr、th 和 td 固定了结构。本课补上外观：在现代 HTML 中用 CSS 画边框，而不是只靠 <table> 上过时的表现性 border 属性。结构留在 HTML；线条、间距和颜色属于样式规则。把边框想成网格的眼镜——帮助眼睛追踪单元格，却不改变数据含义。

为何用 CSS 而不是旧属性

浏览器曾接受 <table border="1"> 作为快捷教学技巧。该属性对严肃的现代页面已过时，几乎无法控制颜色、粗细或哪几边显示。CSS 可分别设置宽度、样式和颜色，在许多单元格间共享一条规则，并把边框与 padding、border-collapse 组合。通过 CSS 学边框，也符合你以后给标题、列表和布局写样式的方式，练习页才能与真实项目一致。

直接答案

用 CSS border 属性给 table、th 和 td 设样式。在表格上使用 border-collapse: collapse，让相邻单元格边框合并成一条干净网格线，而不是厚厚的双边。小演示可把规则放在 style 属性里；为了复用，更好的做法是放在带 class 的 <style> 块或样式表中。保持 tr/th/td 标记语义化；只有外观交给 CSS。若教程仍只以 border="1" 开头，把它当作博物馆笔记，把想法翻译成 CSS。

CSS 边框与过时标记对比

📊 Presenting table lines today

Approach Beginner verdict Why
在 th/td 上用 CSS border（+ collapse） 优先 灵活、可复用、现代
仅用 <table border="1"> 新工作应避免 过时的表现性 HTML
边框且 padding 为零 用 padding 修正 文字贴线难读
不 collapse 的分离边框 可选实验 说明为何 collapse 更干净

单元格边框（inline 练习）

在一张小表上试验时，inline 样式没问题。先设 collapse，再给每个表头和数据单元格一条细的 solid 边框和一点 padding。

Borders on cells

html
HTML Code 
<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid #333; padding: 6px;">City</th>
<th style="border: 1px solid #333; padding: 6px;">Code</th>
</tr>
<tr>
<td style="border: 1px solid #333; padding: 6px;">Tehran</td>
<td style="border: 1px solid #333; padding: 6px;">021</td>
</tr>
</table>

阅读 inline 示例

  • table 上的 border-collapse: collapse 把相邻边框合并成一张网格
  • 每个 th/td 用 border: 1px solid #333 画简单深色线
  • padding: 6px 让文字不贴边框
  • inline 样式在每个单元格重复——适合学习，大表会显得吵
  • HTML 结构与表格课相同；只增加了表现

用 style 块共享外观

当多个单元格应一致时，一条 class 规则胜过到处复制同一段 inline 字符串。文档头部的小段 <style> 是通往外部样式表的清晰桥梁。

Shared look with a style block

html
HTML Code 
<head>
<style>
table.grid { border-collapse: collapse; }
table.grid th, table.grid td { border: 1px solid #444; padding: 8px; }
</style>
</head>
<body>
<table class="grid">
<tr><th>Item</th><th>Qty</th></tr>
<tr><td>Pens</td><td>12</td></tr>
</table>
</body>

阅读共享样式示例

  • table.grid 限定规则范围，页面上不必每张表都长一样
  • 一条规则同时样式化 .grid 内的 th 和 td
  • 在一处改 padding 或颜色会更新整张网格
  • 你仍写普通的 tr/th/td 行——CSS 从不取代这些元素
  • 后续 CSS 课程会深入选择器；这里目标是干净、可重复的边框配方

Collapse、间距与可读性

没有 border-collapse: collapse 时，许多浏览器显示分离边框，看起来像双线或凸起网格。对数据表，Collapse 是初学者的常见选择，因为它读起来像连贯的电子表格式表面。单元格内的 padding 与线条本身同样重要：零 padding 让文字贴边，扫读费力。从 6px–8px 开始，在练习页凭眼感调整。颜色可选——学习用中性灰或深炭色就够；刺眼颜色会干扰你比较的数字。

结构留下；外观搬走

不要因为有了 CSS 就删掉 th 表头。不要只把表格关系放在没有真正表格标记的彩色盒子里。边框是 Tables 课骨架之上的装饰与清晰度。若数据不是表格型，回到列表——更漂亮的线修不好错误的元素选择。同样，不要只因为边框突然好看了就复活嵌套布局表；页面区域仍属于结构和后续 CSS 布局。

在编辑器中练习

  1. 复用（或重建）Tables 课中带真实 th/td 单元格的小练习表。
  2. 用 CSS 加边框——先在每个单元格用 inline 样式，以便看到每条属性。
  3. 开关 border-collapse，对比双线与单线网格。
  4. 添加 padding，让文字在每个单元格里舒服；试试 4px 再试 8px。
  5. 重构为 class 加上像第二个示例那样的短 <style> 块。
  6. 确认样式后表头仍是 th、数据单元格仍是 td。
  7. 可选：只给 .grid th 稍强一点的边框或背景以强调标签——不改变 HTML 含义。

容易犯的错

  • 严肃站点只依赖过时的表现性属性如 border="1"
  • 不加 collapse 却疑惑线条为何又粗又像双线
  • 零 padding，文字贴到边框
  • 用 CSS 设样式却去掉语义化的 th 标签
  • 应用全局 td { border: ... }，意外改写无关表格
  • 把边框 CSS 当作再次用嵌套表做页面布局的理由

小结

  • 优先在 th 和 td 上用 CSS border（并在 table 上 collapse）
  • border-collapse: collapse 把网格清理成单线
  • Padding 改善单元格内可读性
  • 结构留在 HTML；外观留在 CSS
  • 新工作避免依赖过时的 border 属性
  • 表格变大时，把重复的 inline 边框重构为 class

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程