如何在HTML中实现文本与表格左右并排显示？

嘿，这个问题太常见啦！默认情况下HTML里的表格和文本都是块级元素，会各自占据一行，所以文本总是跑到表格下面。要让它们并排显示在左侧或右侧，有几种实用的方法，我给你一步步讲清楚：

这是比较传统的实现方式，通过让表格脱离正常文档流，让文本环绕它：

<style>
  /* 表格左浮动，文本在右侧 */
  .table-float-left {
    float: left;
    margin-right: 20px; /* 给文本留些间距，避免挤在一起 */
    border: 1px solid #ccc;
  }

  /* 表格右浮动，文本在左侧 */
  .table-float-right {
    float: right;
    margin-left: 20px;
    border: 1px solid #ccc;
  }

  /* 清除浮动，防止父容器塌陷 */
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<!-- 表格在左，文本在右 -->
<div class="clearfix">
  <table class="table-float-left">
    <tr><td>第一行</td></tr>
    <tr><td>第二行</td></tr>
  </table>
  <p>这是表格右侧的文本，因为表格设置了左浮动，文本就自动跑到右边啦。如果想让文本在左边，只需要把表格的float改成right，margin换成margin-left就行。</p>
</div>

<!-- 表格在右，文本在左 -->
<div class="clearfix" style="margin-top: 20px;">
  <table class="table-float-right">
    <tr><td>第一行</td></tr>
    <tr><td>第二行</td></tr>
  </table>
  <p>这是表格左侧的文本，表格右浮动后，文本就会出现在它左边。记得给父容器加clearfix类，不然父元素可能会因为浮动元素的脱离而高度塌陷哦。</p>
</div>

Flexbox是现代CSS布局的首选，它灵活且容易控制，完全不用操心浮动的塌陷问题：

<style>
  .flex-wrap {
    display: flex;
    gap: 20px; /* 直接设置元素之间的间距，比margin更省心 */
    align-items: flex-start; /* 让表格和文本顶部对齐，默认是垂直居中 */
  }
</style>

<!-- 文本在左，表格在右 -->
<div class="flex-wrap">
  <p>这是表格左侧的文本，用Flexbox布局的话，只需要给父容器设置display: flex，里面的元素就会自动并排。</p>
  <table border="1">
    <tr><td>表格内容1</td></tr>
    <tr><td>表格内容2</td></tr>
  </table>
</div>

<!-- 表格在左，文本在右，直接调换顺序即可 -->
<div class="flex-wrap" style="margin-top: 20px;">
  <table border="1">
    <tr><td>表格内容1</td></tr>
    <tr><td>表格内容2</td></tr>
  </table>
  <p>这是表格右侧的文本，要是不想改HTML结构，还可以用order属性调整顺序——比如给表格加order:2，文本加order:1，就能实现文本在左表格在右啦。</p>
</div>

Grid是二维布局系统，适合更复杂的排版，但用来实现简单的并排也非常顺手：

<style>
  .grid-wrap {
    display: grid;
    grid-template-columns: auto 1fr; /* 表格宽度自适应，文本占据剩余所有空间 */
    gap: 20px;
    align-items: flex-start;
  }
</style>

<!-- 表格在左，文本在右 -->
<div class="grid-wrap">
  <table border="1">
    <tr><td>表格内容</td></tr>
  </table>
  <p>这是表格右侧的文本，Grid布局可以精确控制每一列的宽度，比如你可以把第一列设为200px，第二列用1fr让它自动填充剩余空间。</p>
</div>

<!-- 文本在左，表格在右，调换顺序就行 -->
<div class="grid-wrap" style="margin-top:20px;">
  <p>这是表格左侧的文本，Grid布局同样能轻松搞定这种横向排列的需求，而且响应式调整也很方便。</p>
  <table border="1">
    <tr><td>表格内容</td></tr>
  </table>
</div>

小总结 #

如果只是简单的并排需求，Flexbox是最推荐的方案——代码简洁，逻辑清晰，还不会有浮动带来的各种坑。Grid则适合未来可能需要更复杂布局的场景，扩展性更强。

内容的提问来源于stack exchange，提问作者Arnab Maiti