Skip to content

Elimine o Funky Spaces de suas tabelas HTML

6 de abril de 2021

Se você estiver usando tabelas para layout de página (uma proibição em XHTML), é provável que você experimente a adição desagradável de espaço extra em seus layouts. Para corrigir esse problema, você precisa verificar a definição da tabela HTML e as especificações de qualquer folha de estilo governante.

Definição de tabela HTML

A tag HTML para tabelas por padrão não controla alguns requisitos de espaçamento. Verifique três coisas sobre o tabela tag em seu documento HTML:

  1. Sua tabela tem o atributo cellpadding definido como 0?
    1. cellpadding = “0”
  2. Sua tabela tem o atributo cellspacing definido como 0?
    1. cellspacing = “0”
  3. Existe algum espaço antes ou depois do seu conteúdo e das tags da tabela?

O número 3 é o chutador. Muitos editores de HTML gostam de ter o código todo espaçado, para torná-lo fácil de ler. Mas muitos navegadores interpretam essas guias, espaços e retornos de carro como espaço extra desejado dentro de suas tabelas. Livre-se dos espaços em branco ao redor de suas tags e você terá tabelas mais nítidas.

Folhas de Estilo

No entanto, pode não ser o HTML que está desativado. Folhas de estilo em cascata controlam alguns atributos de exibição de tabelas e dependendo da página, você pode ou não ter adicionado CSS específico de tabela deliberadamente em primeiro lugar. Analise o arquivo CSS que rege para qualquer um dos seguintes valores dentro tabela, º, ou td propriedades e ajuste conforme necessário:

  • fronteira: Especifica os atributos de uma tabela ou borda de célula
  • colapso da fronteira: Trata as bordas adjacentes como uma só, para evitar a duplicação da largura das bordas
  • preenchimento: Oferece espaço em branco, em pixels, ao redor de cada célula
  • alinhamento de texto: Determina o alinhamento do texto dentro da célula
  • espaçamento de borda: Define o espaçamento entre as células, em pixels

Alternativas

Embora você ainda possa usar tabelas HTML (o padrão é bem estabelecido e universalmente suportado nos navegadores de hoje), a maioria dos designs modernos da Web responsivos usam folhas de estilo em cascata para colocar elementos em uma página. As tabelas ainda fazem sentido para seu propósito original de exibir dados tabulares, mas para organizar o layout e o conteúdo de uma página, é muito melhor usar o layout CSS.