HTML5表格怎么居中
在HTML5中，我们可以使用不同的方法来使表格居中，本文将介绍几种常用的方法，并提供详细的技术介绍和示例代码。
使用CSS样式表
1、内联样式
在表格的<th>或<td>元素中，可以直接添加内联样式来设置居中对齐。
<table>
<tr>
<th style="text-align:center;">标题1</th>
<th style="text-align:center;">标题2</th>
</tr>
<tr>
<td style="text-align:center;">内容1</td>
<td style="text-align:center;">内容2</td>
</tr>
</table>
2、外部样式表
在HTML文件的<head>部分添加一个<style>标签，然后在其中定义一个CSS类，如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
.center-table {
text-align: center;
}
</style>
</head>
<body>
<table class="center-table">
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
</body>
</html>
使用CSS Flexbox布局
1、为表格添加一个包裹元素，例如<div>,并为其设置一个类名，如centered-table，在CSS中定义该类的样式，如下所示：
.centered-table {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
2、将.centered-table类应用到包含表格的<div>元素上，如下所示：
<div class="centered-table">
<table>
...
</table>
</div>
使用CSS Grid布局(仅适用于IE浏览器)
1、为表格添加一个包裹元素，例如<div>,并为其设置一个类名，如centered-table，在CSS中定义该类的样式，如下所示：
.centered-table {
display: grid;
justify-items: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
2、将.centered-table类应用到包含表格的<div>元素上，如下所示：
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/189707.html
微信扫一扫 