​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
/* Styling is minimal to focus on the HTML structure */
6
.table-scoped {
7
    width: 100%;
8
    border-collapse: collapse;
9
    font-family: sans-serif;
10
}
11
​
12
.table-scoped caption {
13
    font-size: 1.1rem;
14
    font-weight: bold;
15
    text-align: left;
16
    padding-bottom: 10px;
17
}
18
​
19
.table-scoped th,
20
.table-scoped td {
21
    border: 1px solid #ccc;
22
    padding: 10px;
23
    text-align: center;
24
}
25
/* Left-align the row headers for clarity */
26
.table-scoped thead th,
27
.table-scoped tbody th {
28
    text-align: left;
29
    background-color: #f7f7f7;
30
}
31
​
32
</style>
33
​
34
<table class="table-scoped">
35
    <caption>Service Plan Feature Comparison</caption>
36
    <thead>
37
        <tr>
38
            <!-- This first empty cell is a known accessibility challenge. -->
39
            <!-- For simple cases, a non-breaking space is acceptable. -->
40
            <!-- For complex tables, more advanced id/headers attributes might be needed. -->
41
            <th scope="col"> </th>
42
            <th scope="col">Free Plan</th>
43
            <th scope="col">Basic Plan</th>
44
            <th scope="col">Premium Plan</th>
45
        </tr>
46
    </thead>
47
    <tbody>
48
        <tr>
49
            <th scope="row">Storage</th>
50
            <td>1 GB</td>
51
            <td>10 GB</td>
52
            <td>100 GB</td>
53
        </tr>
54
        <tr>
55
            <th scope="row">Price</th>
56
            <td>$0</td>
57
            <td>$9</td>
58
            <td>$29</td>
59
        </tr>
60
        <tr>
61
            <th scope="row">Email Support</th>
62
            <td>No</td>
63
            <td>Yes</td>
64
            <td>Yes (Priority)</td>
65
        </tr>
66
    </tbody>
67
</table>