如何使用HTML和CSS实现两个表格标题的顶部居中对齐

调整思路 #

现在你用单独的<p>标签当标题，和表格是分开的，没法自动对齐到表格正上方。得把每个标题和对应的表格包进同一个容器里，再用CSS控制居中效果。

具体修改步骤 #

1. 调整HTML结构 #

把标题和对应表格套进同一个容器，确保二者绑定成独立模块：

<div class="table-box">
    <p class="table-title">Employee Table</p>
    <table class="table1">
        <!-- 此处填写你的表格内容 -->
    </table>
</div>
<!-- 第二个表格按同样结构处理 -->
<div class="table-box">
    <p class="table-title">第二个表格标题</p>
    <table class="table1">
        <!-- 此处填写第二个表格内容 -->
    </table>
</div>

2. 更新CSS样式 #

修改样式实现标题居中，同时优化表格布局：

/* 表格+标题的容器，控制整体排版 */
.table-box {
    float: left;
    margin-right: 20px; /* 两个表格之间留空隙，避免拥挤 */
    text-align: center; /* 让容器内的标题自动居中 */
}

.table-title {
    color: blue;
    margin: 0 0 8px 0; /* 标题和表格之间留间距，提升视觉舒适度 */
}

table.table1 {
    font-size: large;
    border: 1px solid black;
    /* 移除原有的float和display: inline-block，由容器控制布局 */
}

说明 #

• 用容器绑定标题和表格，能保证标题始终跟着对应表格走，不会出现错位。
• 容器设置text-align: center，直接让标题居中在表格正上方，无需单独给标题加居中样式。
• 由容器控制float: left实现表格并排，比直接给表格加float更稳定，不容易出现布局问题。

内容的提问来源于stack exchange，提问作者Aziz Mlayel