HTML怎么让内嵌表格居中
在HTML中，有多种方法可以让内嵌表格居中，这里我们将介绍两种常用的方法：使用CSS样式和使用HTML标签。
1、使用CSS样式
要让内嵌表格居中，可以使用CSS的margin属性和text-align属性，需要为包含表格的元素设置一个外边距(margin),然后将表格的text-align属性设置为center，这样，表格就会在页面上居中显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</div>
</body>
</html>
2、使用HTML标签
除了使用CSS样式，还可以使用HTML的center标签来实现表格居中，将表格包裹在center标签内，表格就会在页面上居中显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</center>
</body>
</html>
相关问题与解答
1、如何让内嵌表格垂直居中？
答：要让内嵌表格垂直居中，可以在CSS样式中设置display属性为table,并使用vertical-align属性设置为middle，为了使表格水平居中，还需要设置margin: auto;，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: table;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<table border="1" style="width: 30%; margin: auto;">
<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>
</div>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/161312.html
微信扫一扫 