Crie espaçamento entre colunas de uma tabela usando CSS

O CSS é uma linguagem de folhas de estilo usada para definir a aparência e a formatação de documentos escritos em HTML. Uma das tarefas comuns ao trabalhar com CSS é criar espaçamento entre colunas de uma tabela.

Neste post, mostraremos como fazer isso usando a propriedade border-spacing do CSS. Você aprenderá a criar um espaço agradável entre colunas, tornando sua tabela mais legível e esteticamente interessante.

Passo a passo

Passo 1: Crie sua tabela HTML

Antes de começarmos a trabalhar com CSS, precisamos criar uma tabela básica em HTML. Aqui está um exemplo simples de uma tabela com três colunas e duas linhas:

<table class="tabela-espacada">
  <tr>
    <td>Coluna 1</td>
    <td>Coluna 2</td>
    <td>Coluna 3</td>
  </tr>
  <tr>
    <td>Coluna 1</td>
    <td>Coluna 2</td>
    <td>Coluna 3</td>
  </tr>
</table>

Passo 2: Aplique a propriedade border-spacing

Agora que temos nossa tabela HTML, podemos começar a trabalhar com o CSS. A propriedade border-spacing é usada para definir o espaço entre colunas (e linhas) de uma tabela. É importante lembrar que a propriedade border-spacing só funciona quando a propriedade border-collapse está definida como separate, que é o valor padrão.

No seu arquivo CSS, insira o seguinte código para adicionar um espaço de 10 pixels entre as colunas e manter o espaço entre as linhas como 0:

.tabela-espacada {
border-collapse: separate;
border-spacing: 10px 0;
}

Passo 3: Ajuste os valores conforme necessário

O exemplo acima cria um espaço horizontal de 10 pixels entre as colunas da tabela. Você pode ajustar os valores conforme necessário para obter o espaçamento desejado.

Lembre-se de que a propriedade border-spacing não funcionará se a propriedade border-collapse for definida como collapse. Nesse caso, você precisará aplicar as bordas diretamente às células (<td> e <th>) e usar a propriedade padding para criar o espaço entre as células.

Tudo pronto.

Criar um espaço entre colunas de uma tabela usando CSS é uma tarefa bastante simples quando você entende como funciona a propriedade border-spacing. Com este guia, você pode criar tabelas mais atraentes e legíveis, proporcionando uma melhor experiência ao usuário.

Pratique o uso dessas técnicas e experimente com diferentes valores de espaçamento para encontrar o estilo perfeito para suas tabelas. E lembre-se, a chave para um design eficiente é a simplicidade e a atenção aos detalhes.