html表单边框需通过css实现，table的border属性仅控制外框；要显示单元格边框须用border-collapse: collapse配合td/th的border样式；语义化推荐fieldset，避免table布局表单。

直接用 border 属性加边框，但别指望它能控制单元格内线

HTML 表单本身没有原生边框属性，所谓“带边框的表单区域”，实际是给包裹表单的容器（比如 <div> 或 <code><fieldset></fieldset>）加样式。用 table 标签做表单布局时，border 只影响表格最外层边框，不会自动画出单元格之间的线——这点常被误以为“边框没生效”。

• border="1" 仅渲染表格外框，且在现代浏览器中已不推荐（语义弱、样式不可控）
• 若想让每个 <td> 都有独立边框，必须配合 CSS 的 <code>border-collapse: collapse 和单元格级 border
• <fieldset></fieldset> 是更语义化的选择：<fieldset> <legend>登录信息</legend>...</fieldset> 自带边框和标题，无需额外写样式

border-collapse: collapse 是让表格边框“看起来整齐”的关键

纯 HTML 的 border 属性无法合并相邻边线，导致双线重叠难看。真正控制边框样式得靠 CSS：


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 必须给 <table> 设置 <code>style="border-collapse: collapse;"，否则 td 的 border 会各自为政
• 再给 td、th 单独设 border: 1px solid #000，才能实现“每个格子都有黑边”
• 如果只想要外框+横线（如表头下划线），可用 rules="rows" ——但这是过时的 HTML 属性，兼容性差，不建议新项目使用

移动端表格表单要慎用 width 和 height 固定尺寸

你看到的教程里写 width="100" height="80"，在手机上大概率会溢出或挤压变形。这些像素值在响应式场景下几乎无效：

• width="100" 不是 100%，而是 100 像素，小屏直接截断
• height 在表格中行为不稳定：内容撑高时它不起作用；内容少时又可能留白过多
• 正确做法是用 CSS：width: 100%; max-width: 600px; + table-layout: fixed; 控制列宽分配
• 表单控件（<input>、<select></select>）需额外加 width: 100%，否则默认宽度窄且不随容器缩放

容易被忽略的语义陷阱：表单不该硬套 <table><p>用 <code><table> 布局表单虽能快速出效果，但存在三个硬伤： <ul> <li>屏幕阅读器会逐行读“第1行，第1列，用户名输入框”，而非按逻辑顺序读“用户名、密码、提交按钮”</li> <li>移动端触控目标太小：<code>td 默认 padding 极小，input 点击热区不足 44×44px，违反 WCAG 标准

后续想加验证提示、错误状态、动态增删字段时，DOM 结构嵌套深、CSS 选择器难写

替代方案：用 <div class="form-group"> + Flex 布局，配 <code><label for="xxx"></label> 显式绑定，语义清晰、维护成本低 实际开发中，边框只是视觉表象，真正麻烦的是响应式适配、可访问性和后期扩展性。别为了省几行代码，把表单塞进 <table> 里——那不是快捷方式，是技术债的起点。</table>