html怎样把表格居中

在HTML中，将表格居中的方法有很多种，以下是一些常见的方法：

（图片来源网络，侵删）

1、使用<center>标签

在HTML4中，可以使用<center>标签将整个表格居中，这种方法在HTML5中已经被废弃，因为<center>标签被认为是对SEO不友好的。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 50%;
  bordercollapse: collapse;
}
</style>
</head>
<body>
<center>
  <table>
    <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>
</center>
</body>
</html>

2、使用CSS样式居中

可以使用CSS样式将表格居中，这种方法不受HTML版本的影响，因此更加推荐。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: block;
  marginleft: auto;
  marginright: auto;
}
table {
  width: 50%;
  bordercollapse: collapse;
}
</style>
</head>
<body>
<div class="center">
  <table>
    <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>

3、使用flex布局居中

可以使用flex布局将表格居中，这种方法适用于现代浏览器，并且具有良好的兼容性。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset："UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<style>
.container {
  display: flex;
  justifycontent: center;
  alignitems: center;
  height: 100vh; /* 使容器占据整个视口高度 */
}
table {
  width: 50%; /* 根据需要调整表格宽度 */
  bordercollapse: collapse; /* 合并相邻边框 */
}
</style>
</head>
<body>
<div class="container">
  <table>
    <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>ss">/* CSS样式 */*/

	



	

	/* HTML结构 */

	



	

	/* CSS样式 */*/

	



	

	/* HTML结构 */

	



	

	/* CSS样式 */*/

	



	

	/* HTML结构 */

	



	

	/* CSS样式 */*/

	



	

	/* HTML结构 */

	

	<!使用CSS样式居中 >
<!使用flex布局居中 >>

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/360048.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。

html怎样把表格居中

发表回复