Dark Mode Table Template

Integrate your data seamlessly into a dark theme with this sleek and modern dark mode table.

Designed with appropriate contrast and subtle coloring, this table provides excellent readability on dark backgrounds, reducing eye strain for users in low-light environments.

Screenshot of a stylish table with a dark background and light-colored text.

Get Source Code → Preview →

About this Dark Mode Table

Designing for dark mode is more than just inverting colors. This template uses a carefully selected color palette to ensure text is legible without being uncomfortably bright. The background is a dark charcoal gray, not pure black, which is easier on the eyes. Borders and dividers are subtle shades of gray, providing structure without harsh lines. This table will feel right at home in any modern application or website that offers a dark theme option.

Key Features:

High Readability: The color scheme is chosen for optimal contrast, making text clear and easy to read.
Sleek & Modern Aesthetic: The dark background and clean lines provide a sophisticated, high-tech look.
Subtle Dividers: Faint borders define rows without creating visual noise.
Hover Effect: A subtle background change on hover provides interactive feedback to the user.

Ideal Use Cases:

Websites and web apps with a dark theme toggle.
Admin dashboards for technical products (e.g., server monitoring).
Trading or financial application interfaces.
Any UI where a dark, focused environment is preferred.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the dark mode table:

.dark-mode-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0e0e0; /* Main text color (light gray) */
}

.dark-mode-table thead th {
    padding: 12px 15px;
    background-color: #2c2c2c; /* Slightly lighter than the main bg for headers */
    border-bottom: 2px solid #444; /* A stronger border for the header */
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff; /* Pure white for headers for emphasis */
}

.dark-mode-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #333; /* Very subtle row divider */
}

/* Zebra-striping can also work in dark mode, but here we opt for a hover effect */
.dark-mode-table tbody tr:hover {
    background-color: #252525; /* A subtle highlight on hover */
}

/* Remove border on the last row */
.dark-mode-table tbody tr:last-child td {
    border-bottom: none;
}

.dark-mode-table .code {
    font-family: 'SF Mono', 'Courier New', monospace;
    background-color: #3a3a3a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.dark-mode-table .status-ok {
    color: #4caf50; /* Green */
    font-weight: bold;
}
.dark-mode-table .status-failed {
    color: #e57373; /* Red */
    font-weight: bold;
}

</style>

<div class="dark-mode-container">
    <table class="dark-mode-table">
        <thead>
            <tr>
                <th scope="col">Commit ID</th>
                <th scope="col">Branch</th>
                <th scope="col">Message</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class="code">a1b2c3d</span></td>
                <td><span class="code">main</span></td>
                <td>Fix critical login bug</td>
                <td class="status-ok">Build OK</td>
            </tr>
            <tr>
                <td><span class="code">e4f5g6h</span></td>
                <td><span class="code">feature/new-dashboard</span></td>
                <td>Add analytics widgets</td>
                <td class="status-ok">Build OK</td>
            </tr>
            <tr>
                <td><span class="code">i7j8k9l</span></td>
                <td><span class="code">feature/new-dashboard</span></td>
                <td>Refactor chart components</td>
                <td class="status-failed">Build Failed</td>
            </tr>
            <tr>
                <td><span class="code">m0n1o2p</span></td>
                <td><span class="code">main</span></td>
                <td>Update documentation links</td>
                <td class="status-ok">Build OK</td>
            </tr>
        </tbody>
    </table>
</div>

View Output