Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Estou com dúvida no curso: " Dando os primeiros passos na web com HTML e CSS, no exercício 7 que pede para zebrar a tabela"

Referente ao curso HTML e CSS: Os seus primeiros passos, no capítulo Elementos estruturais, imagens e tabelas e atividade tabela zebrada

por Andre Beserra
| 104.6k xp | 62 posts

Olá, tudo bem?

Eu consegui fazer a tabela zebrada, entretanto, surgiu uma dúvida que acredito ser interessante e fácil de ser respondida.

No caso, a borda da tabela está marcada por uma linha preta (conforme feita no código): 

#tb-nutrientes{
    border: 1px solid black;
    width: 40%;
    margin: auto;
}

Gostaria de saber, se é possível realizar essa mesma configuração nas bordas internas da tabela que separa as colunas e qual (ou como) seria a instrução para isso.

Não sei se ficou bem claro, mas poderiam me ajudar?

Desde já, grato!

4 respostas
solução!
por Bianca Reis
| 46.4k xp | 6 posts
Moderador Desenvolvedora

Olá Andre!

Isso é possível sim. Para adicionar bordas separando cada coluna da tabela, você pode fazer o seguinte:

#tabela {
    border-collapse: collapse;
}

#tabela th, #tabela td {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

Ou então, se quiser aplicar a borda em todas as linhas e colunas, basta alterar o último seletor, adicionando bordas nos quatro lados de cada th/td:

#tabela th, #tabela td {
    border: 1px solid black;
}

Espero ter esclarecido sua dúvida.

por Andre Beserra
| 104.6k xp | 62 posts

Poxa Bianca, obrigado!

Era isso mesmo o que eu estava procurando.

Mas surgiu mais uma dúvida, como eu consigo centralizar a minha tabela no arquivo CSS?

Eu sei que colocando (conforme abaixo) no código HTML ele centraliza. 

<table id="tb-nutrientes", align="center">

Como seria no CSS?

Obrigado mais uma vez!

por Bianca Reis
| 46.4k xp | 6 posts
Moderador Desenvolvedora

Boa tarde Andre!

Para centralizar a tabela:

#tb-nutrientes {
    margin: auto;
}

Inclusive é sempre mais recomendado fazer essas estilizações no CSS ao invés de usar um atributo na tag HTML, por questão de semântica e organização do código!

Fico à disposição.

por Andre Beserra
| 104.6k xp | 62 posts

Muito obrigado!

Todas as minha dúvidas foram sanadas!