Shipping Rates Table

<!DOCTYPE html>
<title>My Example</title>

.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>