Spacious Table

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

.table-spacious thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: #555;
    /* Thick bottom border for a strong header separation */
    border-bottom: 2px solid #333;
}

.table-spacious th,
.table-spacious td {
    text-align: left;
    /* The key property: generous padding */
    padding: 20px 20px;
    /* Subtle bottom border for row separation */
    border-bottom: 1px solid #e0e0e0;
}

/* Removes the border from the very last row for a cleaner end */
.table-spacious tbody tr:last-child td {
    border-bottom: none;
}
</style>

<table class="table-spacious">
    <thead>
        <tr>
            <th scope="col">Service Plan</th>
            <th scope="col">Description</th>
            <th scope="col">Annual Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Web Hosting</td>
            <td>Reliable, high-speed hosting with 99.9% uptime guaranteed.</td>
            <td>$120</td>
        </tr>
        <tr>
            <td>Domain Registration</td>
            <td>Secure your online identity with a wide range of TLDs.</td>
            <td>$15</td>
        </tr>
        <tr>
            <td>Site Maintenance</td>
            <td>Monthly updates, security scans, and performance checks.</td>
            <td>$600</td>
        </tr>
        <tr>
            <td>SEO Consultation</td>
            <td>Expert analysis and strategy to boost your search rankings.</td>
            <td>$1,500</td>
        </tr>
    </tbody>
</table>