HTML表格本身是静态结构容器，不支持动态渲染；动态数据渲染由JavaScript或框架实现，通过操作DOM节点将数据插入<table>中。
HTML表格本身不支持动态数据渲染，它只是静态结构容器；真正实现数据渲染的是 JavaScript（或框架）把数据塞进 <table> 的 DOM 节点里。
HTML <table> 本质是纯结构，不是数据绑定组件
浏览器解析 <table> 时只关心标签嵌套是否合法（<tr> 必须在 <tbody> 或 <thead> 里），不会读取任何“数据源”属性。你写死的 <td>苹果</td> 就永远是“苹果”，除非 JS 主动改它的 textContent 或 innerHTML。
- 没有内置的
data、items、v-for这类声明式绑定机制 -
<table>不会响应数组 push 或对象属性变化 - 服务端渲染（如 PHP echo）生成的表格，也是先拼好 HTML 字符串再发给浏览器，和“渲染”无关
用原生 JavaScript 渲染表格数据的最小可行方式
核心就是：获取数据 → 遍历生成 <tr><td>...</td></tr> 字符串或 DOM 节点 → 插入到 <tbody> 中。
示例（假设数据是数组）：
立即学习“前端免费学习笔记（深入）”；
const data = [
{ name: '张三', score: 85 },
{ name: '李四', score: 92 }
];
const tbody = document.querySelector('tbody');
tbody.innerHTML = data.map(item =>
`<tr><td>${item.name}</td><td>${item.score}</td></tr>`
).join('');
- 注意：直接拼字符串用
innerHTML简单，但有 XSS 风险，真实项目建议用document.createElement+appendChild - 如果表格已有内容，先清空
tbody.innerHTML = ''再插入，否则会追加而非替换 - 不要在循环里反复读取
tbody.children.length做条件判断——DOM 查询开销大，缓存数据长度更稳
为什么 React/Vue 的表格看起来“自动渲染”？
它们不是 HTML 表格变聪明了，而是框架在背后做了三件事：监听数据变化、重新执行模板函数、高效比对并更新 DOM。你写的 <tr v-for="item in list"> 实际被编译成 JS 函数，每次 list 变，函数重跑，新 DOM 片段替换旧的。
- React 中
<table>仍是普通 HTML 标签，map()返回的 JSX 数组才是驱动渲染的关键 - Vue 的
v-for编译后本质也是生成一组createElement调用，和手写 JS 创建节点逻辑一致 - 所有“响应式渲染”都依赖运行时层，HTML 标准本身无此能力
真正容易被忽略的点：表格列宽、排序、分页这些交互功能，无论用什么技术栈，最终都得操作 <table> 的 DOM 结构或 CSS 样式；HTML 表格不提供 API，只提供可被脚本操作的节点树。
