​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
.table-spacious {
6
    width: 100%;
7
    border-collapse: collapse;
8
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
9
    font-size: 1rem;
10
    line-height: 1.6;
11
}
12
​
13
.table-spacious thead th {
14
    font-weight: 600;
15
    text-transform: uppercase;
16
    font-size: 0.85rem;
17
    letter-spacing: 0.5px;
18
    color: #555;
19
    /* Thick bottom border for a strong header separation */
20
    border-bottom: 2px solid #333;
21
}
22
​
23
.table-spacious th,
24
.table-spacious td {
25
    text-align: left;
26
    /* The key property: generous padding */
27
    padding: 20px 20px;
28
    /* Subtle bottom border for row separation */
29
    border-bottom: 1px solid #e0e0e0;
30
}
31
​
32
/* Removes the border from the very last row for a cleaner end */
33
.table-spacious tbody tr:last-child td {
34
    border-bottom: none;
35
}
36
</style>
37
​
38
​
39
<table class="table-spacious">
40
    <thead>
41
        <tr>
42
            <th scope="col">Service Plan</th>
43
            <th scope="col">Description</th>
44
            <th scope="col">Annual Cost</th>
45
        </tr>
46
    </thead>
47
    <tbody>
48
        <tr>
49
            <td>Web Hosting</td>
50
            <td>Reliable, high-speed hosting with 99.9% uptime guaranteed.</td>
51
            <td>$120</td>
52
        </tr>
53
        <tr>
54
            <td>Domain Registration</td>
55
            <td>Secure your online identity with a wide range of TLDs.</td>
56
            <td>$15</td>
57
        </tr>
58
        <tr>
59
            <td>Site Maintenance</td>
60
            <td>Monthly updates, security scans, and performance checks.</td>
61
            <td>$600</td>
62
        </tr>
63
        <tr>
64
            <td>SEO Consultation</td>
65
            <td>Expert analysis and strategy to boost your search rankings.</td>
66
            <td>$1,500</td>
67
        </tr>
68
    </tbody>
69
</table>