How To Center Align HTML Table

How To Center Align HTML Table

In this tutorial we will see How To Center Align HTML Table. We have used simple margin-left and margin-right CSS properties to center align HTML Table.

HTML Code

Write HTML Code of HTML Table, simple example is given below.

<table class="center">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
</tr>
<tr>
<td>Tom</td>
<td>Harry</td>
<td>87932</td>
</tr>
<tr>
<td>Sara</td>
<td>David</td>
<td>69123</td>
</tr>
</table>

CSS Code

CSS Code is given below. Simple margin-left and margin-right properties of CSS are used to center align the HTML Table. You can also add text-align:center; to center align the text of table as well.

.center
{
margin-left: auto;
margin-right: auto;
text-align:center;
}

Demo

Video Tutorial

Watch video tutorial on How To Center Align HTML Table.

Post a Comment

Previous Post Next Post