Shipping Rates Table Template

Clearly communicate your shipping options and costs with this easy-to-read rates table.

Designed for clarity, this template helps customers make informed decisions about their delivery options by presenting all the necessary information in one simple grid.

Screenshot of a shipping rates table showing different methods, delivery times, and costs.

Get Source Code → Preview →

About this Shipping Rates Table

Transparency in shipping costs is essential for e-commerce. This template provides a straightforward way to display different shipping methods, their estimated delivery times, and their associated costs. The design is simple and clean, with a clear separation between the header and the data rows. A subtle highlight on one row can be used to indicate a "Recommended" or "Free Shipping" option, helping to guide customer choice. The formatting is user-friendly and avoids confusion at a critical stage of the customer journey.

Key Features:

Clear & Concise: Organizes shipping information in an easy-to-understand format.
Highlighted Option: A dedicated CSS class (.row-highlight) to emphasize a specific shipping method.
User-Friendly Design: Minimalist styling ensures the table is easy to read and doesn't overwhelm the user.
Easily Customizable: The content and styling can be quickly adapted for any region or set of shipping carriers.

Ideal Use Cases:

On an FAQ or "Shipping Information" page.
As part of the checkout process to let users choose their preferred method.
In a customer service portal to explain delivery options.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the shipping rates table:

.shipping-rates-table caption {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
    color: #333;
}

.shipping-rates-table thead th {
    padding: 12px 18px;
    background-color: #f9fafb;
    border-bottom: 2px solid #e0e0e0;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
}
.shipping-rates-table .th-right {
    text-align: right;
}

.shipping-rates-table tbody td {
    padding: 15px 18px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

.shipping-rates-table tbody tr:last-child td {
    border-bottom: none;
}
.shipping-rates-table .service-method {
    font-weight: 600;
    color: #222;
}

.shipping-rates-table .cost {
    text-align: right;
    font-weight: 600;
    color: #222;
}

/* Highlighting a specific row */
.shipping-rates-table .row-highlight {
    background-color: #fef9e7;
    font-weight: bold;
}
.shipping-rates-table .row-highlight td:first-child::before {
    content: '\2605'; /* Star icon */
    margin-right: 8px;
    color: #f1c40f;
}

</style>

<table class="shipping-rates-table">
    <caption>Shipping Rates for Your Area</caption>
    <thead>
        <tr>
            <th scope="col">Shipping Method</th>
            <th scope="col">Estimated Delivery</th>
            <th scope="col" class="th-right">Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row-highlight">
            <td class="service-method">Standard Ground</td>
            <td>5-7 Business Days</td>
            <td class="cost">FREE</td>
        </tr>
        <tr>
            <td class="service-method">Expedited</td>
            <td>2-3 Business Days</td>
            <td class="cost">$15.00</td>
        </tr>
        <tr>
            <td class="service-method">Overnight</td>
            <td>1 Business Day</td>
            <td class="cost">$35.00</td>
        </tr>
    </tbody>
</table>

View Output