创建 HTML
- 使用 <table> 元素。
- 添加两个 <tr> 元素并在每个元素中使用两个 <td> 元素。
<table>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
如果我们需要将 <td> 元素的文本与每个表格行 (<tr>) 的中心对齐，那么我们来对地方了。
之前，可以使用 align 属性来做到这一点，但是，它在 HTML5 中已被弃用。
不要使用该属性，而是使用 CSS text-align 属性，或者通过内联样式属性指定它。
在这个片段中，我们将展示和解释具有 text-align 属性和 style 属性的示例。
添加 CSS
- 设置 <table> 和 <td> 元素的边框。
- 为 <td> 标签添加高度和宽度属性。
- 将 <td> 标签的 text-align 属性设置为“center”，并将 vertical-align 设置为“middle”。
table,
table td {
border: 1px solid #cccccc;
}
td {
height: 80px;
width: 160px;
text-align: center;
vertical-align: middle;
}
现在，我们可以看到完整的示例。
使用 CSS text-align 属性将表格行中的文本居中的示例：
<!DOCTYPE html>
<html>
<head>
<style>
table,
table td {
border: 1px solid #cccccc;
}
td {
height: 80px;
width: 160px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
</body>
</html>
在下一个示例中，我们通过样式内联属性指定 text-align 和 vertical-align 属性。
使用样式属性将表格行中的文本居中的示例：
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 80px;
width: 160px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td style="text-align: center; vertical-align: middle;">Text</td>
<td style="text-align: center; vertical-align: middle;">Text</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">Text</td>
<td style="text-align: center; vertical-align: middle;">Text</td>
</tr>
</table>
</body>
</html>
style 属性会覆盖全局设置的样式。
它将覆盖 <style> 标签或者外部样式表中设置的任何样式。
在我们的最后一个示例中，我们使用 <thead> 和 <tbody> 元素。
其中我们可以看到我们的 <th> 元素向右对齐，而 <td> 元素位于中心。
仅居中 <td> 元素的示例：
<!DOCTYPE html>
<html>
<head>
<style>
table,
table th,
td {
border: 1px solid #cccccc;
border-collapse: collapse;
}
th,
td {
height: 80px;
width: 160px;
padding: 5px 10px;
vertical-align: middle;
}
th {
text-align: right;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</body>
</html>
日期：2020-06-02 22:14:59 来源：oir作者：oir