How To Make Two Tables Side By Side Css

Today I am going to share with you a handy CSS technique that allows you to create two tables side by side. This can be incredibly useful when you want to display data in a visually pleasing and organized manner. By using CSS, we can easily achieve this layout without relying on complex HTML structures or JavaScript.

Step 1: HTML Markup

Before we dive into the CSS magic, let’s start by setting up our HTML markup. We’ll need to create two separate tables that we want to display side by side. Here’s a basic example:


<div class="container">
  <table class="table1">
    <!-- table1 content goes here -->
  </table>

</div>


In the code snippet above, we have wrapped our tables inside a <div> with a class of “container”. This will allow us to apply the necessary CSS styles to achieve the side by side layout.

Step 2: CSS Styling

Now that we have our HTML structure in place, let’s move on to the CSS styling that will make our tables appear side by side. We will use the CSS display property and set it to inline-block. Here’s the CSS code:


.container {
  display: flex;
}

.table1, .table2 {
  display: inline-block;
  width: 50%;
}


In the CSS above, we set the .container class to display: flex. This allows the tables to be displayed side by side within the container. Next, we set the .table1 and .table2 classes to display: inline-block to make them appear next to each other. We also set the width to 50% so that each table takes up half of the container’s width.

Step 3: Personal Touches

Now that we have the basic setup and CSS styling in place, it’s time to add some personal touches to make our tables visually appealing. You can apply various CSS properties to customize the appearance of your tables, such as changing the background color, font styles, borders, and spacing.

For example, you can add the following CSS code to modify the look of your tables:


.table1 {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

.table2 {
  background-color: #e6e6e6;
  border: 1px solid #ccc;
  padding: 10px;
}


In the code above, we add a light gray background color to .table1 and a slightly darker gray background color to .table2. We also apply a 1px solid border and 10px of padding to both tables to create some visual separation.

Conclusion

By following these simple steps and utilizing CSS, you can easily create two tables side by side on your webpage. This technique is not only useful for displaying data in an organized manner, but it can also enhance the overall visual appeal of your web design. Remember to customize the appearance of your tables to match your own personal style and branding.

So go ahead and experiment with this technique to create stunning side by side tables in your web projects. Happy coding!