Gradient Header Table

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

.gradient-header-table thead th {
    /* The Gradient! */
    background-image: linear-gradient(to right, #6a11cb, #2575fc);
    
    color: #ffffff;
    padding: 15px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
}

.gradient-header-table tbody td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* Zebra striping for the body for extra readability */
.gradient-header-table tbody tr:nth-of-type(even) {
    background-color: #fafafa;
}

.gradient-header-table tbody tr:last-child td {
    border-bottom: none;
}
.gradient-header-table .td-center {
    text-align: center;
}
</style>

<table class="gradient-header-table">
    <thead>
        <tr>
            <th scope="col">Subscription Plan</th>
            <th scope="col">Monthly Cost</th>
            <th scope="col" class="td-center">Users Included</th>
            <th scope="col" class="td-center">Cloud Storage</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Free</td>
            <td>$0</td>
            <td class="td-center">1</td>
            <td class="td-center">2 GB</td>
        </tr>
        <tr>
            <td>Basic</td>
            <td>$15</td>
            <td class="td-center">5</td>
            <td class="td-center">50 GB</td>
        </tr>
        <tr>
            <td>Professional</td>
            <td>$45</td>
            <td class="td-center">20</td>
            <td class="td-center">500 GB</td>
        </tr>
         <tr>
            <td>Enterprise</td>
            <td>$95</td>
            <td class="td-center">Unlimited</td>
            <td class="td-center">2 TB</td>
        </tr>
    </tbody>
</table>