Melhorando o aspecto com colgroup

 <table>
    <caption>Produzidos x Vendidos por Loja</caption>
 
    <colgroup>
        <col>
        <col span="2" style="background-color: red">
        <col span="2" style="background-color: blue;">
    </colgroup>
    
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="2">Afonso Pena</th>
            <th colspan="2">Antônia Pereira</th>
        </tr>
        <tr>
            <th>Produzidos</th>
            <th>Vendidos</th>
            <th>Produzidos</th>
            <th>Vendidos</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Vassouras</th>
            <td>50</td>
            <td>30</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <th>Baldes</th>
            <td>10</td>
            <td>10</td>
            <td>30</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

Colocamos a tag <colgroup></colgroup>, dentro colocamos 3 <col>, onde na segunda colocamos o atibuto style="background-color: red" e na terceira style="background-color: blue", porém ainda está desorganizado por isso colocaremos span="2" para alinharmos a cor com a coluna.