在HTML中，我们可以使用CSS样式来设置表格居中，有多种方法可以实现表格的居中，以下是一些常见的方法：
（图片来源网络，侵删）
1、使用margin属性
我们可以通过设置表格的margin属性来实现表格的居中，将表格的左右margin设置为auto，这样表格就会在其父容器中水平居中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
marginleft: auto;
marginright: auto;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
2、使用textalign属性
另一种方法是通过设置父容器的textalign属性为center，这样表格就会在其父容器中水平居中，这种方法适用于表格是其父容器的唯一子元素的情况。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
textalign: center;
}
</style>
</head>
<body>
<div class="container">
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</div>
</body>
</html>
3、使用flexbox布局
我们还可以使用flexbox布局来实现表格的居中，将父容器的display属性设置为flex，然后设置justifycontent属性为center，这样表格就会在其父容器中水平居中，这种方法适用于表格是其父容器的多个子元素之一的情况。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justifycontent: center;
}
</style>
</head>
<body>
<div class="container">
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</div>
</body>
</html>
4、使用grid布局（CSS Grid）
我们还可以使用grid布局来实现表格的居中，将父容器的display属性设置为grid，然后设置justifyitems和alignitems属性为center，这样表格就会在其父容器中水平和垂直居中，这种方法适用于表格是其父容器的多个子元素之一的情况，注意，我们需要设置一个网格轨道（grid track）来放置表格，这里我们设置一个名为"table"的网格轨道，并将其与表格关联，我们还需要设置一个网格单元格（grid cell），以便将表格放置到正确的位置，我们需要设置表格的宽度为100%，以便它填充整个网格单元格。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/440234.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
