center table in HTML | 易学教程

问题

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>

回答1:

Give width to table, and set margin auto horizontally.

table {
  width:500px;
  margin: 10px auto;
}

回答2:

Try the below

<table style="margin:0px auto; width:500px">

回答3:

<div style="text-align:center">    
   <table style="display: inline-table;">    
   </table>
</div>

回答4:

Edit the table tag like below

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

and then check.

回答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:

Instead of <div style="text-align:center"> you could write <div style="width:600px;margin:0 auto">
Which gives you a div with the width of 600 pixels and centers the div in the parent element.

回答7:

Add margin: 0px auto to your table tag

回答8:

you can put the style in the table

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

However I do suggest that you use a style sheet and not inline styles

来源：https://stackoverflow.com/questions/13469383/center-table-in-html

标签

html

alignment

html-table