html中table居中和表格内容居中的问题

最新推荐文章于 2025-06-08 20:30:00 发布

ITzhongzi

最新推荐文章于 2025-06-08 20:30:00 发布

阅读量10w+

点赞数 28

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： html table 居中

本文链接：https://blog.youkuaiyun.com/ITzhongzi/article/details/52593213

前端学习笔记专栏收录该内容

306 篇文章

订阅专栏

本文介绍如何在HTML中使用表格属性使整个表格居中显示，并讲解了如何利用align和valign属性实现单元格内容的水平和垂直居中。此外还提供了解决某些情况下样式失效的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于表格中的内容：：

在表格td中，有两个属性控制居中显示


align——表示左右居中——left，center，right

valign——控制上下居中——left，center，right

这两个属性综合使用，就可以让单元格的内容上下左右都居中显示。

但是有的时候吧，会失效，那么在td中设置text-align为center也可。

td {

    text-align:center;

}

关于表格居中：

有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如：

<div style="text-align:center">
                   
                        <table border="1" cellpadding="3" cellspacing="0" style="width: 60%;margin:auto">
                            <tr><td></td>                                                                                  </tr>
                            <tr>

</table></div>