HTML5表格居中对齐
在HTML5中，我们可以使用不同的方式来使表格居中对齐，本文将详细介绍如何使用HTML5的内置标签和样式来实现表格的居中对齐。
使用CSS样式表
1、内联样式
在HTML元素中直接添加CSS样式，可以直接应用于表格。
<table>
<tr>
<td style="text-align:center;">单元格1</td>
<td style="text-align:center;">单元格2</td>
</tr>
</table>
2、内部样式
在<head>标签中添加<style>标签，定义内部样式。
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>
3、CSS类选择器(外部样式)
在<head>标签中添加<link>标签，引入外部CSS文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="centered-table">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>
在CSS文件(如styles.css)中定义样式：
.centered-table tr {
display: flex;
justify-content: center;
}
.centered-table td, .centered-table th {
flex: 1;
}
使用HTML5的内置标签属性和伪元素选择器(内部样式)
1、<center>标签已被废弃，不推荐使用，如果你仍然需要使用它，可以这样实现：
<table align="center">
<tr>
<td align="center">单元格1</td>
<td align="center">单元格2</td>
</tr>
</table>
2、<colgroup>和<col>标签可以用于设置表格列的宽度和对齐方式。
<table border="1"> <colgroup span="2"></colgroup> <colgroup><col width="50%"></col><col width="50%"></col></colgroup> <tr>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/189976.html
微信扫一扫 