不推荐用排图文，因其语义错误、响应式差、维护成本高；必须用table-layout: fixed++vertical-align: middle+display: block清除基线留白。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

不推荐用 <table> 做图片和文字的排版，语义错误、响应式差、维护成本高；真要硬上，必须用 <code>table-layout: fixed + <col> 控制列宽 + vertical-align: middle + display: block 清除图片基线留白。

为什么 <table> 不该用来排图文 <p>表格标签的语义是「二维结构化数据」，不是「视觉对齐工具」。用它排图文会直接导致：</p> <ul> <li>搜索引擎把图文块识别成“第1列：头像，第2列：姓名”，SEO 信息错乱</li> <li>屏幕阅读器按表格逻辑播报，比如读作“表格，2 列 1 行，单元格：张三”，跳过上下文</li> <li>小屏下无法自然换行，只能靠媒体查询强行折叠，代码臃肿且易失效</li> <li> <code>valign="middle" 这类 HTML 属性已被废弃，Chrome/Firefox 对多行文本支持极不稳定

table-layout: fixed 是唯一能稳住列宽的关键

没它，<col> 宽度声明无效，图片稍大一点就会撑开整列，文字被挤到下一行或溢出。必须显式设置：

• 父 <table> 加 <code>style="table-layout: fixed; width: 100%;"
• 用 <col> 显式定义列宽，例如第一列固定 120px 放图，第二列 width: auto
• <img alt="HTML怎么用表格布局排版图片和文字" > 必须设 display: block，否则底部默认留白（inline 元素基线对齐导致）

示例片段：

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

<table style="table-layout: fixed; width: 100%; border-collapse: collapse;">
  <col style="width: 120px;">
  <col style="width: auto;">
  <tr>
    <td style="vertical-align: middle; padding-right: 16px;">
      <img src="avatar.jpg" alt=""    style="max-width:90%"  style="max-width:90%" style="display: block;">
    </td>
    <td style="vertical-align: middle; line-height: 1.5;">
      <p>张三，前端工程师，专注可访问性与性能优化。</p>
    </td>
  </tr>
</table>

替代方案比硬套 <table> 更省事 <p>现代布局几乎不需要表格参与图文并排：</p> <ul> <li>单行左图右文：<code>display: flex + align-items: center + gap: 12px

图文卡片流（如文章列表）：display: grid + grid-template-columns: 80px 1fr

兼容 IE11 的底线方案：用 float: left + overflow: hidden 清浮动，但需加 min-width: 0 防文字撑破容器

头像+多行文字对齐：外层 display: flex，文字区再套 display: flex; flex-direction: column，比调 padding-top 可靠得多

真正难的不是怎么写，而是判断该不该写——如果内容复制进 Excel 能排序筛选，那用 <table> 没问题；如果只是为了看着整齐，就别碰它。</table>