前言
表格和表单是网页两大核心基础模块：
表格 table：专注数据规整展示（排行榜、账单、课程表、后台数据列表）
表单 form：专注用户数据收集（登录、注册、搜索、提交信息）
早期网页靠表格做布局，现代网页表格只用来放数据，表单专门用来交互，本篇笔记一次性梳理全部核心知识点、属性、布局技巧、避坑要点。
一、表格布局 table
表格核心组成标签（固定结构）
标签 作用
表格整体容器，包裹所有表格内容`
标准完整表格结构（推荐语义化写法）
2. 表格核心属性（常用）
1）border 边框
border="1" ：给表格和单元格添加边框
注意：原生表格边框默认双线缝隙，需要 CSS 合并。
2）cellpadding 内边距
单元格内容与边框的距离，让文字不贴边，更美观。
3）cellspacing 外边距
单元格与单元格之间的间距，布局必备： cellspacing="0" 去除缝隙。
4）合并单元格（表格重难点）
跨行合并：rowspan
垂直合并，合并多行
语法： rowspan="数值"
例： rowspan="2" 当前单元格向下合并2行
跨列合并：colspan
水平合并，合并多列
语法： colspan="数值"
例： colspan="3" 当前单元格向右合并3列
合并口诀：跨行rowspan上下、跨列colspan左右
合并后：多余的 tr/td 必须删除，否则表格错乱
表格CSS布局美化（工作必备）
1）边框合并（解决双线边框）
2）隔行变色（表格常用特效）
表格布局总结 & 避坑
1. 表格只能用于展示结构化数据，禁止用来做页面整体布局（老旧写法，已淘汰）
2. 表格必须包含
，否则渲染异常
3. 合并单元格时，先确定合并数量，再删除多余单元格
4. 默认表格宽度由内容撑开，可设置 width:100% 自适应铺满父容器
二、表单布局 form
表单核心作用
收集用户信息，提交给后端服务器
所有输入类标签，
` 标签内部才能提交数据。
form 核心属性
1）action
数据提交地址（后端接口地址）
2）method
提交方式
get ：参数拼接在地址栏，不安全、有长度限制
post ：参数请求体传输，安全、无长度限制（项目常用）
表单核心输入标签` 是单标签，通过 type 属性 切换输入类型
全部常用 type 类型
type值 作用
text 单行文本输入（默认）
password 密码框，内容隐藏
radio 单选框（同一name互斥）
checkbox 多选框
submit 提交按钮
reset 重置按钮
button 普通空白按钮（JS使用）
file 文件上传
表单配套辅助标签
1）label 标签（优化用户体验）
作用：点击文字自动选中输入框
两种用法：
1. 关联 id
