html5 – Como deixar células de uma tabela em baixo de uma coluna


Boa noite pessoal, me tirem uma dúvida por gentileza, estou praticando os elementos de tabelas para um exercício e não consigo deixar as colunas uma do lado da outra, ou seja, ás celulas acompanham as colunas e está fomando uma linha,:coluna, células, colunas, células nessa ordem , vou deixar duas imagens abaixo para exemplificar a com partes amarelas é a forma que eu quero fazer a em cinza escuro e claro é a que eu fiz,

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

aqui o código:

<!DOCTYPE html>

Calcular Conta de Luz da Minha Casa:

<div id="interface">
    <table>
        <caption> Gasto de Energia da Casa</caption>

                <tr id="coluna-1">
       
                    <th class="cp">Aparelhos Eletrônicos</th>
                    <tr>
                        <td class="ae">Computador</td>
                    </tr>
                    <tr>
                        <td class="ae">Celular</td>
                    </tr>
                    <tr>
                        <td class="ae">Micro-Ondas</td>
                    </tr>
                    <tr>
                        <td class="ae">Ventilador</td>
                    </tr>
                    <tr>
                        <td class="ae">Lampadas</td>
                    </tr>
                    <tr>
                        <td class="ae">Fone de Ouvido Bluetooth</td>
                    </tr>
                    <tr>
                        <td class="ae"> Ferro de Passar Roupa</td>
                    </tr>
                    <tr>
                        <td class="ae">MODEM</td>
                    </tr>
                </tr>
                
                    
                    <tr id="coluna-2">
                        <th class="cp">Tempo ligado/carregando:</th>
                    </tr>
                    <tr>
                        <td class="tc"></td>
                    </tr>
                        <tr>
                            <td class="tc"></td>
                        </tr>
                        <tr>
                            <td class="tc"></td>
                        </tr>
                        <tr>
                            <td class="tc"></td>
                        </tr>
                        <tr>
                            <td class="tc"></td>
                        </tr>
                        <tr>
                            <td class="tc"></td>
                        </tr>
                        <tr>
                            <td class="tc"></td>
                        </tr>
                        <tr>
                            <td class="tc" ></td>
                        </tr>
                </tr>


           

                <tr id="coluna-3">
                    <th class="cp">Impostos:</th>
                    <tr>
                        <td class="i">ICMS</td>
                    </tr>
                    <tr>
                        <td class="i">COFINS</td>
                    </tr>
                    <tr>
                        <td class="i">PIS</td>
                    </tr>
                    <tr>
                        <td class="i">CIP</td>
                    </tr>
                    <tr>
                        <td class="i"></td>
                    </tr>
                    <tr>
                        <td class="i"></td>
                    </tr>
                    <tr>
                        <td class="i"></td>
                    </tr>
                    <tr>
                        <td class="i" ></td>
                    </tr>
                </tr>
    </table>
</div>
@charset "UTF-8";

body{
position: relative;
margin-left: 270px;
margin-top: 150px;
background-color: #dad0d0;

}
/* Interface */
#interface {
width: 900px;
height: 800px;
background-color: white;
margin: -150px auto 0px 70px;
padding: 20px;
}

/* Formatação do Título */
caption {
color: #606060;

}

/* Formatação da Tabela */
table{
border: 1px solid #606060;
border-collapse: collapse;

}
/* Formatação das Colunas /
td {
border: 1px solid #606060;
border-collapse: collapse;
padding: 10px;
}
/
Formatação das Células /
tr{
border: none;
}
/
Formatação Geral das Células Principais */
th {
border: none;
}

/* Formatação dos th  */
.cp{ 
    background-color:#606060;
    color: white;
    
}
.ae{
    background-color: rgb(231, 222, 222);
    
}
.tc{
    background-color: rgb(231, 222, 222);
    
}
.i{
    background-color: rgb(231, 222, 222);
    
}