Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 3
Sexo: Masculino

Tabela com cores alternadas

06-03-2013 22:58

Pessoal, sou novo no assunto, por favor vocês poderiam me esclarecer a dúvida abaixo?

Como eu faço para montar uma tabela igual a essa da foto. ( Duas colunas com o background de cada item com cor de fundo alternada, na verdade ela não alterna as cores, ele usa uma caixa e o background e vai alternado) tenho dúvidas em como posicionar deste modo e como fazer o background com a altura flexível de acordo com o texto e a largura com tamanho fixo. Eu tentei com o background color pra texto mas o espaçamento entre as linhas ficou muito grande.

http://upload.crazzy.com.br/show-image. ... 10c7cf92bc


Desde já agradeço pela atenção.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Tabela com cores alternadas

06-03-2013 23:06

Aqui essa figura que você passou está tudo de uma cor só, preto.

Essa tabela ai parece simples, fundo preto em toda tabela, e letras, branco para o título, cinza para o conteúdo.

Seria basicamente isso

<table style="background-color:black;"> <tr> <td style="color:white;">coluna1</td> <td style="color:white;">coluna2</td> </tr> </table>

É claro que falta aplicar o estilo e as cores correta da fonte, para ficar igual na foto. Se quer cor alternada, basta usar um cor diferente para coluna ou linha.

Se você tem a possibilidade de ver o código-fonte dessa tabela da foto, pegue ele e estude. Para quem está iniciando, é importante ver pelo código-fonte, para conhecer a estrutura.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 3
Sexo: Masculino

Tabela com cores alternadas

06-03-2013 23:17

Muito obrigado pela resposta. Eu fiz um teste mas ainda não era o que eu queria.

Por favor olhe a lista no site http://www.ferrari.com/english/gt_sport ... netta.aspx

Note que item sim e item não possui uma especie de box com largura definida com um background cinza e outro usa o próprio background da página.

E a segunda coluna ele faz a mesma coisa, as caixas dos itens são separadas (existe um espaçamento entre as colunas), já no código informado o background fica inteiriço mas eu gostaria de fazer uma separação igual a do site.

Mais uma vez obrigado pela atenção.

Abraços
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Tabela com cores alternadas

06-03-2013 23:30

Esse código que eu fiz, pode ser feito de outras formas mais curta. Mas como imagino que você está aprendendo, coloquei o código todo escrito sem usar folha de estilo ou class CSS.

Ai no caso não sei se apliquei as mesmas cores de fundo do seu exemplo. Você tem que verificar, e também ver a fonte que vai usar.

<table style="background-color:black; padding:5px 5px; width:800px;"> <tr>   <!-- coluna1 //--> <td style="vertical-align:top;">   <table style="width:100%"> <tr> <td style="color:white;">coluna1</td> </tr> <tr> <td style="background-color:#444;color:#ccc;">linha1</td> </tr> <tr> <td style="color:#ccc;">linha2</td> </tr> <tr> <td style="background-color:#444;color:#ccc;">linha3</td> </tr> </table>   </td> <!-- coluna1 //-->     <!-- coluna2 //--> <td style="vertical-align:top;">   <table style="width:100%"> <tr> <td style="color:white;">coluna2</td> </tr> <tr> <td style="background-color:#444;color:#ccc;">linha1</td> </tr> <tr> <td style="color:#ccc;">linha2</td> </tr> </table>   </td> <!-- coluna2 //-->   </tr> </table>

Fui.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 3
Sexo: Masculino

Tabela com cores alternadas

06-03-2013 23:33

Cara, agora sim. hahaha

Muito obrigado mesmo, era exatamente isso que eu precisava.

Abraços e boa noite.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado