How To Place Tables Side by Side using HTML and CSS

Last Updated : 13 Dec, 2023

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 Side

Example: 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:

table-placement-1

Place Tables Side by Side with Responsiveness

Here, 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>