Use preenchimento de célula na tabela em CSS

1. Use as propriedades padding e border-spacing para Cell Padding e Cell Spacing em CSS
2. Use a propriedade border-spacing para especificar o espaçamento vertical e horizontal em CSS

Este artigo apresenta o conceito de preenchimento e espaçamento de células com as maneiras de realizar em CSS.

Use as propriedades padding e border-spacing para Cell Padding e Cell Spacing em CSS

O objetivo do preenchimento da célula é fornecer os espaços da borda da célula ao conteúdo da célula. Podemos usar a propriedade padding em CSS para especificar o preenchimento de uma célula. A propriedade padding é um atalho para representar o preenchimento superior, direito, inferior e esquerdo. Podemos selecionar as células de uma tabela com seletores CSS e usar a propriedade padding nelas.

Da mesma forma, o objetivo do espaçamento entre células é fornecer os espaços entre as células adjacentes. Podemos usar a propriedade CSS border-spacing para especificar o espaçamento entre a borda das células vizinhas. No entanto, esta propriedade só funciona quando a propriedade border-collapse está definida para separate. Isso significa que não podemos usar a propriedade border-spacing quando definimos border-collapse como collapse. O valor separate é o valor padrão da propriedade border-collapse.

A tabela HTML normal sem preenchimento de célula e espaçamento de célula é equivalente ao seguinte CSS aplicado. O border-collapse:collapse implica que as bordas das células adjacentes são fundidas em uma. O padding:0px não se assemelha a nenhum preenchimento nas células. É semelhante ao comportamento padrão de uma mesa.

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

Por exemplo, crie uma tabela HTML com os títulos Nome, Endereço e Idade. Preencha a tabela com alguns valores. A tag <td> </td> representa os dados da tabela. Em CSS, selecione a tag <table> e defina border-spacing como 5px. Em seguida, selecione a tag <td> e defina padding para 5px.

Assim, criamos um preenchimento de célula de 5px em todos os quatro lados do texto. Também criamos um espaço de 5px entre as bordas de cada célula na tabela. Aprendemos como realizar preenchimento e espaçamento de células em CSS.

Código de exemplo:

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

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

Use a propriedade border-spacing para especificar o espaçamento vertical e horizontal em CSS

Podemos usar a propriedade border-spacing para especificar o espaçamento horizontal e vertical entre as bordas das células na tabela. No exemplo anterior, aplicamos espaçamento horizontal. Aqui, vamos aplicar os dois espaçamentos. Podemos especificar dois valores para a propriedade border-spacing. O primeiro se assemelha ao espaçamento horizontal e o segundo se assemelha ao espaçamento vertical. Podemos aplicar este método na tabela criada acima.

Por exemplo, selecione a tag table e defina border-spacing como 8px e 5px. Isso criará o espaçamento horizontal de 8px e o espaçamento vertical de 5px.

Código de exemplo:

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

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>