In this tutorial I shall show you how to align table in center of page in html.
Step 1 – Create basic html document structure
In the above screenshot you can see I have created the basic structure of the html document. So that we could create a table in our document.
Let’s create a table with some rows and cols in the body of the document.
Step 2 – Create basic html table with rows and cols
In the above screenshot you will see I have created a basic html table with some rows and columns.
Now lets render this table in the browser to see how our table is looking.
In the above screenshot you will see a table that is not properly structured or showing rows and columns. I know it is confusing but let’s solve it by adding a border attribute to our table. So that we could see rows and columns with proper representation.
In the above image you will see I have added a property “border” to the table tag. Now let’s render this to our web browser to see the changes.
In the above screenshot you will see now we can clearly see the rows and cols of our table.
Now lets center this table by adding some css to our html document.
In the above screenshot you can see I have written some CSS properties for the table to make it center.
I have added the “margin” property and given “0 auto” values first “0” represents the top-bottom margin and second “auto” represents the left-right margin and this is the magic which centers the table in our document.
Now let’s render our webpage again to see our table position.
Congratulations! You are all done. Now your table is in the center of the document.
You may also like: