CSS 两个HTML表格并排显示，居中在页面上

在本文中，我们将介绍如何使用CSS来实现将两个HTML表格并排显示，并且让它们居中在页面上的效果。

阅读更多：CSS 教程

居中对齐表格

要想让两个表格并排显示，并且居中在页面上，我们可以先将它们放置在一个父容器中，然后通过CSS样式将父容器居中对齐。接下来，我们将逐步介绍实现该效果的步骤。

首先，我们需要创建一个HTML结构，包含一个用于容纳两个表格的父容器和两个子容器，分别用于放置每个表格。HTML代码如下所示：

<div class="container">
  <div class="table">
    <!-- 第一个表格内容 -->
  </div>
  <div class="table">
    <!-- 第二个表格内容 -->
  </div>
</div>

接下来，我们可以使用CSS来对这些元素进行样式设置。具体步骤如下：

为父容器设置样式，并通过display: flex;和justify-content: center;将其内部元素居中对齐。代码如下：

.container {
  display: flex;
  justify-content: center;
}

为每个子容器设置样式，并给它们添加一些边框和内边距，以及其他需要的样式。代码如下：

.table {
  border: 1px solid #000;
  padding: 10px;
  /* 其他样式设置 */
}

最后，我们可以在每个子容器中放置表格内容，并根据需要进行样式调整。示例代码如下：

<div class="container">
  <div class="table">
    <table>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
      </tr>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
      </tr>
      <!-- 表格内容 -->
    </table>
  </div>
  <div class="table">
    <table>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
      </tr>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
      </tr>
      <!-- 表格内容 -->
    </table>
  </div>
</div>

通过以上步骤，我们可以实现将两个表格并排显示，并且居中在页面上的效果。