在HTML中，我们可以使用CSS样式来控制表格中文字的对齐方式，以下是一些常用的方法：
1、使用<center>标签
在HTML4中，可以使用<center>标签将文本内容居中显示，这种方法在HTML5中已经被废弃，因为<center>标签被认为是过时的，不建议使用这种方法。
2、使用CSS样式
在HTML5中，我们可以使用CSS样式来控制表格中文字的对齐方式，以下是一些常用的CSS样式：
text-align: center;：将文本内容水平居中显示。
vertical-align: middle;：将文本内容垂直居中显示。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
</table>
</body>
</html>
在这个示例中，我们使用了CSS样式text-align: center;和vertical-align: middle;来控制表格中文字的对齐方式，这样，表格中的文字就会水平居中显示，并且垂直居中显示。
3、使用<thead>和<tbody>标签
在HTML5中，我们还可以使用<thead>和<tbody>标签来控制表格的结构，以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
</tbody>
</table>
</body>
</html>
在这个示例中，我们使用了<thead>和<tbody>标签来控制表格的结构，这样，表格中的表头部分会单独显示，而表格的内容部分会单独显示，这样，我们就可以分别控制表头和表格内容的对齐方式，我们可以将表头部分的对齐方式设置为左对齐，而将表格内容的对齐方式设置为居中对齐。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/349825.html
微信扫一扫 