HTML5 - Estilos avançados para tabelas

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
 

 

 

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
 

 

 

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