html如何两个表格一左一右

在HTML页面开发中，实现两个表格一左一右的布局是常见需求，既可以通过传统的浮动属性实现，也可以使用更灵活的弹性盒子布局方案，两种方案各有适用场景，下面分别介绍具体实现方法。

方案一：使用float浮动属性实现

浮动是CSS中较早出现的布局方式，通过设置表格的浮动方向，可以让两个表格并排排列。首先需要在HTML中定义两个表格结构，然后给两个表格分别设置向左和向右浮动，同时需要给父容器设置清除浮动的样式，避免父容器高度塌陷。

HTML结构代码

<div class="table-container">
  <table class="left-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>28</td>
      </tr>
    </tbody>
  </table>
  <table class="right-table">
    <thead>
      <tr>
        <th>城市</th>
        <th>人口</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>北京</td>
        <td>2189万</td>
      </tr>
      <tr>
        <td>上海</td>
        <td>2487万</td>
      </tr>
    </tbody>
  </table>
</div>

CSS样式代码

.table-container {
  /* 清除浮动，避免父容器高度塌陷 */
  overflow: hidden;
  padding: 10px;
}
.left-table {
  /* 左浮动 */
  float: left;
  width: 45%;
  border-collapse: collapse;
  margin-right: 5%;
}
.right-table {
  /* 右浮动 */
  float: right;
  width: 45%;
  border-collapse: collapse;
}
/* 表格边框样式 */
table th, table td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}

方案二：使用Flex弹性盒子布局实现

Flex布局是CSS3推出的现代布局方案，相比浮动布局更灵活，适配性更好，不需要额外处理清除浮动的问题，只需要给父容器设置display为flex即可让子元素横向排列，还能轻松控制子元素的对齐方式和间距。

HTML结构代码

<div class="flex-table-container">
  <table class="flex-left-table">
    <thead>
      <tr>
        <th>商品名</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>手机</td>
        <td>3999元</td>
      </tr>
      <tr>
        <td>电脑</td>
        <td>6999元</td>
      </tr>
    </tbody>
  </table>
  <table class="flex-right-table">
    <thead>
      <tr>
        <th>订单号</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20240101001</td>
        <td>已支付</td>
      </tr>
      <tr>
        <td>20240101002</td>
        <td>待发货</td>
      </tr>
    </tbody>
  </table>
</div>

CSS样式代码

.flex-table-container {
  display: flex;
  /* 子元素横向排列 */
  flex-direction: row;
  /* 子元素两端对齐，中间留空隙 */
  justify-content: space-between;
  padding: 10px;
}
.flex-left-table, .flex-right-table {
  width: 48%;
  border-collapse: collapse;
}
/* 表格边框样式 */
table th, table td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}

两种方案对比

可以通过下面的表格对比两种方案的差异，选择适合自己项目的实现方式：

注意事项

• 两个表格的总宽度不要超过父容器的宽度，避免出现换行问题
• 如果使用浮动方案，一定要给父容器设置清除浮动的样式，否则父容器无法包裹住浮动的表格
• 表格的<table>标签如果需要添加边框，建议设置border-collapse为collapse，让边框合并为单一边框，视觉效果更整洁
• 如果页面需要适配移动端，使用Flex方案时可以通过媒体查询在小屏幕下将flex-direction改为column，让两个表格纵向排列

HTMLtablefloatCSS布局修改时间：2026-07-15 20:21:33