Status Colors Table Template (Success/Warning/Danger)

Instantly convey the meaning of your data by color-coding rows based on their status.

This template uses contextual colors (like green for "Success", yellow for "Warning", and red for "Danger") to create a powerful and immediate visual language for your data.

Screenshot of a table where rows are colored green, yellow, or red based on their status.

Get Source Code Preview

About this Status Colors Table

Also known as "conditional formatting," this technique assigns a background color to an entire row based on the data within it. By defining a set of simple, reusable CSS classes (e.g., .row-success, .row-warning, .row-danger), you can dynamically apply them to table rows to signal their state. This is an extremely effective UI pattern because it allows users to scan a large list of items and instantly spot which ones require attention, which are complete, which are pending, etc.

Features

Contextual Coloring: Uses a standard color scheme (green, yellow, red, blue) that is widely understood.
At-a-Glance Information: Allows for rapid scanning and interpretation of data.
Simple Class-Based System: Easy to apply the appropriate class to a tr element based on your application's logic.
High Contrast: The colors are chosen to be light enough that standard dark text remains legible.

Ideal Use Cases

Server or system status dashboards (e.g., Online, Maintenance, Offline).
Project management tools (e.g., Completed, In Progress, Overdue).
Customer support ticket lists (e.g., Closed, Open, Urgent).
Validation result tables (e.g., Passed, Warning, Failed).

Accessibility Notes

Color should not be the only way information is conveyed. This template ensures that a plain-text status is also present in each row, making the information accessible to users who are color-blind or using screen readers.

Code

Here's the full code for the status colors table:

.status-colors-table thead th {
    padding: 12px;
    background-color: #f2f2f2;
    border-bottom: 2px solid #ccc;
    text-align: left;
    font-weight: 600;
}

.status-colors-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}
.status-colors-table .status-text {
    font-weight: bold;
}

/* --- Status Color Classes --- */
/* You would apply one of these classes to the <tr> element */

/* Success / OK / Passed (Green) */
.row-success { background-color: #e8f5e9; }
.row-success .status-text { color: #2e7d32; }

/* Warning / Pending / In-Progress (Yellow) */
.row-warning { background-color: #fffde7; }
.row-warning .status-text { color: #f57f17; }

/* Danger / Failed / Error (Red) */
.row-danger { background-color: #ffebee; }
.row-danger .status-text { color: #c62828; }

/* Info / Neutral (Blue) */
.row-info { background-color: #e3f2fd; }
.row-info .status-text { color: #1565c0; }

</style>

<table class="status-colors-table">
    <thead>
        <tr>
            <th scope="col">System / Service</th>
            <th scope="col">Region</th>
            <th scope="col">Last Check</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row-success">
            <td>Main Website (www)</td>
            <td>US-East-1</td>
            <td>2024-08-22 10:30:00 UTC</td>
            <td class="status-text">Online</td>
        </tr>
        <tr class="row-success">
            <td>API Gateway (api)</td>
            <td>US-East-1</td>
            <td>2024-08-22 10:30:01 UTC</td>
            <td class="status-text">Online</td>
        </tr>
        <tr class="row-warning">
            <td>Worker Queue</td>
            <td>US-East-1</td>
            <td>2024-08-22 10:29:55 UTC</td>
            <td class="status-text">High Load</td>
        </tr>
        <tr class="row-danger">
            <td>Authentication Service</td>
            <td>EU-West-1</td>
            <td>2024-08-22 10:28:10 UTC</td>
            <td class="status-text">Service Interruption</td>
        </tr>
        <tr class="row-info">
            <td>Billing System</td>
            <td>US-West-2</td>
            <td>2024-08-22 10:25:00 UTC</td>
            <td class="status-text">Maintenance Mode</td>
        </tr>
    </tbody>
</table>

View Output