Livrando-se de espaços em tabelas HTML

Se você estiver usando tabelas para layout de página (um não-nã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

O HTML marcação 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. Vários Editores de HTML gostaria 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 em torno de suas tags e você terá tabelas mais nítidas.

instagram viewer

Folhas de Estilo

No entanto, pode não ser o HTML que está desativado. Folhas de estilo em cascata controlar 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.

Examine o arquivo CSS que rege para qualquer um dos seguintes valores dentro do tabela, º, ou tdpropriedades 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 de 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 dias de hoje navegadores), o design responsivo da Web mais moderno usa folhas de estilo em cascata para colocar elementos em uma página. As tabelas ainda fazem sentido para sua finalidade original de exibir dados tabulares, mas para organizar o layout e o conteúdo de uma página, é muito melhor usar o layout CSS.