表格布局

一、什么是表格布局
表格布局是以

系列标签为核心，依靠单元格自动对齐、行列规整的特性完成页面排版，是网页早期主流布局方式，现在仅用于数据表格、简易表单对齐，不再做整页页面布局。
核心标签
1.：表格最外层容器
2.：table row，代表一行
3.

：table data，普通数据单元格
4.

：table header，表头单元格，默认加粗居中
5.合并属性
·colspan="数字"：单元格横向跨列合并
·rowspan="数字"：单元格纵向跨行合并
二、基础表格结构示例
html

姓名	年龄	城市
小明	20	烟台
小红	21	济南

三、表格布局两大使用场景 1. 数据展示表格（目前唯一推荐场景） 后台管理系统、报表、商品参数、成绩表等规整行列数据，表格天然适配： ·单元格自动等高对齐，无需写 CSS 控制高度； ·自带行列分区，数据一目了然。 2. 老式表单对齐（入门简易方案） 利用表格左右单元格自动对齐，快速实现登录、注册表单，不用复杂浮动 /flex： html

用户名：
密码：

四、表格布局核心特性 1.自动等高对齐 同一行所有单元格高度统一，无需清除浮动、不用设置高度。 2.自适应均分 不固定宽度时，单元格会自动平分表格总宽度。 3.自带边框、分隔结构，适合规整数据。 4.脱离标准流限制，不会出现浮动高度塌陷问题。 五、优点 1.上手简单，不用复杂 CSS 即可实现整齐对齐； 2.兼容性极强，兼容所有老旧浏览器； 3.数据展示天生适配，行列规整。 六、缺点（淘汰做页面整体布局的原因） 1.标签嵌套层级深，代码冗余笨重，页面加载慢； 2.结构与样式高度耦合，修改布局需要改动 HTML 表格结构； 3.移动端适配极差，页面缩放后表格极易溢出、错乱； 4.不利于 SEO 搜索引擎抓取，多层嵌套降低爬虫效率； 5.灵活度极低，无法实现弹性自适应、自由分栏。 七、表格布局 vs Div+Flex 布局 表格 | 对比项 | Table 表格布局 | Div+Flex 布局 | | ----- | ------------ | ------------ | | 代码结构 | 多层嵌套，代码冗余 | 层级浅，结构简洁 | | 对齐方式 | 单元格自动等高对齐 | CSS 手动控制对齐 | | 维护难度 | 修改布局需改动 HTML | 仅修改 CSS，不动结构 | | 移动端适配 | 容易溢出错乱 | 天然适配手机屏幕 | | 适用范围 | 纯数据表格、简易表单 | 页面整体布局、卡片、导航 | 八、开发使用规范 1.禁止用 table 做网站首页、商品列表、页面整体布局； 2.仅在展示规整行列数据时使用表格； 3.表单优先使用 div+flex 排版，仅新手练习可临时用表格； 4.表格美化搭配 CSS：border-collapse: collapse; 合并边框，消除缝隙。 css table { border-collapse: collapse; /* 合并单元格边框 */ width: 100%; } td,th { border: 1px solid #ccc; padding: 10px; /* 单元格内边距，美化留白 */ }