How to Create a Responsive Table Using CSS

Author:

Introduction

Tables are a great way to display data, but on smaller screens, they can become difficult to read. A responsive table adapts to various screen sizes, ensuring readability across devices such as desktops, tablets, and smartphones. In this tutorial, you'll learn how to create a responsive table using HTML and CSS.

Development Steps

  1. Create Basic HTML Table Structure: Set up the table with headings and data rows.
  2. Style the Table for Large Screens: Use CSS to style the table for desktop views.
  3. Make the Table Responsive: Add CSS media queries to handle smaller screen sizes and ensure the table is user-friendly on mobile devices.

Step 1: Create a Basic HTML Table Structure

We’ll begin by creating a simple HTML table structure with headers and rows of data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Table</title>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="responsive-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>ananya@example.com</td>
                    <td>Delhi</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>rohan@example.com</td>
                    <td>Mumbai</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>meera@example.com</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>vikram@example.com</td>
                    <td>Pune</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Explanation:

  • The table contains a thead for column headers (Name, Age, Email, City) and a tbody with rows of data.
  • We’ll now style this table to make it look good on larger screens, and later we’ll ensure it works well on smaller screens.

Step 2: Style the Table for Large Screens

In this step, we’ll style the table for larger screens, such as desktops or laptops. We’ll add borders, padding, and some basic styling for headers and data cells.

<head>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Step 2: Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        td {
            border-bottom: 1px solid #ddd;
        }

        /* Zebra stripes for table rows */
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

Explanation:

  • Table Layout: The table takes up 100% of the container’s width, and the border-collapse: collapse property removes the space between the cells.
  • Padding: th and td are given padding for better readability.
  • Header Styling: th has a blue background with white text and uppercase formatting to make the headers stand out.
  • Borders and Zebra Stripes: Each td has a bottom border, and every other row has a light gray background using nth-child(even).

Step 3: Make the Table Responsive

Now, we’ll add media queries to ensure the table is responsive on smaller screens. For mobile devices, we will use a different approach where each row is displayed as a block, and data is stacked for easier readability.

<head>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        td {
            border-bottom: 1px solid #ddd;
        }

        /* Zebra stripes for table rows */
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Step 3: Make the table responsive */
        @media (max-width: 768px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }

            thead {
                display: none;
            }

            tbody tr {
                margin-bottom: 10px;
                border-bottom: 1px solid #ddd;
            }

            td {
                display: flex;
                justify-content: space-between;
                padding-left: 50%;
                position: relative;
                text-align: left;
            }

            td:before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                font-weight: bold;
            }
        }
    </style>
</head>

Explanation:

  • Responsive Table on Small Screens: For screens smaller than 768px, we hide the table headers and display the table rows as blocks.
  • Data Labels: Each td element has a before pseudo-element (td:before) that displays the column name (data label) as a bold label on the left side of each cell. We achieve this by using the content: attr(data-label) property, where data-label is the name of the column.
  • Block Layout: The entire table, along with thead, tbody, th, td, and tr, are set to display: block, making each row stack on top of each other in a vertical layout for mobile screens.

Complete Example

Here’s the complete HTML and CSS code to create a responsive table that adapts to smaller screens:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Table</title>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        td {
            border-bottom: 1px solid #ddd;
        }

        /* Zebra stripes for table rows */
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Make the table responsive */
        @media (max-width: 768px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }

            thead {
                display: none;
            }

            tbody tr {
                margin-bottom: 10px;


                border-bottom: 1px solid #ddd;
            }

            td {
                display: flex;
                justify-content: space-between;
                padding-left: 50%;
                position: relative;
                text-align: left;
            }

            td:before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                font-weight: bold;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="responsive-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="Name">Ananya</td>
                    <td data-label="Age">25</td>
                    <td data-label="Email">ananya@example.com</td>
                    <td data-label="City">Delhi</td>
                </tr>
                <tr>
                    <td data-label="Name">Rohan</td>
                    <td data-label="Age">30</td>
                    <td data-label="Email">rohan@example.com</td>
                    <td data-label="City">Mumbai</td>
                </tr>
                <tr>
                    <td data-label="Name">Meera</td>
                    <td data-label="Age">22</td>
                    <td data-label="Email">meera@example.com</td>
                    <td data-label="City">Bangalore</td>
                </tr>
                <tr>
                    <td data-label="Name">Vikram</td>
                    <td data-label="Age">35</td>
                    <td data-label="Email">vikram@example.com</td>
                    <td data-label="City">Pune</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a responsive table using CSS. By using media queries and the attr(data-label) property, we made the table adapt to different screen sizes, ensuring that it remains readable and user-friendly on both large and small devices. This approach is perfect for displaying data in a compact, mobile-friendly format.

Comments

Post a Comment

Leave Comment