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值，我们可以轻松地调整元素在页面中的位置，并使它们看起来更整洁。
文章说明:
本文原创发布于探乎站长论坛，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。
也许前端能做的事情也有很多哦
社区管理员:
暂无管理员
发布评论
