Preenchimento e espaçamento de tabela HTML

As tabelas HTML podem ajustar o preenchimento dentro das células e também o espaço entre as células.

Tabela HTML - Preenchimento de células

O preenchimento da célula é o espaço entre as bordas da célula e o conteúdo da célula.

Por padrão, o preenchimento é definido como 0.

Para adicionar preenchimento nas células da tabela, use a paddingpropriedade CSS:

th, td {
padding: 15px;
}

Para adicionar preenchimento apenas acima do conteúdo, use a padding-toppropriedade.

E os outros lados com as propriedades padding-bottom, padding-left, e padding-right:

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

O espaçamento celular é o espaço entre cada célula.

Por padrão, o espaço é definido como 2 pixels.

Para alterar o espaço entre as células da tabela, use a border-spacingpropriedade CSS no table elemento:

table {
border-spacing: 30px;
}