Shadowed Table Template

Lift your data off the page with this clean table design featuring a subtle box shadow.

This simple CSS effect adds a sense of depth and dimension, making the table feel like a modern UI component that is elevated from the background.

Screenshot of a table with a soft drop shadow, making it appear to float.

Get Source Code → Preview →

About this Shadowed Table

This template's primary feature is the CSS box-shadow property. By applying a soft, diffused shadow to the entire table element, it creates an illusion of depth and separation from the page's background. Paired with rounded corners, the effect is even more pronounced, making the table resemble a modern "card" or "panel" UI element. Itâ€™s a very popular and effective technique for modernizing a simple data grid without adding significant complexity.

Key Features:

Depth & Dimension: The box-shadow makes the table stand out from the page.
Modern UI Feel: Mimics the "card" style prevalent in many contemporary web designs and applications.
Clean and Subtle: The shadow is soft and understated, adding sophistication without being distracting.
Easy to Adjust: The shadow's size, blur, and color can be easily modified in the CSS to suit your design.

Ideal Use Cases:

Dashboards where the table is the main UI component.
On pages with a colored or textured background where separation is needed.
To visually group the table as a single, cohesive element.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the shadowed table:

.shadow-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Helvetica Neue', Arial, sans-serif;

/* The Key Styles */
    background-color: #ffffff; /* Table must have a background color for shadow to work well */
    border-radius: 8px;
    /* The box-shadow property: x-offset y-offset blur-radius spread-radius color */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}

.shadow-table thead th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    /* Border on the bottom of the header */
    border-bottom: 2px solid #f0f0f0; 
}
/* Apply top-left and top-right radius to header cells */
.shadow-table thead th:first-child {
    border-top-left-radius: 8px;
}
.shadow-table thead th:last-child {
    border-top-right-radius: 8px;
}

.shadow-table tbody td {
    padding: 16px;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
}
.shadow-table tbody tr:last-child td {
    border-bottom: none;
}
</style>

<div class="shadow-table-container">
    <table class="shadow-table">
        <thead>
            <tr>
                <th scope="col">Payment ID</th>
                <th scope="col">Source</th>
                <th scope="col">Date</th>
                <th scope="col">Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>PAY-987654</td>
                <td>Online Store</td>
                <td>2024-08-22</td>
                <td>$199.00</td>
            </tr>
            <tr>
                <td>PAY-987653</td>
                <td>In-Store POS</td>
                <td>2024-08-22</td>
                <td>$75.50</td>
            </tr>
            <tr>
                <td>PAY-987652</td>
                <td>Subscription Renewal</td>
                <td>2024-08-21</td>
                <td>$29.99</td>
            </tr>
            <tr>
                <td>PAY-987651</td>
                <td>Online Store</td>
                <td>2024-08-20</td>
                <td>$350.00</td>
            </tr>
        </tbody>
    </table>
</div>

View Output