Como eliminar as bordas duplas em tabelas HTML

Construir tabelas em HTML pode ser trabalhoso, mas depois que você pega o jeito, nunca mais esquece. O objetivo aqui não é ensinar profundamente como construir tabelas usando CSS, mas sim, mostrar uma dica que acabei usando em alguns posts antigos.

Só para lembrar a estrutura de uma tabela em HTML, exemplo com três colunas e três linhas:

<Table border=1> <! Começo da tabela e com borda de espessura igual a 1>
<tr> <! Primeira linha da tabela>
<th>Cabeçalho da Primeira coluna</th> <! célula>
<th>Cabeçalho da Segunda coluna</th> <! célula>
<th>Cabeçalho da Terceira coluna</th> <! célula>
</tr> <! Fim da primeira linha da tabela>
<tr> <! Segunda linha da tabela>
<td>Primeira coluna</td> <! célula>
<td>Segunda coluna</td> <! célula>
<td>Terceira coluna</td> <! célula>
</tr> <! Fim da segunda linha da tabela>
<tr> <! Terceira linha da tabela>
<td>Primeira coluna</td> <! célula>
<td>Segunda coluna</td> <! célula>
<td>Terceira coluna</td> <! célula>
</tr> <! Fim da terceira linha da tabela>
</table> <! Fim da tabela>

Exemplo de uma tabela simples em HTML

Eis o código HTML de uma tabela que foi usada como exemplo num dos trabalhos que eu passei para os meus alunos da 3ª série:

<table border="1">
<thead>
<tr>
<th>Nome</th>
<th>Consumo médio</th>
<th>Nº de pessoas</th>
<th>Nº de aparelhos</th>
<th>Tempo médio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xexéu</td>
<td>128 kWh</td>
<td>7</td>
<td>28</td>
<td>15h</td>
</tr>
<tr>
<td>Socorro</td>
<td>357 kWh</td>
<td>5</td>
<td>45</td>
<td>78h</td>
</tr>
<tr>
<td>Belarmino</td>
<td>267 kWh</td>
<td>3</td>
<td>21</td>
<td>52h</td>
</tr>
<tr>
<td>Mércia</td>
<td>629 kWh</td>
<td>5</td>
<td>35</td>
<td>122h</td>
</tr>
</tbody>
</table>

Olha como fica a tabela:

Essas bordas duplas ficam horrorosas! Os nomes são fictícios.

Com HTML, tanto a tabela principal quanto as suas células estão com bordas, no que resultam as bordas duplas, e não dá para acabar com elas. A solução final estava numa propriedade CSS que na época eu não sabia e que uma aluna acabou me dando um toque. A bendita propriedade CSS que faz com que uma só borda apareça é a border-collapse. Para funcionar, eu removi do código acima a propriedade border da tag table. O estilo fica assim escrito:

<style>
      table
      {
        border-collapse: collapse;
      }
      table, td, th
      {
        border: 1px solid #000;
      }
    </style>

E a tabela assim fica:

Bordas simples!!!!

O aluno aprendendo com o professor e o professor aprendendo com o aluno! Pena que essa aluna representa 0,0000000001% daqueles alunos que realmente querem aprender...

É claro que a tabela acima carece de mais estilos, mas o objetivo do post foi apenas dar uma dica em relação às bordas e espero ter atingido o objetivo.