How To Place Tables Side by Side using HTML and CSS Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to place tables side by side using HTML and CSS. To place tables side by side, first, we create two tables using <table> tag and then apply some CSS styles to place both tables side by side.Place Tables Side by SideExample: Here, we place two Tables Side by Side using HTML and CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Tables Side by Side</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .table-container { display: flex; justify-content: space-between; margin: 20px; } .table { border-collapse: collapse; width: 45%; margin-right: 10px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <div class="table-container"> <table class="table"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Aman</td> <td>Sharma</td> <td>34</td> </tr> <tr> <td>Akash</td> <td>Singh</td> <td>24</td> </tr> <tr> <td>Shiva</td> <td>Jain</td> <td>41</td> </tr> </table> <table class="table"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>Sharma</td> <td>24</td> </tr> <tr> <td>Arun</td> <td>Singh</td> <td>32</td> </tr> <tr> <td>Sam</td> <td>Watson</td> <td>41</td> </tr> </table> </div> </body> </html> Output:Place Tables Side by Side with ResponsivenessHere, we will use media query for responsive feature. Responsive feature means, both tables stacked vertically in small screen devices.Example: Here, we place two Tables Side by Side with responsive feature using HTML and CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Responsive Tables</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .table-container { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px; } .table { border-collapse: collapse; width: 100%; margin-bottom: 10px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } /* Media query for small screens */ @media (min-width: 768px) { .table { width: 45%; margin-bottom: 0; } } </style> </head> <body> <div class="table-container"> <table class="table"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Aman</td> <td>Sharma</td> <td>34</td> </tr> <tr> <td>Akash</td> <td>Singh</td> <td>24</td> </tr> <tr> <td>Shiva</td> <td>Jain</td> <td>41</td> </tr> </table> <table class="table"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>Sharma</td> <td>24</td> </tr> <tr> <td>Arun</td> <td>Singh</td> <td>32</td> </tr> <tr> <td>Sam</td> <td>Watson</td> <td>41</td> </tr> </table> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to place two div side-by-side of the same height using CSS? V vkash8574 Follow Improve Article Tags : Project Web Technologies Geeks Premier League Web Templates Geeks Premier League 2023 +1 More Similar Reads How to Align Images Side By Side using CSS ? Images side by side means placing multiple images in a single row next to each other. This arrangement shows images in a horizontal line, making it great for photo galleries, and comparing pictures. To align images side by side using CSS, we can use flexbox or grid for layout.Table of ContentUsing t 2 min read How to Create Pricing Table using HTML and CSS ? Nowadays, every website contains pricing tables, such as e-commerce, e-tech, and even tourism websites also have pricing tables as they contain their plans, cost of plans, and information about plans to buy new facilities. So the pricing table is one of the most important parts of websites that sell 3 min read How to make a Animated Table using HTML and CSS ? Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In this article, we are going to create a Table with animation over its columns. We are going to implement it using HTML and CSS. Approa 3 min read How to place two div side-by-side of the same height using CSS? The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which 2 min read How to float three div side by side using CSS? Aligning three <div> elements side by side is a fundamental layout technique in web design. Whether you're creating a profile card section, a features row, or a three-column layout for a homepage, placing elements in a horizontal line is a common requirement.While the traditional approach reli 3 min read How to Style HTML Tables using Bootstrap ? In Bootstrap, the styling of tables can be done to enhance their appearance and layout, using classes like table, table-hover, table-bordered, and more. These classes provide options for responsive design, color schemes, borders, and hover effects, making tables visually appealing and user-friendly. 4 min read Like