✅ HTML5 - Estilos avançados para tabelas

Índice

Dentro das novas especificações de HTML5 Y CSS Existem vários estilos que podem ser aplicados às tabelas a fim de definir e ajustar melhor seu comportamento ao que temos como um conceito em nossa mente para fazer nossas páginas ou documentos, os elementos que podemos modificar são as bordas das tabelas, o tratamento de células vazias, incluindo a disposição da mesma mesa.
colapso da fronteira
Especifica como as bordas são tratadas em células adjacentes, os valores que esta propriedade pode assumir são: colapso Y separado.
Com esta propriedade podemos controlar o comportamento de como o navegador desenha as bordas, vamos ver esta imagem de como o navegador lida com isso por padrão:

Observamos que uma borda é desenhada na mesa e outra borda é desenhada em cada célula da mesma, isso gera um efeito de borda dupla, vamos ver agora como com colapso da fronteira nós podemos lidar com este problema.

 Exemplo 
 Resultados da Pesquisa de Frutas de 2011 

 
 Classificação inhame Cor  Tamanho e votos 

 

 

 
 Favorito: Maçãs Verde  Médio 500 

 
 2º favorito: Laranjas laranja  Grande 450 

 

 
  Fruit Data Enterprises

Classificação	inhame	Cor	Tamanho e votos
Favorito:	Maçãs	Verde	Médio	500
2º favorito:	Laranjas	laranja	Grande	450
Fruit Data Enterprises

Vamos ver o que esse código gera no navegador antes de continuar com a explicação:

O valor de recolhimento que colocamos na propriedade de recolhimento de borda nos diz que não queremos que uma borda seja desenhada em cada elemento adjacente, o que cria o efeito que vimos na imagem anterior.
Definindo as bordas separadas
Se ao invés de usar colapso usamos o valor padrão separado da propriedade border-collapse, podemos usar propriedades adicionais como espaçamento de borda Para definir o espaço entre as bordas dos elementos adjacentes, vejamos o exemplo:

 Exemplo 
 Resultados da Pesquisa de Frutas de 2011 

 
 Classificação inhame Cor  Tamanho e votos 

 

 

 
 Favorito: Maçãs Verde  Médio 500 

 
 2º favorito: Laranjas laranja   

 

 
 Fruit Data Enterprises

Classificação	inhame	Cor	Tamanho e votos
Favorito:	Maçãs	Verde	Médio	500
2º favorito:	Laranjas	laranja
Fruit Data Enterprises

Neste exemplo, simplesmente especificamos que a borda terá um espaço de 10 pixels para os elementos adjacentes, vamos ver o exemplo de como isso se traduz para o navegador:

Manipulação de células vazias
Como vimos na imagem anterior, o navegador também atribui um espaço com uma borda para células vazias, isso às vezes podemos não querer em nossa tabela, então podemos fazer a seguinte modificação no código anterior para poder lidar com as células vazias células.

Vamos ver como fica no navegador:

Na verdade, fomos capazes de nos livrar das células vazias sem perder o formato da nossa tabela.
Com isso finalizamos o tutorial, como podemos ver que podemos fazer várias modificações em nossas tabelas a fim de adaptá-las ao que podemos conceituar e adaptar às nossas necessidades.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo