JSFiddle - React, Tailwind, and code Playground

HTML

<table class="mytable">
    <caption>Online file format differences</caption> 
    <thead>
        <tr> 
            <td></td> 
            <th scope="col">GIF</th> 
            <th scope="col">PNG</th> 
            <th scope="col">JPG</th> 
            <th scope="col">SWF</th> 
        </tr> 
    </thead>
    <tfoot> 
        <tr> 
            <td colspan="5">* The SWF format is a vector based format that can act as a container for other formats. Compression is inherited from other programs and can be customized.</td> 
        </tr> 
    </tfoot> 
    <tbody>
        <tr> 
            <th scope="row">Compression</th> 
            <td>lossless</td> 
            <td>lossless</td> 
            <td>lossy</td> 
            <td>variable*</td> 
        </tr> 
        <tr> 
            <th scope="row">Max Colors</th> 
            <td>256 indexed</td> 
            <td>Trillions</td> 
            <td>Thousands</td> 
            <td>Thousands</td> 
        </tr>
    </tbody>
</table>

CSS

.mytable {
    width:100%;
    font: .8em Helvetica, Arial, sans-serif;
    border-collapse:collapse;
}

.mytable caption {
    text-align:right;
    font-size:1.5em;
    font-weight:bold;
}

.mytable thead {
    background-color:#ADD8E6;
    border: 1px solid #888;
    color:#2F4F4F;
}

.mytable tbody {
    border:1px solid #888;
}

.mytable tfoot {
    background:#d4e6d9;
    border: 1px solid #d4e6d9;
}

.mytable tbody th {
    background-color:#2F4F4F;
    color:#FFF;
    border: 1px solid #888;
    padding-right:10px;
    text-align:right;
}

.mytable th[scope=col] {
    text-align:left;
}