如何通过HTML表格展示气象预报：图标与文字混排排版方案

表格需用<thead><tbody>分区，表头用<th scope="col">，图标用带宽高的<img>内联，温度数字与单位分<span>，禁用table-layout:fixed，移动端用flex布局。

表格结构必须用 <thead> 和 <tbody> 明确分区

直接写一长串 <tr><td> 容易让图标和文字错位，尤其在响应式缩放时。浏览器对 <thead> 的表头单元格默认有 display: table-header-group 行为，能稳定锚定列宽，避免图标被文字撑开变形。

实操建议：

• 表头用 <th>，每列明确语义，比如 <th scope="col">日期</th>
• 图标统一放在 <td> 内部的 <div> 或 <span> 里，不要直接塞进 <td>
• 避免给 <td> 设固定 width，改用 min-width + white-space: nowrap 控制文字不换行

图标混排优先用 <img> 而非 CSS background-image

用 CSS 背景图会导致图标无法被屏幕阅读器识别，且 background-size: contain 在不同 DPI 屏幕下渲染模糊；而 <img> 可设 alt，支持 srcset 响应式加载，尺寸也更可控。

常见错误现象：图标在 iOS Safari 上变小、文字垂直居中失效、打印预览时图标消失。

立即学习“前端免费学习笔记（深入）”；

实操建议：

• <img src="sun.svg" alt="晴天" width="24" height="24"> —— 必须带 width 和 height，否则表格单元格高度塌陷
• 同一行文字与图标用 <span> 包裹，加 vertical-align: middle 对齐
• SVG 图标优先内联或 base64，避免额外 HTTP 请求拖慢预报加载

温度数字与单位必须拆成两个 <span>

写成 <td>26°C</td> 看似省事，但会导致单位随字体缩放比例异常、无法单独设置颜色或动画，且不利于无障碍读取（AT 工具会把 “26°C” 当作一个词朗读）。

使用场景：需要高亮最高温、给单位加灰色、做温度渐变色过渡。

实操建议：

• <td><span class="temp-num">26</span><span class="temp-unit">°C</span></td>
• 给 .temp-num 设 font-weight: bold，.temp-unit 设 font-size: 0.8em; color: #666
• 避免用 ° 实体，改用 UTF-8 字符 °，减少编码歧义

移动端窄屏下图标+文字需强制单行，禁用 table-layout: fixed

很多方案用 table-layout: fixed 配合 width 百分比强行压缩列宽，结果是图标被裁剪、文字溢出、iOS 微信内置浏览器触发横向滚动条——这不是排版问题，是布局模型误用。

性能影响：fixed 布局会让浏览器跳过自动列宽计算，但预报表格列内容长度差异大（如“多云转雷阵雨” vs “晴”），反而导致重绘卡顿。

实操建议：

• 移除所有 table-layout: fixed，靠 white-space: nowrap + min-width 控制最小列宽
• 用媒体查询在 max-width: 480px 下将 <td> 改为 display: flex; flex-direction: column; align-items: center
• 图标 <img> 加 max-width: 100%，防止超宽

复杂点在于天气描述文本长度不可控，图标尺寸又必须保持一致，所以不能只靠 CSS 自适应，得在生成 HTML 前对描述字段做截断或映射简写（如“多云转雷阵雨” → “多云→雷雨”）。这个逻辑不在样式层，而在数据准备阶段。