HTML的表格居中怎么打？
在HTML中，我们可以使用CSS样式来实现表格的居中，本文将详细介绍如何使用内联样式、内部样式和外部样式表的方法来实现表格居中。
内联样式
1、行内元素
对于行内元素，我们可以直接在<td>或<th>标签中添加style属性，设置text-align: center;来实现居中。
<table>
<tr>
<td style="text-align: center;">单元格1</td>
<td style="text-align: center;">单元格2</td>
</tr>
<tr>
<td style="text-align: center;">单元格3</td>
<td style="text-align: center;">单元格4</td>
</tr>
</table>
2、块级元素
对于块级元素，我们可以在外层包裹一个<div>标签，并为其添加style属性，设置margin: auto;和text-align: center;来实现居中。
<table>
<tr>
<td><div style="margin: auto; text-align: center;">单元格1</div></td>
<td><div style="margin: auto; text-align: center;">单元格2</div></td>
</tr>
<tr>
<td><div style="margin: auto; text-align: center;">单元格3</div></td>
<td><div style="margin: auto; text-align: center;">单元格4</div></td>
</tr>
</table>
内部样式
1、在HTML文件的<head>标签内添加<style>标签，定义一个CSS类，设置.center-table的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格居中示例</title>
<style>
.center-table {
width: 50%; /* 根据实际情况调整 */
text-align: center; /* 其他样式 */
}
</style>
</head>
<body>
<!-HTML代码 -->
</body>
</html>
2、将需要居中的表格放入该CSS类定义的容器中。
<table class="center-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
外部样式表(CSS)
1、在HTML文件的<head>标签内添加<link>标签，引入外部CSS文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格居中示例</title> <link rel="stylesheet" href="styles.css"> <!-CSS文件路径 --> </head> <body> <!-HTML代码 --> </body> </html>
2、在CSS文件中定义.center-table类及其样式，如果需要支持浏览器兼容性，可以使用以下写法：(注意：!important表示优先级最高)
``css /* CSS文件 */ */*/ @import url('https://fonts.lug.ustc.edu.cn/css?family=Roboto&display=swap'); body *::before, body *::after {{ margin: 0; padding: 0; box-sizing: border-box; display: table; font-family: 'Roboto', sans-serif; /* 其他样式 */}} body > div.center-table {{ display: flex; justify-content: center; align-items: center; min-height: calc(100vh);}} body > div.center-table > table {{ width: calc(50%); /* 根据实际情况调整 */}} ``
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/270463.html
微信扫一扫