在 CSS 中，要设置表格标题居中，可以使用 text-align 属性来实现。下面是具体的实现方式：
在 HTML 的表格标签
中添加 标签，用于设置表格标题。
<table>
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
在 CSS 中，使用 text-align 属性可以设置表格标题居中。
table caption {
text-align: center;
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
table th, table td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
table th {
font-weight: bold;
background-color: #eee;
}
table caption {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
</body>
</html>
使用 pre 标签显示上述代码。
<pre>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
table th, table td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
table th {
font-weight: bold;
background-color: #eee;
}
table caption {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
</body>
</html>
文章说明:
本文原创发布于探乎站长论坛，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。
也许前端能做的事情也有很多哦
社区管理员:
暂无管理员
发布评论
