Espaçamento de células CSS

Neste artigo, analisaremos inúmeras opções estilísticas que fornecerão componentes de tabela como cabeçalhos de tabela e células de dados de tabela algum espaçamento. O atributo CSS mais utilizado nessa circunstância é a propriedade de espaçamento de fronteira que será explorada e implementada neste tutorial usando o bloco de notas ++ ide. Para aplicar essa noção em um arquivo html, muitas opções estilísticas, como CSS embutidas e o método de etiqueta de estilo, serão usadas.

Exemplo 01: Usando a abordagem de tag de estilo CSS para adicionar espaçamento às células da tabela em um arquivo html

Neste exemplo, estaremos espaçando as células da tabela usando a propriedade de espaçamento de borda. Neste exemplo, o método CSS de etiqueta de estilo será utilizado para adicionar recursos estilísticos aos componentes da tabela. O bloco de notas ++ IDE será usado para editar o arquivo html.

No script acima, começaremos com o cabeçalho do arquivo onde abriremos a tag de estilo. Nesta tag, daremos duas propriedades de estilo a todos os elementos generalizando os elementos e criando classes separadas para eles. Primeiro, definiremos o estilo de toda a tabela, onde definiremos a propriedade de espaçamento de borda que atribuirá um espaço especificado entre o conteúdo de uma célula e sua borda.

Então, vamos criar outra aula de estilo. Nesta classe, daremos estilo ao cabeçalho da tabela, dados da tabela e à própria tabela, definindo o comprimento da borda, a forma e a cor. Em seguida, fecharemos o estilo e a cabeça e abriremos a etiqueta corporal. Na etiqueta corporal, criaremos uma tabela com duas linhas. Na primeira linha, daremos à Tabela três colunas usando a tag "Th" que define o cabeçalho da tabela. Na segunda linha, inseriremos o conteúdo nas colunas da tabela usando a tag "TD". Em seguida, fecharemos a etiqueta da tabela e a tag corporal. Salvando este script no “.O formato HTML ”nos permitirá abri -lo em nosso navegador e obter a seguinte saída:

Podemos ver no resultado acima que as diferentes células da tabela têm uma distância regular entre elas, que foi determinada no atributo de espaçamento de borda dentro da etiqueta de estilo.

Exemplo 02: Usando a abordagem do estilo CSS embutido para adicionar espaçamento às células da tabela em um arquivo html

Neste exemplo, usaremos a propriedade de espaçamento de borda e algum estilo para fornecer componentes de tabela como o cabeçalho da tabela e os dados da tabela algum espaçamento. A abordagem CSS embutida será utilizada neste exemplo para aplicar características de estilo aos componentes da tabela.

No script acima, começaremos com o corpo do arquivo, onde abriremos a tag de estilo em cada elemento individualmente. Primeiro, abriremos a tag de tabela e atribuiremos o CSS através da palavra -chave de estilo. Atribuiremos a tabela com uma borda de largura "1px", forma sólida e cor preta, juntamente com a propriedade de espaçamento de borda. Em seguida, abriremos nossa primeira linha de tabela, onde definiremos os nomes das colunas usando a tag "Th", na qual também usaremos CSS embutido para fornecer propriedades de estilo ao elemento. Depois disso, adicionaremos outra linha na qual definiremos os dados da tabela usando a tag "TD" e usaremos CSS embutido para dar aos dados uma borda também. Então, vamos fechar a mesa e a etiqueta corporal. Salvaremos este arquivo e o abriremos em nosso navegador para obter o resultado deste script na página do nosso navegador.

No trecho acima, podemos observar que ambas as fileiras da tabela têm alguns espaços entre eles, que foram definidos nas tags por CSS embutido.

Exemplo 03: Usando a técnica CSS de espaçamento de bordas de duas dimensões para uma tabela em um arquivo html

Neste exemplo, usaremos o atributo de espaçamento de borda de dupla dimensão para dar às células da tabela algum espaçamento. Neste exemplo, a técnica CSS de etiqueta de estilo será usada para aplicar recursos estilísticos aos componentes da tabela.

No script a seguir, começaremos com o cabeçalho do arquivo, onde abriremos a tag de estilo. Ao generalizar os componentes e estabelecer classes distintas para cada uma, forneceremos a todos eles dois parâmetros de estilo nesta tag. Primeiro, criaremos o estilo para toda a tabela, incluindo a propriedade de espaçamento de borda, que atribuirá uma distância definida entre o conteúdo de uma célula e sua borda em duas dimensões independentemente.

Então, em outra classe de estilo, aplicaremos o estilo no cabeçalho da tabela, dados da tabela e a própria tabela, definindo o comprimento da borda, a forma e a cor. O estilo e as tags de cabeça serão fechados enquanto a etiqueta do corpo será aberta. Faremos uma mesa com duas linhas na etiqueta do corpo. A tag "Th" será usada na primeira linha para especificar o cabeçalho da tabela. E a tag "TD" será usada na segunda linha para inserir dados nas colunas da tabela. Em seguida, fecharemos as tags da mesa e do corpo, salvando este script em “.Formato HTML ”para que possamos executá -lo em nosso navegador e obter os seguintes resultados:

Na saída acima, podemos ver que as células individuais da tabela têm duas lacunas diferentes horizontal e verticalmente entre elas, que foram definidas na propriedade de espaçamento de borda dentro da etiqueta de estilo.

Exemplo 04: Usando o método alternativo para atribuir espaço entre os elementos da tabela

Neste exemplo, utilizaremos a alternativa de propriedades de espaçamento de fronteira para fornecer algum estilo a componentes da tabela, como o cabeçalho da tabela e os dados da tabela. A abordagem CSS de etiqueta de estilo será usada neste exemplo para atribuir atributos estilísticos aos componentes da tabela.

No script a seguir, começaremos com o cabeçalho do arquivo e abriremos o estilo, resumindo os componentes e atribuindo uma única classe a cada parte. Primeiro, projetaremos o estilo para toda a tabela, incluindo o recurso de colapso da border, que desmorona a borda de cada elemento para adicionar espaço entre eles. O cabeçalho da tabela, os dados da tabela e a própria tabela serão estilizados ajustando o comprimento da borda, a forma e a cor. A etiqueta corporal será então aberta, mas o estilo e as tags de cabeça serão fechados.

Na etiqueta corporal, criaremos uma tabela com duas linhas. A tag "Th", que especifica o cabeçalho da tabela será usada na primeira linha para dar à Tabela três colunas. A tag "TD" será usada na segunda linha para colocar informações nas colunas da tabela. Em seguida, fecharemos as tags da mesa e do corpo. Vamos armazenar este script em “.Formato HTML ”para que possamos acessá -lo em nosso navegador e receber a seguinte saída:

Na saída acima, é visível que os elementos da tabela tenham uma única borda com algum espaço devido à propriedade de colapso da border.

Conclusão:

Neste artigo, discutimos várias propriedades de estilo que nos ajudaram a dar às células da mesa algum espaçamento. A propriedade de espaçamento de fronteira é a propriedade mais usada nesse cenário que foi discutida e implementada neste artigo usando o bloco de notas ++ ide. Adicionamos três exemplos únicos, juntamente com sua explicação para cada etapa para a facilidade de nossos usuários.