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.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

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

Check Demo

Video Tutorial

Watch video tutorial on How To Center Align HTML Table.