Como fazer Tabela Zebrada CSS 3

Aprenda a criar uma Tabela Zebrada CSS 3

De maneira simples e rápida, segue um pequeno tutorial sobre como criar uma Tabela Zebrada CSS 3.

Basicamente para criar uma tabela zebrada com CSS 3 você só precisa criar um estilo que se aplique na tabela.

Neste exemplo, vou aplicar o estilo na tabela com o id “tabela-zebrada”

table#tabela-zebrada tbody tr:nth-child(odd) {
background-color: #666;
}

Já a tabela:

O resultado é esse:

Como fazer uma tabela Zebrada usando CSS 3?
O conceito é bem simples!
Monte sua tabela como de costume
E crie o estilo css para fazer o trabalho

tabela zebrada css 3 300x99 Como fazer Tabela Zebrada CSS 3

Tabela Zebrada CSS 3

Espero que o post tenha ajudado a criar a Tabela Zebrada com CSS 3

Caso tenha alguma dúvida, não deixe de ver o fórum da w3schools sobre Nth-child.

tabela zebrada css 3

Avaliação

Simples e eficaz para tabular dados de maneira rápida e com fácil leitura de linhas.

Rating by Heric Tilly: 5.0 stars
starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3starfull Como fazer Tabela Zebrada CSS 3

facebook Como fazer Tabela Zebrada CSS 3 twitter Como fazer Tabela Zebrada CSS 3 email Como fazer Tabela Zebrada CSS 3

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>