HTML中的中心表
Posted
技术标签:
【中文标题】HTML中的中心表【英文标题】：center table in HTML 【发布时间】：2012-11-08 07:04:21 【问题描述】：如何使用 html 将 table 居中在 div 中？
我已将我的内容放在div 标记中，并将text-align 属性设置为center，如下所示。
text-align: center;
这没有奏效。
下面是我的html。
<html>
<body>
<div style="text-align:center">
<p>
text test
</p>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：为表格指定宽度，并设置边距自动水平。
table
width:500px;
margin: 10px auto;
【讨论】：
【参考方案2】：试试下面的
<table style="margin:0px auto; width:500px">
【讨论】：
【参考方案3】：<div style="text-align:center">
<table style="display: inline-table;">
</table>
</div>
【讨论】：
【参考方案4】：如下编辑表格标签
<table border="1" align="center">
然后检查。
【讨论】：
不推荐使用对齐标签，请使用@R.S上面的方法【参考方案5】：<html>
<body>
<div style="text-align:center">
<p>
text test
</p>
<table border="1" style="margin: 0 auto;">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</body>
</html>
【讨论】：
【参考方案6】：你可以写<div style="width:600px;margin:0 auto">而不是<div style="text-align:center">
这会为您提供一个宽度为 600 像素的 div，并将 div 置于父元素的中心。
【讨论】：
【参考方案7】：将margin: 0px auto 添加到您的table 标签
【讨论】：
【参考方案8】：你可以把样式放在表格里
<table border="1" style="margin:0 auto;">
不过我建议您使用样式表而不是内联样式
【讨论】：
以上是关于HTML中的中心表的主要内容，如果未能解决你的问题，请参考以下文章