8

How can I center the table within a div using html?

I have placed my content within a div tag and set the text-align attribute to center like the following.

text-align: center;

This has not worked.

Below is my 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>
4

8 回答 8

27

为表格指定宽度，并水平设置边距自动。

table {
  width:500px;
  margin: 10px auto;
}
于 2012-11-20T08:46:21.813 回答
7

试试下面

<table style="margin:0px auto; width:500px">
于 2012-11-20T08:46:19.520 回答
3 
<div style="text-align:center">    
   <table style="display: inline-table;">    
   </table>
</div>
于 2014-01-02T20:37:12.457 回答
1

编辑表格标签，如下所示

 <table border="1" align="center">

然后检查。

于 2012-11-20T08:48:58.513 回答
1 
<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>
于 2012-11-20T08:53:14.750 回答
0

而不是<div style="text-align:center">你可以写<div style="width:600px;margin:0 auto">
which 给你一个宽度为 600 像素的 div 并将 div 居中在父元素中。

于 2012-11-20T08:47:03.900 回答
0

添加margin: 0px auto到您的table标签

于 2012-11-20T08:47:38.127 回答
0

您可以将样式放在表格中

<table border="1" style="margin:0 auto;">

但是我建议您使用样式表而不是内联样式

于 2012-11-20T08:48:28.117 回答