Compact Table Template

Display more data in less space with this compact table design, ideal for information-rich interfaces.

When screen real estate is at a premium, this template minimizes whitespace to fit as much content as possible without looking cluttered.

Screenshot of a dense data table with minimal padding between cells and a smaller font.

Get Source Code Preview

About this Compact Table

The core principle of this table is information density. By reducing the padding inside cells and using a slightly smaller font size, it allows for a significantly larger amount of data to be visible within the same screen area. It's designed to be functional and efficient, making it a perfect choice for interfaces where users need to scan and process large volumes of data quickly.

Features

High Information Density: Maximizes the amount of visible data by minimizing wasted space.
Reduced Padding & Font Size: The two key CSS changes that enable the compact design.
Clean & Minimalist: Simple row dividers maintain structure without adding visual noise.
Ideal for Dashboards: Purpose-built for admin panels, monitoring UIs, and data-heavy applications.

Ideal Use Cases

Displaying application or server logs.
Admin dashboards showing lists of users, orders, or posts.
Financial data tickers or reports.
Any UI where maximizing the amount of visible data is a top priority.

Dependencies

None. This template uses only pure HTML and CSS.

Accessibility Notes

This design is a conscious trade-off that prioritizes information density. While the semantic structure using thead and scoped headers is accessible to screen readers, the reduced font size and tight spacing may pose a challenge for users with visual impairments. Consider your audience when choosing this template.

Code

Here's the full code for the compact table template:

.table-compact thead th {
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.table-compact th,
.table-compact td {
    text-align: left;
    /* Reducing padding significantly for a compact look */
    padding: 5px 8px; 
    border-bottom: 1px solid #e9ecef;
}

/* Optional: remove the bottom border on the last row for a cleaner look */
.table-compact tbody tr:last-of-type td {
    border-bottom: none;
}
</style>

<table class="table-compact">
    <thead>
        <tr>
            <th scope="col">Timestamp</th>
            <th scope="col">Service</th>
            <th scope="col">Level</th>
            <th scope="col">Message</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2024-05-22 10:01:05</td>
            <td>auth-service</td>
            <td>INFO</td>
            <td>User 'pgriffin' logged in successfully from IP 192.168.1.10.</td>
        </tr>
        <tr>
            <td>2024-05-22 10:01:12</td>
            <td>api-gateway</td>
            <td>DEBUG</td>
            <td>Request received for endpoint /v1/data.</td>
        </tr>
        <tr>
            <td>2024-05-22 10:01:15</td>
            <td>database-svc</td>
            <td>WARN</td>
            <td>Query time exceeded 500ms for SELECT * FROM users.</td>
        </tr>
        <tr>
            <td>2024-05-22 10:01:21</td>
            <td>auth-service</td>
            <td>ERROR</td>
            <td>Failed login attempt for user 'admin' from IP 203.0.113.5.</td>
        </tr>
         <tr>
            <td>2024-05-22 10:02:00</td>
            <td>worker-1</td>
            <td>INFO</td>
            <td>Job #5421 completed successfully in 3.2s.</td>
        </tr>
    </tbody>
</table>

View Output