td 是 HTML 表格里面的单元格标签，全称是 table data，作用就是定义表格里面的普通数据单元格，表格由 tr 行标签搭配 td 单元格标签组合搭建，每一个 tr 代表一整行，这一行里面每一个 td 就对应这一行里面的一格，用来存放文字图片链接等页面内容，是网页表格最基础的组成标签，浏览器识别到 td 标签之后，会自动把内容渲染成表格方格，和 th 表头标签区分开，th 一般是表头单元格，默认文字加粗居中，td 默认是普通数据单元格，文字常规样式左对齐。
标签核心原理
HTML 表格结构是嵌套结构，外层一般是 table 标签，里面嵌套 tr 行标签，tr 内部再放置多个 td 标签，一行里面 td 的数量，决定这一行有多少个单元格，如果不同行 td 数量不一致，表格就会出现错位，早期网页开发大量使用 table 布局，现在 table 标签主要用途是展示结构化数据，不再推荐用来做页面整体排版。
td 属于双标签，必须写开始标签 td 和结束标签 /td，不能只写单边标签，标签内部可以嵌套文字，span，a，img，input 等其他 HTML 元素，支持设置属性控制单元格宽度高度合并等效果。
常用属性说明
| 属性 | 作用 |
|---|---|
| colspan | 横向合并单元格，数字代表跨几列 |
| rowspan | 纵向合并单元格，数字代表跨几行 |
| width | 设置单元格宽度 |
| height | 设置单元格高度 |
| align | 单元格内容水平对齐，可选 left center right |
| valign | 单元格内容垂直对齐，可选 top middle bottom |
补充说明，width height align valign 这类属性属于 HTML 旧属性，现代前端开发更推荐使用 CSS 样式来控制对齐尺寸，不再优先使用标签原生属性。
基础使用步骤
第一步，编写外层 table 标签，搭建表格容器。
第二步，写入 tr 标签代表第一行。
第三步，在 tr 内部写入多个 td 标签，每个 td 填入需要展示的数据。
第四步，继续新增 tr，编写下一行的 td 单元格。
第五步，需要合并单元格的时候，给 td 添加 colspan 或者 rowspan 属性，填写对应的跨列跨行数值。
第六步，保存 html 文件，打开浏览器查看表格渲染效果。
td 和 th 的区别
td 是普通数据单元格，用来存放业务数据，默认不加粗，默认左对齐。
th 是表头单元格，用来做列标题，浏览器默认样式文字加粗，内容居中，语义上代表表头，对屏幕阅读器这类辅助设备更加友好。
两者都属于单元格标签，都支持 colspan 和 rowspan 合并单元格，都可以嵌套其他内容。
现代开发注意事项
现在前端主流是 div 加 CSS 弹性布局网格布局，table 表格只适合纯数据展示场景，比如报表清单成绩表，不要用 table 做整页布局，table 布局会导致代码冗余，响应式适配困难，移动端显示容易溢出。td 内部如果内容过长，默认单元格会自动撑开，需要配合 CSS 的 word-break 或者 overflow 处理文字换行溢出问题。
【常见问题】
问题 1，td 标签可以单独使用吗
回答 1，td 标签不能单独使用，td 必须放在 tr 行标签内部，tr 又要放在 table 表格容器里面，脱离表格结构单独写 td，浏览器不会按照单元格正常渲染，属于错误写法。
问题 2，td 横向合并单元格用什么属性
回答 2，td 横向合并单元格使用 colspan 属性，属性值填写需要合并的列数量，比如 colspan 等于 2 就代表当前 td 占据原本两个单元格的横向位置。
问题 3，td 和 th 能不能互相替换
回答 3，td 和 th 可以实现类似的方格渲染效果，但是语义不一样，表头建议优先使用 th，普通数据单元格使用 td，保持语义规范，利于无障碍访问。
问题 4，td 里面可以放图片吗
回答 4，td 内部支持嵌套 img 图片标签，还可以放入链接输入框等其他 HTML 元素，td 本身只是单元格容器，不限制内部内容类型。
【免责申明】
本文内容基于 HTML 标准基础知识点进行讲解，不同浏览器对旧版 table 属性的兼容表现可能存在差异，实际项目开发请结合当前前端规范与浏览器兼容需求进行调整，本文仅作为学习参考，不构成项目开发强制标准。