Table With Scoped Headers

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

.table-scoped caption {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: left;
    padding-bottom: 10px;
}

.table-scoped th,
.table-scoped td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}
/* Left-align the row headers for clarity */
.table-scoped thead th,
.table-scoped tbody th {
    text-align: left;
    background-color: #f7f7f7;
}

</style>

<table class="table-scoped">
    <caption>Service Plan Feature Comparison</caption>
    <thead>
        <tr>
            
            
            
            <th scope="col">Â </th> 
            <th scope="col">Free Plan</th>
            <th scope="col">Basic Plan</th>
            <th scope="col">Premium Plan</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Storage</th>
            <td>1 GB</td>
            <td>10 GB</td>
            <td>100 GB</td>
        </tr>
        <tr>
            <th scope="row">Price</th>
            <td>$0</td>
            <td>$9</td>
            <td>$29</td>
        </tr>
        <tr>
            <th scope="row">Email Support</th>
            <td>No</td>
            <td>Yes</td>
            <td>Yes (Priority)</td>
        </tr>
    </tbody>
</table>