Definir cellpadding e cellpacing em CSS?

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

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

Como o mesmo pode ser feito usando CSS?

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 .

Padrão

O comportamento padrão do navegador é equivalente a:

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

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;}

Espaçamento entre células

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

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

Ambos

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

Ambos (especiais)

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

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.

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

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

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.

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 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;
}

A solução simples para esse problema é:

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

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

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.

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

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 */
}

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.

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

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.

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.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

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;
}

Eu usei !importantapós o colapso da fronteira como

border-collapse: collapse !important;

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

<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 .

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.

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.

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

Em uma tabela HTML, o cellpaddingecellspacingpode ser definido assim:

Para preenchimento de células :

Basta ligar para o td/thcelular simples padding.

Exemplo:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

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

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

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;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* 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 .

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>

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>

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   ;
 }

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 :