如何在 HTML 中将表格居中

表格是一种以有组织的方式呈现大量信息的绝佳方式。销售数据、网页流量、股票市场趋势和学生成绩是经常以表格形式呈现的信息示例。

使用HTML将表格添加到网页时，将其置于页面中心可能更具视觉吸引力。居中文本和图片通常是通过text-align类或通过CSS来完成的，但是居中表格需要不同的方法。下面提供了有关如何使表格在网页上居中的详细信息。

在 HTML 中将表格居中

将表格添加到网页时，默认情况下，它与页面或容器的左侧对齐，如下所示。
HITSMONTHTOTAL INCREASE324,497January 1998-436,699February 1998112,172
上表的 HTML源代码如下。

<table style="border:1px solid black">
  <tr>
    <td><b>HITS</b></td>
    <td><b>MONTH</b></td>
    <td><b>TOTAL INCREASE</b></td>
  </tr>
  <tr>
    <td>324,497</td>
    <td>January 1998 </td>
    <td style="text-align:center">-</td>
  </tr>
    <tr>
    <td>436,699</td>
    <td>February 1998</td>
    <td style="text-align:center">112,172</td>
  </tr>
</table>

要使此表居中，您需要添加**;margin-left:auto;margin-right:auto; *到标记中样式*属性的末尾。表格标记如下所示。

<table style="border:1px solid black;margin-left:auto;margin-right:auto;">

如上所示，更改

标记中的样式属性会导致表格以网页为中心，如下所示。
HITSMONTHTOTAL INCREASE324,497January 1998-436,699February 1998112,172
提示
您可以将参数添加到

标记中的样式属性，以使表格更具吸引力。添加填充：2px；和边框间距：20px；在数据点和边框之间添加间距以提高可读性。

标签： html 前端 javascript

本文转载自: https://blog.csdn.net/allway2/article/details/125577109
版权归原作者 allway2 所有，如有侵权，请联系我们删除。

发表评论

登录后发布评论