In this tutorial I shall show you how you can align two tables side by side in html using CSS.
Let’s start step by step.
Create new basic html document
In the above screenshot you can see I have created a basic html5 document.
Now let’s add a table in our document.
Adding table in html document
In the above screenshot you can see I have created a simple html table with some dummy data.
I have created a two columns table with three rows.
- First row is header row which contains table header cols
- Second and third rows are the content rows with table data cols.
Now let’s render this table in our web browser to see the table structure.
Render html table in web browser
In the above screenshot you can see that a simple basic html5 table is rendered in the web browser.
Now let’s make it more readable by applying some CSS.
Apply some CSS to our HTML table
In the above screenshot you can see I have applied some css to our table to make it more readable and nice and clean.
Now let’s render it again in our web browser to see the changes.
In the above screenshot you can see how beautiful this table is looking now.
Now let’s duplicate this table html to make another table.
Duplicate html table and wrap them in container div
In the above screenshot you can checkout I have duplicated the table and wrapped them into a div and added a class named “container”.
Now let’s align both tables side by side in html using CSS
Align two tables side by side in html using CSS
In the above screenshot you can see that I have added a class in the first table.
And in the second above screenshot you can see I have added a flex property to “container” class and added “20px” margin from right to “table-1” class.
Now let’s see the changes in the web browser.
Congratulations you have successfully learned how to align two tables side by side in html using CSS.