表格必须用 thead + tbody 显式划分结构，caption 专放标题和日期，thead 仅含表头，tbody 每类数据独占一行，避免 rowspan；img 需 vertical-align: middle 或 flex 包裹对齐；td 内图文应嵌套 div 控制布局；table 需 border-collapse: collapse 配合 border-radius 和 overflow: hidden 实现圆角。
表格结构必须用 thead + tbody 显式划分
直接写一堆 tr 套 td 容易让天气数据语义混乱，尤其当需要动态更新某一行（比如只刷新温度）时，缺乏结构就难精准操作。浏览器对 caption、thead、tbody 的解析是稳定的，JS 也能靠它们快速定位目标区域。
-
caption放标题和日期，别塞进第一个tr里——它不属于数据行，且会被读屏器单独识别 -
thead只放表头：星期、日期、图标占位符，不要混入实际天气数据 - 每类数据（气温、天气状况、风向、空气质量）各占一行
tr，全部放在tbody内，方便 CSS 单独控制某类行的样式或 JS 批量替换 - 避免用
rowspan跨多行合并当天主图单元格——它会让后续tr的列数计算变脆弱，一加新列就错位
img 在表格里不自动垂直居中，得靠 vertical-align 或 flex
表格单元格默认是 display: table-cell，img 插进去后会按 baseline 对齐，底下总留白几像素，看起来像“悬空”。这不是图片问题，是表格单元格的对齐机制在起作用。
- 最简解法：给
img加style="vertical-align: middle;"，立刻对齐视觉中心 - 若单元格内还有文字（比如“优”+小图标），用
display: flex; align-items: center; gap: 4px;包裹更稳，vertical-align在 flex 容器里无效 - 别给
td设line-height去强行撑高——一旦文字换行或字号变化，对齐就崩 - 所有
img必须设明确宽高（如width="32" height="32"），否则缩放不一致，表格列宽抖动
图文混排别硬塞进同一 td，用嵌套容器隔离布局逻辑
把图标、温度、文字说明全堆在一个 td 里，后期想改间距、对齐或响应式折叠就非常麻烦。表格负责行列结构，具体排版交给内部容器。
- 每个数据单元（如“33℃~35℃”）用
div包一层，再设display: flex; align-items: center; gap: 6px; - 图标用
img，文字用span，避免p带默认 margin 撑开单元格高度 - 需要右对齐（如风向“微风→”）时，对
div加justify-content: flex-end;，别靠text-align—— flex 下它只影响文字，不影响图标 - 小屏下想把图标收成一行、文字换行？给外层
div加flex-wrap: wrap;和flex-direction: column;，比改表格结构简单得多
表格边框与圆角不能只靠 border-radius，得配合 border-collapse
直接给 table 设 border-radius: 8px; 没用——默认 border-collapse: separate 会让每个 td 自带独立边框，圆角只作用在左上/右上角，中间全是直角。
立即学习“前端免费学习笔记（深入）”；
- 先设
table { border-collapse: collapse; }，让所有边框合并成一条线 - 再给
table加border-radius: 8px;，同时加overflow: hidden;切掉溢出部分 - 首行
th或td需要单独圆角？用:first-child+border-top-left-radius等细化控制 - 别给单个
td设border-radius——它会被相邻单元格的边框盖住，视觉无效
tbody 隔离数据行，JS 更新时可能误删表头或错位图标。 
