Como Controlar Tamanho e Espaçamento de Tabelas (HTML e CSS Moderno)

<< Aula anterior | Sumário do Curso | Próxima aula >>

Dando continuidade à nossa seção sobre tabelas em nosso curso de HTML online e gratuito, vamos ensinar neste artigo como definir as características visuais das suas tabelas de forma profissional. Você vai aprender a controlar o tamanho, o espaçamento das células e os alinhamentos que manterão o layout do seu site impecável.

Se olharmos as tabelas que usamos como exemplos em nossos tutoriais anteriores, como no artigo em que explicamos como expandir as células de uma tabela (colspan e rowspan), notaremos uma coisa: todas elas tinham tamanhos automáticos e meio engessados.

Como definir o tamanho e espaçamento em tabelas HTML?

Como formatar tabelas? A forma mais moderna é usando CSS. O atributo width define a largura total, enquanto a propriedade padding substitui o antigo cellpadding para o espaçamento interno das células. Já o border-spacing substitui o cellspacing para a distância entre elas. Esqueça os atributos HTML obsoletos e controle o layout via folha de estilos!

🛠️ Curiosidade: A engine de renderização (o "motor" do seu navegador) adora quando você separa a estrutura (HTML) da apresentação (CSS). Antigamente, os webmasters faziam tudo misturado, o que deixava o DOM (Document Object Model) pesado e lento. Hoje, o mercado exige código limpo e semântico!

O Tamanho de uma Tabela: Saindo do Padrão Automático

Antigamente, o navegador apenas tentava "adivinhar" o tamanho ideal baseado no texto. Veja como ficava uma tabela crua:

Linguagens de programação (Sem formatação)
Tipos de linguagem
Linguagens para desenvolvimento Web	HTML
	JavaScript
	PHP

Ficava espremida, certo? Como desenvolvedor Front-End, quem manda na tela (viewport) é você, e não o navegador!

Tamanho Fixo em Pixels (px) vs Responsivo (%)

No passado obscuro da internet, usávamos o atributo direto no HTML: ``. O jeito moderno (A Evolução): Usar a propriedade CSS width.

1. Tamanho em Porcentagem (%) - O Rei do Responsivo:

Se você quer que seu site se adapte à tela do celular ou do monitor ultrawide do seu usuário, a porcentagem é sua melhor amiga. Se definirmos width: 50%;, a tabela ocupará metade da tela visível.


<!-- O Jeito Moderno usando CSS in-line -->
<table style="width: 50%; border: 1px solid #000;">
   <caption>Tabela Responsiva: 50%</caption>
   <tr>
      <td>Primeira Coluna</td>
      <td>Segunda Coluna</td>
   </tr>
</table>

Resultado Prático:

Tabela Responsiva: 50%
Primeira Coluna	Segunda Coluna

🚀 Destrave sua Carreira Front-End Hoje!

Sabemos que essa sopa de letrinhas do HTML e CSS assusta no começo. Mas e se você tivesse o passo a passo completo, com projetos reais, para estudar offline, no seu ritmo e sem anúncios pipocando na tela?

"Estava travado tentando entender essas regras de CSS e layouts antigos, essa apostila salvou meus projetos na faculdade e no estágio!" - Carlos, Desenvolvedor.

BAIXAR APOSTILA DIGITAL AGORA
Prefere sentir o cheiro das páginas? Compre o Livro Físico impresso aqui.

O atributo cellspacing e o CSS border-spacing

💡 Dica de Ouro: O atributo cellspacing="10" era usado na tag <table> para empurrar as células para longe umas das outras. Hoje, a forma validada pela W3C e amada pelo Google é usar CSS: border-spacing: 10px;.

Ao usarmos o espaçamento entre as células, evitamos que as bordas fiquem coladas umas nas outras. Veja a simulação moderna:


/* O CSS resolve isso brilhantemente */
table.espacada {
    border-collapse: separate; /* Fundamental para o border-spacing funcionar */
    border-spacing: 15px;      /* Substitui o cellspacing="15" */
}

Célula com respiro (Fora)

A treta do Cellpadding: Dando espaço interno!

Você já entrou num elevador lotado? É horrível, né? O texto das suas células se sente da mesma forma quando você não usa preenchimento interno. É para dar esse "respiro de acolchoamento" dentro da célula que usávamos o cellpadding="10". Na web moderna, nós jogamos o cellpadding no lixo e abraçamos a gloriosa propriedade CSS chamada padding, aplicada diretamente nos elementos <th> (cabeçalhos) e <td> (dados).


<table style="border-collapse: collapse; width: 100%;">
   <tr>
      <!-- O padding de 20px cria uma "almofada" gordinha ao redor do texto -->
      <td style="padding: 20px; border: 1px solid #333;">Texto Confortável</td>
   </tr>
</table>

⚠️ Atenção: Não confunda! margin (ou border-spacing) empurra os vizinhos para longe (espaçamento EXTERNO). padding (ou cellpadding) empurra as bordas para longe do seu próprio conteúdo (espaçamento INTERNO).

O atributo align: Centralizando com classe

Por fim, no passado sombrio tentávamos usar <tr align="center"> para centralizar o texto das células. Mais uma vez, isso suja o HTML. Para alinhar os elementos, a boa prática exige o uso do CSS text-align:

text-align: left; (Alinhamento padrão, à esquerda)
text-align: center; (Centraliza o texto na célula)
text-align: right; (Excelente para colunas que exibem preços e números em tabelas financeiras)

Para estudos mais profundos sobre CSS em tabelas, sempre recomendamos a leitura oficial da documentação no MDN Web Docs sobre Tabelas.

Perguntas Frequentes (FAQ)

Por que não devo usar width, cellpadding e cellspacing direto no HTML?

Porque esses atributos foram descontinuados na versão do HTML5. Misturar design com estrutura prejudica o SEO do seu site, a acessibilidade para leitores de tela e dificulta a manutenção do código. O correto é isolar toda a estilização visual no CSS.

Como centralizar a tabela inteira na tela usando CSS?

Para centralizar a caixa da tabela no navegador (não o texto dentro dela), adicione a regra margin: 0 auto; na declaração CSS da sua tag <table>. Isso criará margens laterais iguais e automáticas.

Ainda posso criar o layout inteiro do site usando tabelas?

Não! Essa era uma prática comum nos anos 2000, mas hoje é considerada um erro gravíssimo. Tabelas devem ser usadas exclusivamente para dados tabulares (como relatórios, planilhas e horários). Para layouts e grids estruturais complexos, estude Flexbox e CSS Grid.

🎯 O que estudar a seguir:

Dividindo tabelas com THEAD, TBODY e TFOOT para organização
Estilizando cores de fundo (background) e estilos de borda
Curso Completo de PHP: Como popular tabelas HTML usando Banco de Dados