4、HTML表格与表单：表格标签、表格属性、合并单元格、表单标签、input类型、表单验证

表格和表单，这两个东西在网页里太常见了。表格用来展示数据，表单用来收集数据。说白了，一个负责「看」，一个负责「填」。我刚开始学的时候，总觉得表格很简单，不就是画格子嘛。后来才发现，表格的合并、对齐、跨行跨列，坑还真不少。至于表单，嗯，那是跟用户打交道的核心，做不好用户体验，用户分分钟就跑了。

4.1 表格标签：从结构说起

HTML 表格的核心标签其实不多，但每个都有它的位置。我习惯把表格想象成一张 Excel 表：有行、有列、有表头、有内容。

  • <table>：整个表格的容器
  • <tr>：行（table row）
  • <td>：单元格（table data）
  • <th>：表头单元格（table header），默认加粗居中
  • <thead>、<tbody>、<tfoot>：表格结构分组

你想想看，如果没有 <thead> 和 <tbody>，表格就是一锅粥。尤其是数据量大的时候，浏览器渲染起来会很吃力。我个人建议，只要是正经表格，一定要用这些结构标签。

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>
小提示： border="1" 只是最基础的边框写法。实际项目中，我们一般用 CSS 来控制表格样式，更灵活。

4.2 表格属性：别小看这些细节

表格的属性其实不多，但每一个都挺实用。我记得有一次做后台管理系统，表格内容太多，挤在一起根本没法看。后来加了 cellpadding 和 cellspacing，瞬间清爽了。

  • border：边框宽度
  • cellpadding：单元格内边距（内容与边框的距离）
  • cellspacing：单元格之间的间距
  • width、height：表格宽高
  • align：表格对齐方式（left/center/right）
  • bgcolor：背景颜色（现在多用 CSS）
注意： 这些属性在 HTML5 中已经「过时」了，但浏览器仍然支持。我个人建议，能用 CSS 解决的，就别用属性。不过作为入门，了解一下没坏处。

4.3 合并单元格：跨行跨列的艺术

合并单元格，说白了就是把多个格子合成一个。这在做复杂表格时特别常见。比如课程表、排班表、统计报表，几乎天天用。

  • colspan：跨列合并（横向合并）
  • rowspan：跨行合并（纵向合并）

我曾经在做一个项目时，表格的合并逻辑搞错了，结果整个页面布局全乱了。后来我总结了一个经验：先画草图，再写代码。合并单元格之前，一定要想清楚哪些格子要合并，合并后占几行几列。

<table border="1">
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>电话</td>
    <td>邮箱</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td>电话</td>
    <td>138xxxx</td>
  </tr>
  <tr>
    <td>邮箱</td>
    <td>li@example.com</td>
  </tr>
</table>
重点： 合并单元格时，被合并掉的格子不要写在 HTML 里。比如 colspan="2" 的那一行，只需要写一个 <th>，另一个格子自动被合并掉了。

4.4 表单标签：用户交互的入口

表单，说白了就是让用户填信息、点按钮、提交数据的地方。没有表单，网页就只是个「展示板」，没法跟用户互动。

表单的核心标签是 <form>，它本身不显示任何东西，但它是一个容器。里面可以放各种输入控件。

<form action="/submit" method="post">
  <!-- 各种输入控件放这里 -->
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>
  • action：数据提交到的服务器地址
  • method：提交方式（get / post）
  • name：表单名称，用于 JavaScript 操作

我个人习惯，表单一定要写 name 属性。为什么？因为提交数据时，服务器就是靠 name 来识别每个字段的。没有 name，数据传过去也是空的。

4.5 input 类型：花样繁多

<input> 是表单里最常用的标签。它的 type 属性决定了输入框长什么样、能输入什么内容。我刚开始学的时候，只知道 text 和 password，后来才发现原来有这么多类型。

type 值 说明 示例
text 普通文本输入 用户名、备注
password 密码输入（显示为圆点） 登录密码
email 邮箱输入（自动校验格式） 注册邮箱
number 数字输入（带上下箭头） 年龄、数量
date 日期选择器 出生日期
radio 单选按钮 性别选择
checkbox 复选框 兴趣爱好
file 文件上传 上传头像
submit 提交按钮 提交表单
reset 重置按钮 清空表单
实用技巧： 用 type="email" 时，移动端会自动弹出带 @ 符号的键盘。用 type="number" 时，移动端会弹出数字键盘。这些小细节，用户体验会好很多。

4.6 表单验证：别让用户乱填

表单验证，说白了就是检查用户填的内容对不对。比如邮箱格式、密码长度、必填项有没有填。我见过太多项目，表单验证没做好，用户随便填个「123」就提交了，后台收到一堆垃圾数据。

HTML5 自带了一些验证属性，不需要写 JavaScript 就能用：

  • required：必填项
  • minlength / maxlength：最小/最大字符数
  • min / max：数字的最小/最大值
  • pattern：正则表达式验证
  • type="email"：自动验证邮箱格式
<form>
  <label>用户名（必填，至少3个字符）：</label>
  <input type="text" name="username" required minlength="3">
  <br>
  <label>邮箱：</label>
  <input type="email" name="email" required>
  <br>
  <label>年龄（18-60）：</label>
  <input type="number" name="age" min="18" max="60">
  <br>
  <label>手机号（11位数字）：</label>
  <input type="text" name="phone" pattern="[0-9]{11}">
  <br>
  <input type="submit" value="注册">
</form>
避坑指南： 我曾经做过一个项目，只用了前端验证，结果用户直接禁用 JavaScript 就绕过去了。记住，前端验证只是辅助，后端验证才是根本。前端验证是为了用户体验，后端验证是为了数据安全。

嗯，表格和表单的内容就这些。表格重在结构清晰，表单重在交互友好。你想想看，一个网页如果没有表格，数据展示会乱成一团；如果没有表单，用户根本没法跟你互动。所以这两个东西，一定要熟练掌握。

下一章我们会讲 CSS 的基础，到时候你会发现，表格和表单加上样式之后，会变得更好看、更实用。

← 上一章 📖 返回目录 下一章 →