正文

html表格居中 html表格居中代码怎么写

小编
小编 V管理员 /0 评论 /54 阅读
1222
欧意国内注册

HTML表格居中

在HTML中，我们可以使用CSS来控制元素的样式，包括文本对齐方式，如果我们想要让一个表格居中，我们可以使用text-align: center;这个属性，这只能使表格中的文本居中，而不能使整个表格居中，为了实现整个表格的居中，我们需要使用一些额外的技巧。

我们需要创建一个包含表格的容器，并设置其宽度和高度，我们可以使用margin: auto;来实现容器的居中，我们需要将表格的宽度设置为100%，以确保它能够填充整个容器。

以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 50%;
  height: 300px;
  margin: auto;
}
table {
  width: 100%;
  text-align: center;
}
</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>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</div>
</body>
</html>

在这个示例中，我们创建了一个包含表格的容器，并将其宽度设置为50%，我们将表格的宽度设置为100%，并将其文本对齐方式设置为居中，这样，整个表格就会居中显示在页面上。