CSS 在网页居中显示两个 HTML 表格
在本文中，我们将介绍如何使用CSS将两个HTML表格居中显示在网页上。
阅读更多：CSS 教程
使用HTML和CSS创建两个相邻的表格
首先，我们需要在HTML中创建两个表格。请注意，这两个表格将被放在一个父容器中，并使用CSS样式来实现居中显示。以下是HTML的示例代码：
<div class="container">
<table class="table">
<tr>
<th>表格标题1</th>
</tr>
<tr>
<td>内容1</td>
</tr>
</table>
<table class="table">
<tr>
<th>表格标题2</th>
</tr>
<tr>
<td>内容2</td>
</tr>
</table>
</div>
接下来，我们需要使用CSS来设置这两个表格及其父容器的样式，并将它们居中显示。以下是CSS的示例代码：
.container {
display: flex; /* 将父容器设置为flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.table {
margin: 10px; /* 为表格之间创建一定的间距 */
border: 1px solid black; /* 添加表格边框 */
}
以上代码中，我们使用了display: flex来将父容器设置为弹性布局，并通过justify-content: center和align-items: center将表格居中对齐。另外，我们还设置了表格的边框和间距，以使其在页面上有一定的视觉效果。
示例
现在，我们来看一下将两个表格居中显示的效果。请将上述HTML和CSS代码复制到html文件和css文件中，并在浏览器中打开该html文件，即可查看效果。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<table class="table">
<tr>
<th>表格标题1</th>
</tr>
<tr>
<td>内容1</td>
</tr>
</table>
<table class="table">
<tr>
<th>表格标题2</th>
</tr>
<tr>
<td>内容2</td>
</tr>
</table>
</div>
</body>
</html>
.container {
display: flex; /* 将父容器设置为flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.table {
margin: 10px; /* 为表格之间创建一定的间距 */
border: 1px solid black; /* 添加表格边框 */
}
打开浏览器后，您应该可以看到两个表格在页面上水平居中对齐，并且它们之间有一定的间距。
总结
通过使用CSS的flex布局和相关的样式属性，我们可以轻松地将两个HTML表格居中显示在网页上。通过设置父容器的display: flex，justify-content: center和align-items: center属性，我们实现了表格的水平和垂直居中。通过设置表格的边框和间距，我们还为它们添加了视觉效果。使用这种方法，您可以根据具体的需求，轻松地在网页上布局和显示多个表格。
此处评论已关闭