Zebra Striped Table Template

Improve data readability with this classic zebra-striped table that highlights each row with an alternating background color.

This simple CSS technique makes it significantly easier for users to scan and follow rows across large datasets, reducing the chance of them losing their place.

Screenshot of an HTML table with alternating light grey and white rows.

Get Source Code → Preview →

About this Table Template

The "Zebra Striped" or "Alternating Rows" table is a fundamental design pattern for presenting tabular data. By applying a subtle background color to every other row, it creates a visual rhythm that guides the user's eye across the page. This template provides a clean, modern, and responsive starting point for any data-heavy content.

Key Features:

Improved Readability: Alternating row colors make it easy to differentiate between rows, especially in tables with many columns.
Lightweight & Fast: Achieved with a single, simple CSS rule. No JavaScript or heavy frameworks required.
Responsive by Default: On smaller screens, the table will scroll horizontally without breaking your page layout.
Easy to Customize: The colors, padding, and fonts are defined with straightforward CSS classes, making customization simple.

Ideal Use Cases:

User lists or employee directories.
Financial reports and statements.
Pricing and feature comparisons.
Event schedules or agendas.
Any large dataset that needs to be easily scannable.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility Notes:

This template uses semantic thead, tbody, and caption elements. Table headers (th) use the scope="col" attribute to programmatically associate them with their respective columns, which is essential for screen reader users.

Code

Here's the full code for the zebra striped table template:

.table-zebra {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.table-zebra caption {
    caption-side: bottom;
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    padding: 10px 0;
}

.table-zebra thead {
    background-color: #2c3e50; /* A dark blue-grey header */
    color: #ffffff;
}

.table-zebra th, 
.table-zebra td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dddddd;
}

/* This is the magic for the zebra-striping */
.table-zebra tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.table-zebra tbody tr:last-of-type {
    border-bottom: 2px solid #2c3e50;
}

/* Optional: Add a hover effect for better user interaction */
.table-zebra tbody tr:hover {
    background-color: #e2e8f0;
    cursor: pointer;
}
</style>

<div class="table-container">
    <table class="table-zebra">
        <caption>List of Active Users as of Today</caption>
        <thead>
            <tr>
                <th scope="col">User ID</th>
                <th scope="col">Full Name</th>
                <th scope="col">Email Address</th>
                <th scope="col">Role</th>
                <th scope="col">Last Login</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>USR-001</td>
                <td>Arthur Dent</td>
                <td>adent@example.com</td>
                <td>Researcher</td>
                <td>2024-05-20</td>
            </tr>
            <tr>
                <td>USR-002</td>
                <td>Ford Prefect</td>
                <td>fprefect@example.com</td>
                <td>Journalist</td>
                <td>2024-05-21</td>
            </tr>
            <tr>
                <td>USR-003</td>
                <td>Zaphod Beeblebrox</td>
                <td>zbeeblebrox@example.com</td>
                <td>President</td>
                <td>2024-05-18</td>
            </tr>
            <tr>
                <td>USR-004</td>
                <td>Trisha McMillan</td>
                <td>tricia@example.com</td>
                <td>Astrophysicist</td>
                <td>2024-05-21</td>
            </tr>
            <tr>
                <td>USR-005</td>
                <td>Marvin</td>
                <td>paranoid.android@example.com</td>
                <td>Robot</td>
                <td>2024-05-19</td>
            </tr>
        </tbody>
    </table>
</div>

View Output