CODEWITHSUNDEEP
htmlalignmenthtml-table
R.S
R.S

Reputation: 219

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>

Upvotes: 8

Views: 59527

Answers (8)

Sergio Ramirez
Sergio Ramirez

Reputation: 680

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

Upvotes: 3

Maxim Pechenin
Maxim Pechenin

Reputation: 344

<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>

Upvotes: 1

svk
svk

Reputation: 4553

Edit the table tag like below

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

and then check.

Upvotes: 1

Claudio Carta
Claudio Carta

Reputation: 319

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

Upvotes: 0

Shiridish
Shiridish

Reputation: 4962

Add margin: 0px auto to your table tag

Upvotes: 0

hellozimi
hellozimi

Reputation: 1878

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.

Upvotes: 0

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Give width to table, and set margin auto horizontally.

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

Upvotes: 27

Murali Murugesan
Murali Murugesan

Reputation: 22619

Try the below

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

Upvotes: 7

Related Questions