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
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
*****

Publicado por

Heric Tilly

E-commerce, SEO, SEM, Web Development, Behavioral Targeting, Remarketing, Web Metrics, Mobile & Business Strategy.

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>