Definir cellpadding e cellpacing em CSS?


3317

Em uma tabela HTML, o cellpaddinge cellspacingpode ser definido assim:

<table cellspacing="1" cellpadding="1">

Como o mesmo pode ser feito usando CSS?


6
Apenas uma sugestão geral, verifique se o seu style.css faz uma "redefinição" em suas tabelas antes de tentar essas soluções. Exemplo: Se você não tiver tabelas definidas como width:auto, border-collapsepode não funcionar como esperado.
PJ Brunet

1
Use espaçamento entre bordas na mesa e preenchimento em td.
Anubhav

Respostas:


3555

Fundamentos

Para controlar "cellpadding" em CSS, você pode simplesmente usar paddingnas células da tabela. Por exemplo, para 10 px de "cellpadding":

td { 
    padding: 10px;
}

Para "cellpacing", você pode aplicar a border-spacingpropriedade CSS à sua tabela. Por exemplo, para 10 px de "espaçamento entre células":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Essa propriedade permitirá até espaçamento horizontal e vertical separado, algo que você não poderia fazer com o "espaçamento de células" da velha escola.

Problemas no IE <= 7

Isso funcionará em quase todos os navegadores populares, exceto no Internet Explorer, até o Internet Explorer 7, onde você está quase sem sorte. Eu digo "quase" porque esses navegadores ainda oferecem suporte à border-collapsepropriedade, que mescla as bordas das células da tabela adjacentes. Se você estiver tentando eliminar o espaçamento entre células (ou seja cellspacing="0"), border-collapse:collapsedeverá ter o mesmo efeito: sem espaço entre as células da tabela. Porém, esse suporte é incorreto, pois não substitui um cellspacingatributo HTML existente no elemento da tabela.

Em resumo: para navegadores que não sejam o Internet Explorer 5-7, border-spacinglida com você. Para o Internet Explorer, se sua situação estiver correta (você deseja 0 espaçamento entre células e sua tabela ainda não a define), você pode usá-lo border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Nota: Para obter uma excelente visão geral das propriedades CSS que podem ser aplicadas a tabelas e para quais navegadores, consulte esta fantástica página Quirksmode .


27
cellpadding = "0" ainda pode fazer a diferença no Chrome 13.0.782.215, mesmo se o recolhimento de borda: o recolhimento e o espaçamento de borda forem aplicados à tabela.
whitneyland

7
@LeeWhitney, você precisa definir o preenchimento: 0 nas células da tabela.
Martin Ørding-Thomsen 29/11

7
É um pouco fora de tópico, mas os atributos cellpadding e cellpacing são removidos no HTML5, então o CSS é o único caminho a percorrer agora.
Ignas2526

12
Olá a todos. Atualizei a resposta para maior clareza, incluindo uma seção sobre cellpadding, que achei óbvia (basta usar "padding"). Espero que seja mais útil agora.
Eric Nguyen

4
É verdade que @vapcguy, em qualquer uma das outras situações infinitamente variáveis ​​em que você pode criar uma tabela, precisará definir seletores mais específicos. Os itens acima estão marcados como exemplos.
22678 Eric

942

Padrão

O comportamento padrão do navegador é equivalente a:

table {border-collapse: collapse;}
td    {padding: 0px;}

         Digite a descrição da imagem aqui

Cellpadding

Define a quantidade de espaço entre o conteúdo da célula e a parede celular

table {border-collapse: collapse;}
td    {padding: 6px;}

        Digite a descrição da imagem aqui

Espaçamento entre células

Controla o espaço entre as células da tabela

table {border-spacing: 2px;}
td    {padding: 0px;}

        Digite a descrição da imagem aqui

Ambos

table {border-spacing: 2px;}
td    {padding: 6px;}

        Digite a descrição da imagem aqui

Ambos (especiais)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

        Digite a descrição da imagem aqui

Nota: Se houver border-spacing, indica que a border-collapsepropriedade da tabela é separate.

Tente você mesmo!

Aqui você pode encontrar a antiga maneira HTML de conseguir isso.


1
Como o espaçamento ao redor da mesa está desaparecendo? Quando defino "espaçamento entre bordas: 8 px e 12 px, ele adiciona o espaçamento não apenas entre, mas entre a borda da tabela e as células externas! Mas isso não é mostrado nas imagens aqui; elas ficam niveladas à esquerda.
Kaz

1
@ 2astalavista E, infelizmente, se alguém quiser excluir o efeito do espaçamento externo, não funcionará dessa maneira com esses atributos CSS.
Kaz

@ Kaz Você pode precisar de uma margem negativa para ocultar essa parte irritante.

2
O preenchimento padrão no TD é tipicamente 1 px, não 0
Jan M

341
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

2
Essa é realmente a única coisa que eu poderia trabalhar para mim, embora eu tenha aplicado as informações a um ID para evitar ser excessivamente geral.
Kzqai

20
Isso é cellspacing=0equivalente. O equivalente para cellspacing=1é completamente diferente. Veja a resposta aceita.
TRiG

3
Não deveria table tde table thapenas deveria ser tde, threspectivamente? Funciona de qualquer maneira, mas um seletor menor significa uma correspondência um pouco mais rápida
Cole Johnson

1
@ Cole Na verdade, eu acho que deveria ser table > tr > tde table > tr > th. Isso é quase tão rápido como tre th, e é garantido para o trabalho se você tiver uma tabela aninhada. Apenas a minha 2c
leviathanbadger

@ aboveyou00 mas o tableseletor é necessário? IIRC, a <td>é inválido, a menos que esteja dentro de <tr>.
Cole Johnson

114

Definir margens nas células da tabela realmente não tem nenhum efeito, até onde eu sei. O verdadeiro equivalente CSS para cellspacingé border-spacing- mas não funciona no Internet Explorer.

Você pode usar border-collapse: collapsepara definir com segurança o espaçamento das células como 0, como mencionado, mas para qualquer outro valor, acho que a única maneira entre navegadores é continuar usando o cellspacingatributo.


47
Na era atual, essa realidade é sugada até o enésimo grau.
John K

7
Isso está quase correto, mas border-collapsesó funciona no IE 5-7 se a tabela ainda não tiver um cellspacingatributo definido. Escrevi uma resposta abrangente que mescla todas as partes corretas das outras respostas nesta página, caso isso seja útil.
Eric Nguyen

Para ser sincero, quem se importa com o Internet Explorer? Qualquer pessoa que o utilize deve conhecer sites corrompidos é sua culpa - por usar um navegador de baixa qualidade. Os sites não deveriam ter que lidar com isso. Deixe o Internet Explorer se perder. Esqueça o suporte. Nós não precisamos disso, e é uma dor para desenvolver.

99

Esse hack funciona para o Internet Explorer 6 e posterior, Google Chrome , Firefox e Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

o * declaração é para o Internet Explorer 6 e 7 e outros navegadores a ignoram adequadamente.

expression('separate', cellSpacing = '10px')retorna 'separate', mas ambas as instruções são executadas, pois no JavaScript você pode passar mais argumentos do que o esperado e todos eles serão avaliados.


para aqueles que tentam e-mails de resposta, nota que * não é reconhecido pelo Outlook 2007+ (usa o Word como um mecanismo de renderização) campaignmonitor.com/css
PTIM

71

Para aqueles que desejam um valor de espaçamento entre células diferente de zero, o seguinte CSS funcionou para mim, mas só posso testá-lo no Firefox.

Consulte o link Quirksmode publicado em outro lugar para obter detalhes de compatibilidade. Parece que pode não funcionar com versões mais antigas do Internet Explorer.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

54

A solução simples para esse problema é:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

49

Além disso, se você quiser cellspacing="0", não se esqueça de adicionar border-collapse: collapseem sua tablefolha de estilo 's.


43

Quebra o conteúdo da célula com uma div e você pode fazer o que quiser, mas é necessário quebrar todas as células da coluna para obter um efeito uniforme. Por exemplo, para obter margens esquerda e direita mais amplas:

Então o CSS será,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Sim, é um aborrecimento. Sim, funciona com o Internet Explorer. Na verdade, eu só testei isso com o Internet Explorer, porque é tudo o que podemos usar no trabalho.


Eu gostaria de poder votar mais ... Primeiro exemplo que não repetiu os outros e um que mostra como limitar o efeito a uma única tabela ou célula, em vez de a todos eles na página !!!
vapcguy

23

Basta usar border-collapse: collapsepara a sua mesa e paddingpara thou td.


21

Esse estilo é para redefinição completa de tabelas - preenchimento de célula , espaçamento de célula e bordas .

Eu tinha esse estilo no meu arquivo reset.css:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

20

TBH. Por toda a fannying com CSS, você também pode usar, cellpadding="0" cellspacing="0"pois eles não são preteridos ...

Alguém mais sugerindo margens no <td>obviamente não tentou isso.


35
Na verdade, eles estão obsoletos no html5.
Kzqai

18
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

17

Basta usar regras de preenchimento CSS com dados da tabela:

td { 
    padding: 20px;
}

E para espaçamento de borda:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

No entanto, ele pode criar problemas na versão mais antiga de navegadores como o Internet Explorer, devido à implementação diferencial do modelo de caixa.


15

Pelo que entendi das classificações do W3C, é que <table>s servem para exibir 'apenas' os dados.

Com base nisso, achei muito mais fácil criar um <div>com os planos de fundo e tudo mais e ter uma tabela com dados flutuando sobre ele usando position: absolute;ebackground: transparent; ...

Ele funciona no Chrome, Internet Explorer (6 e posterior) e Mozilla Firefox (2 e posterior).

As margens são usados (ou de qualquer maneira significava) para criar um espaçador entre os elementos do recipiente, como <table>, <div>e <form>, não <tr>, <td>, <span>or <input>. Usá-lo para qualquer coisa que não seja elementos de contêiner manterá você ocupado ajustando seu site para futuras atualizações do navegador.


7
O OP nunca declarou para o que ele estava usando a tabela.
Alfabravo


12

Você pode definir facilmente o preenchimento dentro das células da tabela usando a propriedade CSS padding. É uma maneira válida de produzir o mesmo efeito que o atributo cellpadding da tabela.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Da mesma forma, você pode usar a propriedade CSS border-espaçamento para aplicar o espaçamento entre as bordas adjacentes das células da tabela, como o atributo cellpacing. No entanto, para trabalhar com espaçamento entre bordas, o valor da propriedade colapsar entre bordas deve ser separado, o que é o padrão.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


10

Tente o seguinte:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Ou tente o seguinte:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

9

Eu usei !importantapós o colapso da fronteira como

border-collapse: collapse !important;

e funciona para mim no IE7. Parece substituir o atributo cellpacing.


9
!importantseria necessário apenas para substituir outras configurações de CSS em uma situação complexa (e mesmo assim principalmente na abordagem errada).
Jukka K. Korpela

1
Também uma repetição da resposta de Dan, apenas adiciona a !important, que poderia ter sido incluída como um comentário em vez de outra resposta.
vapcguy

8
<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingpode ser fornecido paddingem CSS enquanto cell-spacingpode ser definido pela configuração border-spacingde tabela.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Violino .


6
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Se marginnão funcionar, tente conjunto displayde trpara blocke, em seguida, a margem vai funcionar.


5

Para tabelas, espaçamento e preenchimento de célula são obsoletos no HTML 5.

Agora, para espaçamento entre células, é necessário usar espaçamento entre bordas. E para o cellpadding você precisa usar o colapso de borda.

E não use isso no seu código HTML5. Sempre tente usar esses valores em um arquivo CSS 3.


5
table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

4

Em uma tabela HTML, o cellpaddingecellspacingpode ser definido assim:

Para preenchimento de células :

Basta ligar para o td/thcelular simples padding.

Exemplo:

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Para espaçamento de células

Basta ligar para simples table border-spacing

Exemplo:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Mais estilo de tabela por link de origem CSS aqui você obtém mais estilo de tabela por CSS .


3

Você pode simplesmente fazer algo assim no seu CSS, usando border-spacinge padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>


A regra de espaçamento entre bordas é ignorada quando as bordas são recolhidas.
dgrogan 6/09

0

Que tal adicionar o estilo diretamente à própria tabela? Isso é em vez de usar tableno seu CSS, que é uma abordagem MAU se você tiver várias tabelas na sua página:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

2
Colocar "style" na tag table é pior do que colocar "table # someId" em seu css, pois o estilo deve ser separado do conteúdo. Mas o ponto principal da questão é como converter o html obsoleto em css adequado. O que você fez corretamente, mas não adicionou realmente nada à sua resposta e está se concentrando em um problema não relacionado.
28415 Teepeemm

1
Nada adicionado ?! O que eu adicionei foi focar em como todas as outras respostas aqui dizem basicamente para usar td { padding: ... }ou table { border-spacing: ... }, em vez de aplicá-la diretamente na tabela. Isso não acrescenta nada. Como eu disse, quando você tem várias tabelas na sua página e não deseja afetá-las, não deseja! Não precisamos de uma página inteira de respostas dizendo "Use a folha de estilo!", Quando talvez essa seja a última coisa que você deseja, porque deseja formatar apenas uma célula ou tabela. É quando aplicá-lo tableou tdé indesejável e criar uma nova classe, pois é um exagero.
vapcguy

1
Todas as outras respostas usam uma folha de estilo porque a pergunta original era "como posso fazer isso com o css". Se a pergunta tivesse sido "como o CSS pode afetar apenas essa tabela", sua resposta seria mais apropriada (embora eu ainda fosse a favor table#someId).
Teepeemm 28/03/2015

2
Tecnicamente, o estilo embutido ainda é CSS, apenas não usando uma folha de estilo, mas entendo o seu ponto.
vapcguy

1
Porque a ideia por trás de uma classe é de reutilização. Para um caso pontual, isso faz pouco sentido e é um exagero, IMHO.
vapcguy

0

Eu sugiro isso e todas as células da tabela específica são afetadas.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }


0

Você pode verificar o código abaixo, basta criar um index.htmle executá-lo.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

RESULTADO :

insira a descrição da imagem aqui

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.