Heapcoding

How to align two tables side by side in HTML

Published November 23, 2021

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

how to align two tables side by side in html

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

how to align two tables side by side in html

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

how to align two tables side by side in html

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

how to align two tables side by side in html

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.

how to align two tables side by side in html

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

how to align two tables side by side in html

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

how to align two tables side by side in html

In the above screenshot you can see that I have added a class in the first table.

how to align two tables side by side in html

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.

how to align two tables side by side in html

Congratulations you have successfully learned how to align two tables side by side in html using CSS.