How to Create a Striped Table with CSS

Author:

Introduction

Striped tables are a popular design pattern used to enhance readability by alternating the background color of table rows. This creates a "zebra stripe" effect, making it easier for users to distinguish between rows. In this tutorial, you'll learn how to create a striped table using CSS.

Development Steps

  1. Create Basic HTML Table Structure: Set up a simple table with headings and rows of data.
  2. Style the Table with CSS: Use CSS to create zebra stripes, along with other styles to improve readability.
  3. Add Advanced Styling: Enhance the table with hover effects and responsive design.

Step 1: Create a Basic HTML Table Structure

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

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

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="striped-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>Delhi</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>Mumbai</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>Pune</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Explanation:

  • The table contains a thead for the column headings (Name, Age, City) and a tbody with rows of data.
  • We’ll use CSS to style this table and add striped rows.

Step 2: Style the Table with CSS

Now, we’ll style the table to add zebra stripes, borders, and padding for improved 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;
        }

        /* 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:

  • Padding and Borders: th and td are given padding for better spacing. td also has a bottom border for a clean separation between rows.
  • Table Header Styling: The th cells have a blue background, white text, and uppercase text for a clean, modern look.
  • Zebra Stripes: Using nth-child(even), every even row in the tbody is given a light gray background (#f2f2f2), creating the striped effect.

Step 3: Add Hover Effects and Responsive Design

To further enhance the table, we’ll add a hover effect and responsive styles to ensure it looks good on smaller screens.

<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;
        }

        /* Hover effect for table rows */
        tbody tr:hover {
            background-color: #e9ecef;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .table-container {
                width: 100%;
            }

            th, td {
                font-size: 14px;
                padding: 10px;
            }
        }
    </style>
</head>

Explanation:

  • Hover Effect: When a user hovers over a table row, the background color changes to a light gray (#e9ecef) to provide a visual cue.
  • Responsive Design: The media query ensures the table adapts to smaller screens by adjusting the padding and font size for th and td.

Complete Example

Here’s the complete HTML and CSS code for creating a striped table with zebra stripes, hover effects, and responsive design:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Striped 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;
        }

        /* Hover effect for table rows */
        tbody tr:hover {
            background-color: #e9ecef;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .table-container {
                width: 100%;
            }

            th, td {
                font-size: 14px;
                padding: 10px;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="striped-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>Delhi</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>Mumbai</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>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 guide, you learned how to create a striped table using CSS. You applied zebra stripes using nth-child(even), added hover effects to improve interactivity, and ensured the table is responsive for different screen sizes. This type of table is great for displaying structured data in a clean, readable format.

Comments

Post a Comment

Leave Comment