[分享]css两个表格左右对齐

CSS中有许多强大的功能可用于对齐页面上的元素。在这篇文章中，我们将重点讨论如何使用CSS将两个表格左右对齐。首先，我们需要创建两个表格。我们可以使用HTML的标签来创建它们： Name Age ...

CSS中有许多强大的功能可用于对齐页面上的元素。在这篇文章中，我们将重点讨论如何使用CSS将两个表格左右对齐。

首先，我们需要创建两个表格。我们可以使用HTML的

 <table class="table1">
      <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
      </tr>
      <tr>
          <td>John</td>
          <td>25</td>
          <td>Male</td>
      </tr>
  </table>

  <table class="table2">
      <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
      </tr>
      <tr>
          <td>Mary</td>
          <td>30</td>
          <td>Female</td>
      </tr>
  </table> 

在上面的代码中，我们分别创建了两个表格，每个表格都有一个CSS类名。现在，我们需要使用CSS来使它们左右对齐。

要使两个表格左右对齐，我们可以使用CSS的float属性。我们可以将CSS样式添加到上面的HTML代码中：

 <style>
      .table1, .table2 {
          float: left;
          margin-right: 20px;
      }
  </style> 

在上面的代码中，我们定义了两个CSS类.table1和.table2，这些类分别应用于HTML中的两个表格。我们使用float: left属性值来使它们并排显示，并使用20像素的右侧外边距来提供一些间隙。

现在，如果预览我们的网页，我们将看到两个表格左右对齐，而不会出现任何重叠或间隙。

在这篇文章中，我们简短地介绍了如何使用CSS将两个表格左右对齐。使用float属性和margin值，我们可以轻松地调整元素在页面中的位置，并使它们看起来更整洁。