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 |
<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!!!! |
É 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.