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.

Key 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