表格必须用<thead><tbody>分区，图标统一用<img>/SVG并设vertical-align:middle和1.2em高度，禁用flex布局破坏table-cell流式行为，移动端用断点隐藏非核心列或改行主视图，严禁CSS伪装表格语义。
表格结构必须用 <thead> 和 <tbody> 明确分区
直接写 <table> 里面堆 <tr> 容易让图标和文字错位，尤其在响应式或 JS 动态更新时。浏览器对表头语义识别依赖 <thead>，否则排序、导出、屏幕阅读器都会出问题。
气象数据通常有固定字段（如时间、温度、湿度、风速、天气图标），<thead> 放列名，<tbody> 每行对应一个观测时刻。图标建议统一用 <img> 或内联 SVG，不要混用 background-image —— 后者无法被屏幕阅读器读取，也无法通过 CSS vertical-align 精确对齐文字。
- 图标尺寸统一设为
1.2em高度，配合vertical-align: middle对齐文字基线 - 避免在
<td>里嵌套<div>布局，会破坏表格的固有流式行为 - 如果某列全是图标（如“天气状况”），
<th>里加aria-label="天气状况"，弥补视觉简略带来的可访问性缺失
图标与文字共存时，display: flex 在 <td> 内不可靠
表格单元格默认是 display: table-cell，强行改 display: flex 会导致高度塌陷、换行错乱，尤其在跨浏览器渲染中（比如 Safari 对 flex + table-cell 的兼容处理不一致）。
真正稳定的做法是：图标用 <img> 或 <svg>，紧跟文字，靠 vertical-align 和 line-height 控制垂直居中；文字部分用 <span> 包裹，必要时加 margin-left 微调间距。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<td style="display:flex;align-items:center"><img><span>26°C</span></td> - 推荐写法：
<td><img src="sun.svg" alt="晴" style="vertical-align:middle;height:1.2em;margin-right:0.3em"><span>26°C</span></td> - 若需图标右对齐文字（如风向箭头），把
margin-right换成margin-left，并确保<span>不设display:block
移动端窄屏下，气象表格容易横向溢出
气象数据常含 5–8 列（时间、气温、体感、湿度、气压、风速、风向、天气），小屏直接横向滚动体验差，且图标会被压缩变形。
别用 overflow-x: auto 粗暴包裹整个 <table> —— 这会让图标和文字在滚动时分离（因字体缩放和图片像素比不一致）。更可行的是按设备断点折叠非核心列，或改用“行主视图”：每条记录占一整行，图标+文字纵向排列。
- PC 端保留全部列，用
@media (max-width: 768px)隐藏次要列（如气压、体感温度），用class="visually-hidden"而非display:none，保证可访问性 - 移动端启用
<details><summary>折叠扩展信息，例如点击“26°C”展开湿度、风速等细节 - 图标资源必须提供
srcset，比如<img src="cloud.svg" srcset="cloud@2x.svg 2x">，否则高清屏下模糊
<table> 的语义边界不能靠 CSS 打破
有人试图用 CSS 把表格“伪装”成卡片布局，比如给 <tr> 加 display: block，再用 Grid 排图标和文字 —— 这会让数据失去表格语义，Excel 导入、打印样式、辅助技术全部失效。
气象数据本质是二维结构化数据，表格就是最合适的载体。排版问题应从单元格内部微调解决，而不是否定表格本身。
- 图标位置不统一？检查是否所有
<img>都设置了相同height和vertical-align - 文字换行压住图标？给
<td>设white-space: nowrap或word-break: keep-all，而非删减字段 - 想突出某列（如高温预警）？用
background-color和font-weight，别拆单元格结构
图标和文字的排版逻辑，归根结底是“对齐基准线 + 可预测的盒模型 + 语义不妥协”。一旦开始用 Flex/Grid 替代 <tr><td>，就等于放弃表格存在的理由。
