HTML——表单与表格

旺仔小拳头..2025-10-30 15:13

一、HTML 表格（第 11 章）

1.1 表格概述

  • 定义：表格是 HTML 中用于有序展示数据（文本、图片、表单等）的元素，早期也常用于网页整体布局（现多被 Flex/Grid 替代，但数据展示场景仍常用）。

1.2核心标记与语法

标记 说明
<table></table> 表格根标记，所有表格内容需包裹在其中。
<caption></caption> 表格标题，默认位于表格上方，用于说明表格用途（如 "2024 级课程表"）。
<tr></tr> 表格行标记，每对<tr>代表表格的一行，包含多个单元格。
<td></td> 普通单元格标记，用于存放数据（文本、图片等），属于表格主体内容。
<th></th> 表头单元格标记，默认居中加粗，用于列标题（如 "姓名""学号"）。
<thead></thead> 表格头部区域，包裹表头行（<tr>+<th>），语义化标签，便于样式控制。
<tbody></tbody> 表格主体区域，包裹数据行（<tr>+<td>），语义化标签，支持滚动加载。
<tfoot></tfoot> 表格底部区域，包裹汇总行（如合计、备注），语义化标签。
基础语法示例（学生信息表）
html 复制代码 
<table border="1"> <!-- border设为1显示边框 -->
  <caption>2024级学生信息表</caption> <!-- 表格标题 -->
  <thead>
    <tr> <!-- 表头行 -->
      <th>姓名</th>
      <th>院系</th>
      <th>学号</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- 数据行1 -->
      <td>王小品</td>
      <td>商学院</td>
      <td>110204</td>
    </tr>
    <tr> <!-- 数据行2 -->
      <td>李白</td>
      <td>机械学院</td>
      <td>100244</td>
    </tr>
  </tbody>
</table>

1.3 表格属性设置（含 CSS 替代方案）

表格属性用于控制整体样式，HTML 原生属性部分已被 CSS 替代，但需了解基础用法以便兼容旧代码。

1.3.1 边框相关属性
属性 取值 说明 CSS 替代方案
border 数值（如 1、5） 表格边框宽度，默认 0（无边框）。 border: 1px solid #000;
bordercolor 颜色值（如 #f00） 边框颜色，对所有边框生效。 border-color: #f00;
bordercolorlight 颜色值 表格 "亮边" 颜色（仅 IE 兼容，少用）。 用border-top/border-left单独设置
bordercolordark 颜色值 表格 "暗边" 颜色（仅 IE 兼容，少用）。 用border-bottom/border-right单独设置
1.3.2 边框样式（frame与rules）

控制表格外边框和内边框的显示范围，常用场景：只显示表格上下边框、隐藏内边框等。

属性 取值 说明（外边框frame） 属性 取值 说明（内边框rules）
frame above 仅显示上边框 rules all 显示所有内边框（默认）
below 仅显示下边框 none 隐藏所有内边框
hsides 显示上下边框 rows 仅显示行之间的内边框
vsides 显示左右边框 cols 仅显示列之间的内边框
border 显示所有外边框 - -

示例：只显示上下外边框 + 所有内边框

html 复制代码 
<table border="2" frame="hsides" rules="all" width="500">
  <tr><th>姓名</th><th>院系</th></tr>
  <tr><td>王小品</td><td>商学院</td></tr>
</table>
1.3.3 单元格间距与边距
  • cellspacing ：单元格之间的间距（默认 2px），取值为数值（如 5、10）。CSS 替代：border-spacing: 5px;（需配合border-collapse: separate;，默认是collapse合并边框）。
  • cellpadding ：单元格内容与单元格边框的距离（默认 1px），取值为数值。CSS 替代：padding: 5px;（直接给<td>/<th>设置内边距）。

示例：间距 20px，边距 10px

html 复制代码 
<table border="1" cellspacing="20" cellpadding="10">
  <tr><td>内容1</td><td>内容2</td></tr>
</table>
1.3.4 尺寸与对齐
  • 尺寸属性 ：
    • width：表格宽度，取值为像素（如 500px）或百分比（如 80%，相对于父容器）。
    • height：表格高度，取值同width（不推荐固定高度，建议由内容自适应）。CSS 替代：width: 80%; height: auto;。
  • 水平对齐 ：
    • align：表格在页面中的对齐方式，取值left（左）、center（中）、right（右）。CSS 替代：margin: 0 auto;（表格居中）、float: left;（表格左对齐）。

1.4 表格行（<tr>）属性

控制某一行的整体样式，属性作用于该行所有单元格。

属性 取值 说明
align left/center/right 行内内容水平对齐（作用于该行所有单元格）。
valign top/middle/bottom 行内内容垂直对齐（默认middle）。
bgcolor 颜色值（如 #f5f5f5） 行的背景颜色。
bordercolor 颜色值 该行边框颜色（覆盖表格整体bordercolor）。

示例：行内容左对齐 + 垂直顶部对齐 + 灰色背景

html 复制代码 
<tr align="left" valign="top" bgcolor="#f5f5f5">
  <td>王小品</td>
  <td>商学院</td>
  <td>110204</td>
</tr>

1.5 单元格（<td>/<th>）属性

控制单个单元格的样式，重点是跨行合并 和跨列合并。

1.5.1 基础属性

与<tr>属性类似，但作用于单个单元格，优先级高于<tr>属性：

  • align/valign：单元格内容的水平 / 垂直对齐；
  • bgcolor/background：单元格背景色 / 背景图（background已被 CSS 替代，用background-image: url("img.jpg");）；
  • width/height：单个单元格的宽 / 高（覆盖表格和行的尺寸设置）。
1.5.2 核心功能：跨行与跨列合并
  • 跨列合并（colspan） ：横向合并多个单元格，取值为 "合并的列数"（如colspan="2"合并 2 列）。语法：<td colspan="2">合并2列的内容</td>（合并后，该行需删除对应数量的<td>）。
  • 跨行合并（rowspan） ：纵向合并多个单元格，取值为 "合并的行数"（如rowspan="3"合并 3 行）。语法：<td rowspan="3">合并3行的内容</td>（合并后，下方行需删除对应数量的<td>）。

示例（会议日程表，含跨行跨列）

html 复制代码 
<table border="1" width="500">
  <caption>云计算会议日程</caption>
  <tr align="center">
    <td colspan="2">上午</td> <!-- 跨2列：合并"8:00-10:00"和"10:10-12:00"列 -->
    <td colspan="2">下午</td> <!-- 跨2列 -->
  </tr>
  <tr align="center">
    <td>8:00-10:00</td>
    <td>10:10-12:00</td>
    <td>14:00-16:00</td>
    <td>16:10-18:00</td>
  </tr>
  <tr align="center">
    <td rowspan="2">领导讲话</td> <!-- 跨2行：合并当前行和下一行 -->
    <td>主题报告</td>
    <td>专题报告</td>
    <td rowspan="2">总结报告</td> <!-- 跨2行 -->
  </tr>
  <tr align="center">
    <td>专家报告</td>
    <td>分组讨论</td>
  </tr>
</table>

1.6 表格嵌套

  • 定义 ：在一个表格的单元格（<td>/<th>）内嵌入另一个完整表格，用于实现复杂布局（如 "左侧导航 + 右侧内容 + 右上角链接" 的组合）。
  • 语法规则 ：子表格必须完全包裹在父表格的<td>/<th>中，且子表格的语法与普通表格一致。
  • 注意事项 ：
    1. 嵌套层级不宜过多（建议≤2 层），否则会增加页面加载时间，影响性能；
    2. 子表格的尺寸建议用百分比（如width: 100%），避免超出父单元格范围；
    3. 优先用 CSS Flex/Grid 布局替代复杂嵌套表格，减少代码冗余。

示例（嵌套表格实现新闻页面）

html 复制代码 
<table border="1" width="600">
  <tr>
    <!-- 左列：嵌套子表格（分类导航） -->
    <td width="150">
      <table width="100%" border="1">
        <tr><td align="center">科技</td></tr>
        <tr><td align="center">财经</td></tr>
        <tr><td align="center">探索</td></tr>
      </table>
    </td>
    <!-- 中列：新闻内容 -->
    <td width="300">
      <p>地铁4号线横穿南京，预计明年底通车...</p>
    </td>
    <!-- 右列：链接列表 -->
    <td width="150">
      <a href="http://baidu.com">百度</a><br>
      <a href="http://sina.com">新浪</a>
    </td>
  </tr>
</table>

1.7 综合实例：表格布局网站首页

1.7.1 布局思路

以 "医疗器械公司" 网站为例，采用6 行 2 列的父表格，结合跨列、跨行和嵌套实现布局：

  1. 第 1 行：跨 2 列，显示 "设为首页""收藏本站" 等功能链接；
  2. 第 2 行：跨 2 列，嵌套 1 行 6 列的子表格，作为导航栏（首页、关于我们、产品展示等）；
  3. 第 3 行：左列显示侧边栏（公司简介、联系方式），右列跨 2 行显示主要内容（公司详情）；
  4. 第 4 行：左列显示 "在线留言" 入口，右列继续显示主要内容；
  5. 第 6 行：跨 2 列，显示版权信息（©2008-2012 医疗器械公司）。
1.7.2 代码
html 复制代码 
<table width="1000" border="0" align="center">
  <!-- 第1行：功能链接 -->
  <tr align="right">
    <td colspan="2">设为首页 | 收藏本站</td>
  </tr>
  <!-- 第2行：导航栏（嵌套子表格） -->
  <tr>
    <td colspan="2">
      <table width="100%" border="0">
        <tr align="center">
          <td>首页</td>
          <td>关于我们</td>
          <td>新闻资讯</td>
          <td>产品展示</td>
          <td>招贤纳士</td>
          <td>联系我们</td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- 第3行：侧边栏+主内容 -->
  <tr>
    <td width="200" bgcolor="#f5f5f5">
      <p>公司简介</p>
      <p>联系方式</p>
    </td>
    <td width="800" rowspan="2"> <!-- 跨2行，覆盖第3、4行 -->
      <h3>公司简介</h3>
      <p>医疗器械公司始建于1946年，是国内大型医疗设备研发基地...</p>
    </td>
  </tr>
  <!-- 第4行：侧边栏（在线留言） -->
  <tr>
    <td bgcolor="#f5f5f5">
      <p>在线留言</p>
    </td>
  </tr>
  <!-- 第6行：版权信息 -->
  <tr align="center">
    <td colspan="2">©2008-2012 医疗器械公司 版权所有</td>
  </tr>
</table>

二、HTML 表单

2.1 表单概述

  • 定义 ：表单是 HTML 中用于收集用户输入信息并提交给服务器的交互组件，是前后端交互的核心桥梁（如登录、注册、问卷提交）。
  • 核心组成 ：
    1. 表单容器：<form>标记，定义表单的提交目标和方式；
    2. 表单控件：输入框、按钮、下拉列表等，用于用户输入或操作；
    3. 标签与分组：<label>（关联控件与文字）、<fieldset>（分组）、<legend>（分组标题），提升用户体验。

2.2 表单根标记（<form>）

所有表单控件必须包裹在<form>内，其属性决定了数据如何提交到服务器。

属性 取值 说明
name 自定义名称（如 "loginForm"） 表单的唯一标识，用于 JavaScript 获取表单对象（如document.forms.loginForm）。
action URL 地址（如 "login.php"） 指定处理表单数据的服务器端程序路径（如 PHP、JSP 文件）；若为空，默认提交到当前页面。
method get/post 数据提交方式：- get：数据拼接在 URL 后（可见，适合少量非敏感数据，如搜索）；- post：数据在请求体中（不可见，适合敏感数据，如登录密码）。
enctype application/x-www-form-urlencoded（默认）/multipart/form-data 数据编码格式：- 默认值：适用于普通文本数据；- multipart/form-data：必须用于文件上传（配合<input type="file">）。
基础语法示例（成绩提交表单）
html 复制代码 
<form name="scoreForm" method="post" action="score_submit.php">
  <h3>输入课程成绩</h3>
  姓名：<input type="text" name="username"><br>
  高等数学：<input type="text" name="math"><br>
  大学物理：<input type="text" name="physics"><br>
  <!-- 提交按钮：触发表单提交 -->
  <input type="submit" value="成绩提交">
  <!-- 重置按钮：清空所有输入 -->
  <input type="reset" value="成绩重置">
</form>

2.3 表单分组（<fieldset>与<legend>）

  • 作用：将表单中相关的控件（如 "基本信息""联系方式"）分组，用边框包裹，提升页面结构化和可读性。

  • 语法 ：

    html 复制代码 
    <form>
  <!-- 分组1：基本信息 -->
  <fieldset>
    <legend align="center">基本信息</legend> <!-- 分组标题，可设置对齐方式 -->
    姓名：<input type="text" name="username"><br>
    性别：<input type="radio" name="sex" value="male">男 
         <input type="radio" name="sex" value="female">女<br>
  </fieldset>

  <!-- 分组2：联系方式 -->
  <fieldset>
    <legend align="center">联系方式</legend>
    电话：<input type="text" name="phone"><br>
    邮箱：<input type="text" name="email"><br>
  </fieldset>
</form>

  • 属性 ：

    • <legend align>：标题对齐方式，取值left/center/right（默认left）；
    • <fieldset border>：分组边框宽度（默认 1px），可用 CSSborder属性美化。

2.5 核心表单控件（<input>及其他标记）

表单控件是用户输入的核心，主要通过<input>标记实现（单标记，无需闭合），不同type值对应不同控件类型。

2.4.1 <input>控件详解（按类型分类）
控件类型 type值 核心属性 说明与示例
单行文本框 text maxlength（最大字符数）、size（宽度）、value（默认值）、readonly（只读） 用于输入单行文本（如姓名、账号），示例：<input type="text" name="username" maxlength="20" size="30" value="默认账号" readonly>
密码框 password maxlength、size 输入内容隐藏为 "●"，用于敏感信息（如密码），示例：<input type="password" name="pwd" maxlength="16" size="30">
复选框 checkbox name、value、checked（默认选中） 支持多选，每个复选框name需不同 ，示例：爱好：<br><input type="checkbox" name="hobby1" value="reading" checked>读书<br><input type="checkbox" name="hobby2" value="singing">唱歌
单选按钮 radio name、value、checked 支持单选，同一组单选按钮name必须相同 ，示例：性别：<br><input type="radio" name="sex" value="male" checked>男<br><input type="radio" name="sex" value="female">女
图像按钮 image src（图片路径）、width/height（尺寸） 用图片替代默认提交按钮，点击后触发表单提交，示例：<input type="image" name="submitBtn" src="submit.jpg" width="100" height="30">
提交按钮 submit value（按钮文字，默认 "提交"） 点击后将表单数据提交到action指定的服务器程序，示例：<input type="submit" value="登录提交">
重置按钮 reset value（按钮文字，默认 "重置"） 点击后清空表单所有输入内容，恢复默认值，示例：<input type="reset" value="重新填写">
普通按钮 button value、onclick（点击事件） 无默认功能，需配合 JavaScript 实现交互（如弹窗、隐藏内容），示例：<input type="button" value="注册新用户" onclick="alert('前往注册页')">
文件选择框 file name、accept（允许的文件类型） 用于选择本地文件（如上传头像、文档），需配合<form enctype="multipart/form-data">才能上传文件 ，示例：<input type="file" name="avatar" accept="image/*">（仅允许图片）
隐藏框 hidden name、value（隐藏值） 不在页面显示，用于存储隐藏数据（如用户 ID、表单版本），随表单一起提交，示例：<input type="hidden" name="userId" value="123456">
2.4.2 其他表单控件（非<input>类型）
控件类型 标记 核心属性 说明与示例
多行文本框 <textarea></textarea> rows（可见行数）、cols（可见列数）、wrap（换行方式） 用于输入多行文本（如留言、意见反馈），示例：<textarea name="feedback" rows="4" cols="50" wrap="soft">请输入您的意见...</textarea>- wrap="soft"：视觉换行，提交时不换行；- wrap="hard"：提交时保留换行（需指定cols）
下拉列表框 <select></select>+<option></option> size（可见选项数）、multiple（允许多选）、selected（默认选中） 用于从多个选项中选择（节省页面空间），示例：<select name="course" size="4" multiple>``<option value="c1" selected>C/C++程序设计</option>``<option value="c2">计算机网络</option>``</select>- 按住Ctrl键可多选（需multiple）；- size="4"：同时显示 4 个选项

2.5 标签关联（<label>，提升可访问性）

  • 作用：将文字与表单控件关联，点击文字即可聚焦到对应控件（如点击 "用户名" 文字，光标自动定位到用户名输入框），提升用户体验（尤其适合移动端）。
  • 语法 ：

    1. 通过for属性关联控件的id（推荐，控件与文字可分离）：

      html 复制代码 
      <label for="username">用户名：</label>
<input type="text" id="username" name="username">

    2. 将控件包裹在<label>内（简单，无需id）：

      html 复制代码 
      <label>
  密码：<input type="password" name="pwd">
</label>

2.6 综合实例：会议注册表（表格 + 表单 + CSS）

2.6.1 设计思路

用表格排版表单元素 （确保对齐），结合<fieldset>分组，用 CSS 美化样式，实现结构化的会议注册表，包含：

  • 基本信息（姓名、职务、单位、联系方式）；
  • 会议费标准（单选按钮，按会员 / 非会员、注册时间区分）；
  • 提交与重置按钮。
2.6.2 完整代码示例
html 复制代码 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>第十八届中国国际广告节会议注册表</title>
  <style type="text/css">
    /* CSS美化 */
    body { text-align: center; margin: 20px 0; }
    h1 { font-size: 24px; color: #333; }
    .reg-table { 
      width: 840px; 
      margin: 0 auto; /* 表格居中 */
      border-collapse: collapse; /* 合并边框 */
      background: #f7f7f7;
    }
    .reg-table td { 
      border: 1px solid #ccc; 
      padding: 5px 10px; 
      text-align: left; /* 单元格内容左对齐 */
    }
    .reg-table .title-td { 
      background: #e8e8e8; 
      font-weight: bold; /* 标题单元格加粗 */
    }
    input[type="text"], input[type="tel"], input[type="email"] {
      width: 90%; /* 输入框宽度适配单元格 */
      padding: 3px;
      border: 1px solid #ccc;
    }
    .btn-group { text-align: center; margin-top: 15px; }
    .btn-group input { 
      width: 100px; 
      height: 30px; 
      margin: 0 10px; 
      cursor: pointer; /* 鼠标悬停为手型 */
    }
  </style>
</head>
<body>
  <h1>第十八届中国国际广告节会议注册表</h1>
  <!-- 表单：post提交到服务器 -->
  <form method="post" action="register.php">
    <!-- 表格排版表单元素 -->
    <table class="reg-table">
      <!-- 基本信息行 -->
      <tr>
        <td class="title-td">参会者姓名</td>
        <td colspan="3"><input type="text" name="name" required></td> <!-- required：HTML5必填验证 -->
        <td class="title-td">职务</td>
        <td colspan="3"><input type="text" name="position"></td>
      </tr>
      <tr>
        <td class="title-td">工作单位</td>
        <td colspan="3"><input type="text" name="company"></td>
        <td class="title-td">电话</td>
        <td><input type="tel" name="phone"></td>
        <td class="title-td">传真</td>
        <td><input type="tel" name="fax"></td>
      </tr>
      <tr>
        <td class="title-td">手机</td>
        <td><input type="tel" name="mobile" required></td>
        <td class="title-td">邮箱</td>
        <td><input type="email" name="email" required></td>
        <td class="title-td">通讯地址</td>
        <td colspan="3"><input type="text" name="address"></td>
      </tr>
      <!-- 会议费标准（单选按钮分组） -->
      <tr>
        <td class="title-td" rowspan="2">会议费标准（人民币）</td>
        <td class="title-td" colspan="2">身份/时间</td>
        <td class="title-td">2011年9月20日之前注册</td>
        <td class="title-td" colspan="4">2011年9月20日之后注册</td>
      </tr>
      <tr>
        <td colspan="2">中广协会员</td>
        <td><input type="radio" name="fee" value="1500" checked>1500元</td>
        <td colspan="4"><input type="radio" name="fee" value="1800">1800元</td>
      </tr>
      <tr>
        <td colspan="2">非会员</td>
        <td><input type="radio" name="fee" value="1800">1800元</td>
        <td colspan="4"><input type="radio" name="fee" value="2000" checked>2000元</td>
      </tr>
    </table>
    <!-- 提交与重置按钮 -->
    <div class="btn-group">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </div>
  </form>
</body>
</html>

三、表格与表单的结合

在实际开发中，表格常用来辅助表单排版，解决表单元素对齐问题（如标签与输入框横向对齐），核心思路：

  1. 用<table>包裹表单控件，每行（<tr>）包含 "标签单元格" 和 "控件单元格"；
  2. 标签单元格用<td class="title">统一样式（如右对齐、加粗）；
  3. 输入框、单选按钮等控件放在另一<td>中，确保整体对齐。

示例（简化登录表单）

html 复制代码 
<form method="post" action="login.php">
  <table border="0" width="300" align="center">
    <tr>
      <td align="right">用户名：</td>
      <td><input type="text" name="username" required></td>
    </tr>
    <tr>
      <td align="right">密码：</td>
      <td><input type="password" name="pwd" required></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" value="登录">
        <input type="reset" value="重置">
      </td>
    </tr>
  </table>
</form>
相关推荐
xu_duo_i3 小时前
vue2+elementUI后端返回二进制流，前端下载实现
前端·javascript·elementui
慧一居士3 小时前
在Vue项目中平滑地引入HTML文件
前端·vue.js
我的20093 小时前
HTML常用特殊字符
前端·html
开发者如是说3 小时前
我用 Compose 写了一个 i18n 多语言管理工具
前端·后端·架构
微信api接口介绍3 小时前
微信个人发消息api
运维·服务器·开发语言·前端·网络·微信·ipad
阿明Drift3 小时前
从炫酷粒子星云学 Three.js：深度解析一个 15 万粒子的 GPU 动画系统
前端·three.js
凉_橙3 小时前
移动端h5适配方案
前端
久亮哦3 小时前
开发Electron程序
前端·javascript·electron
敲敲了个代码3 小时前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）