02.12.2024

Adicionando Espaço Entre Células de Tabela em CSS: Básicos

Resposta Rápida

Para criar espaço entre as células <td> em uma tabela, utilize a propriedade CSS border-spacing, aplicada ao elemento <table>:

table {
  border-spacing: 10px; /* Adiciona espaço entre as células da tabela */
}

Para aumentar o preenchimento dentro das células, defina padding para <td>:

td {
  padding: 5px; /* Espaçamento mais detalhado aqui */
}

Importante: Para que border-spacing funcione, a propriedade border-collapse deve ser definida como separate.

Entendendo a Gestão de Espaço em Tabelas

Diferença Entre Padding, Margin e Border-Spacing

Ter um entendimento claro das distinções entre padding, margin e border-spacing permitirá que você manipule o espaçamento em tabelas com facilidade:

• padding fornece espaço interno dentro da célula, semelhante ao conforto de almofadas macias.
• margin não afeta tabelas e não é aplicável às células <td>.
• border-spacing é responsável pelo espaço entre as células. É importante lembrar que border-collapse: collapse e border-spacing não podem funcionar juntos.

Consideração para IE7 e Navegadores Antigos

Embora border-spacing seja eficaz, não é suportado no IE7 e versões anteriores. Use o atributo cellspacing dentro da tag <table> para obter resultados semelhantes nesses navegadores:

<table cellspacing="10">
  <!-- Conteúdo da tabela -->
</table>

Mantendo Esquemas de Cores

Usar border-spacing não só adiciona espaço entre as células, mas também torna os fundos das células visíveis:

td {
  background-color: blue; /* O espaço não esconderá essa cor */
}

Visualização

Se <td> fossem casas...

🏠🏠🏠🏠

...border-spacing as transforma magicamente em ruas pitorescas com calçadas verdes:

table { border-spacing: 10px; }

E aqui estão as elegantes mansões com seus próprios jardins:

🏠🌿🏠🌿🏠🌿🏠

Cada 🌿 simboliza os intervalos entre células criados por meio do CSS. É isso!

Criando o Layout Perfeito de Tabela

Colocação Estilosa com Border-Spacing

A propriedade border-spacing permite definir distâncias separadamente para o espaçamento horizontal e vertical:

table {
  border-spacing: 10px 5px; /* Lacunas horizontais e verticais */
}

Harmonia de Espaço Através do Padding

Combine border-spacing e padding para alcançar uma harmonia visual máxima:

td {
  padding: 2px 8px 2px 8px; /* Magnificamente harmonizado */
}

Trabalhando com Versões de Navegadores Antigos

Navegadores mais antigos têm suas peculiaridades, então use comentários condicionais especificamente para IE7 e versões anteriores:

<!--[if lt IE 8]>
<style>
  table {
    /* Estilos para versões de navegadores mais antigas */
  }
</style>
<![endif]-->

Recursos Úteis

1. border-spacing em CSS — Visão geral da propriedade border-spacing no W3Schools.
2. border-spacing | CSS-Tricks — Análise detalhada do border-spacing pelo CSS-Tricks.
3. Estilizando Tabelas - Aprendizado em Desenvolvimento Web | MDN — Guia para estilizar tabelas usando CSS do MDN Web Docs.
4. CSS Padding — Explicação da função de padding no CSS pelo W3Schools.
5. Contexto de Formatação Inline - CSS: Folhas de Estilo em Cascata | MDN — Introdução ao layout inline e aos modelos de bloco do MDN.
6. CSS table - CSS: Folhas de Estilo em Cascata | MDN — Explicação sobre layouts de tabela em CSS e seus atributos do MDN.
7. Top 10 Designs de Tabelas CSS — Smashing Magazine — Ranking de designs de tabela pela Smashing Magazine.

Video

Navigation