Menu
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>
207
When adding a table to a web page, by default, it's aligned to the left side of the page or container, as shown below. The HTML source code for the table above is the following. To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag.
By default, the alignment of a table is towards the left, but by using the margin property in CSS, we can align it at the center. If we set the value of margin-left and margin-right to auto, then the browsers show the table centered.
Give width to table, and set margin auto horizontally.
table {
width:500px;
margin: 10px auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
