在HTML5中，我们可以使用CSS样式来控制表格的显示方式，包括表格的居中显示，以下是一些常用的方法：
1、使用margin属性
我们可以使用CSS的margin属性来控制表格的居中显示，将表格的左右margin设置为auto，就可以使表格在其父元素中水平居中。
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
2、使用text-align属性
我们也可以使用CSS的text-align属性来控制表格的居中显示，将表格的父元素的text-align属性设置为center，就可以使表格在其内部水平居中。
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
</body>
</html>
3、使用flex布局
我们还可以使用CSS的flex布局来控制表格的居中显示，将表格的父元素的display属性设置为flex，然后设置justify-content属性为center，就可以使表格在其内部水平居中。
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
</body>
</html>
以上三种方法都可以实现HTML5表格的居中显示，你可以根据实际需求选择最适合的方法。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/379120.html
微信扫一扫 