Tabela em código

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Tabela em código

Mensagem por DionataBraga._. 16.01.17 19:27

Detalhes da questão


Endereço do fórum: http://runners-nwd.forumeiros.com/forum
Versão do fórum: PhpBB3

Descrição


Olá,
Eu gostaria de saber como é criado essa tabela :
Print:

Se possível quero uma com modelo parecido, com as seguintes informações :

Título mudar para : Ranking's Runners in City

Em cor mudar para : NICK
Em Campo no painel de controle para : Eventos ganhos
Adicionar uma nova caixa ao lado de eventos ganhos com nome : Rank

Campos abaixo deles para adicionar sequencias de " nomes e numeros"


Desde já, obrigado !


Última edição por DionataBraga._. em 17.01.17 0:45, editado 1 vez(es)
DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 16.01.17 19:41

Olá, veja este tutorial à respeito de tabelas em BBCode.
A partir dele, você poderá montar à sua.
-> Tutorial - Tabelas em BBCode: https://ajuda.forumeiros.com/t33005-tutorial-tabelas-em-bbcode

---

Se precisar de ajuda para montar uma, pode dizer.

Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por DionataBraga._. 16.01.17 19:51

Não é possível criarem uma editável nesse estilo que és a questão dos tópico?
DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 16.01.17 20:02

Olá.
Poderia nos dizer onde viu essa tabela?
(Link da página).

Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por DionataBraga._. 16.01.17 20:04

DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 16.01.17 20:31

Você prefere sua tabela em: HTML ou BBCode?

Até mais. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por DionataBraga._. 16.01.17 20:39

Bom, não sei qual diferença entre os, faça de sua preferência desde que haja resultado, até. Muito feliz
DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 16.01.17 21:06

Aqui está uma tabela:
Código:
[table border="1"][tr][td]TÍTULO PRINCIPAL[/td]
[/tr]
[tr][td]Nick[/td]
[td]Eventos Ganhos[/td]
[td]Rank[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[/table]

Você pode personalizar com CSS os campos que desejar, basta fazer, por exemplo:
[table style="propriedade:valor;"] ou [td style="propriedade:valor;"]
Lembre-se: O campo [tr] não pode ser personalizado!

Até mais. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por DionataBraga._. 16.01.17 21:18

Não tem como deixar nessa estrutura da imagem abaixo não ?
Tabela em código Y3rCyUv

Ficou muito estranho na minha opinião :
Tabela em código B0N6WyT

Tem algum modelo mais elegante tipo a imagem de exemplo?
Dionata escreveu:Tabela em código Y3rCyUv
DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 16.01.17 21:38

Tem sim.
Altere o código da tabela passado anteriormente por:
Código:
[table border="1" class="fa-table1"][tr][td colspan="3" style="text-align:center;"]TÍTULO PRINCIPAL[/td]
[/tr]
[tr][td]Nick[/td]
[td]Eventos Ganhos[/td]
[td]Rank[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[tr][td](( NICK ))[/td]
[td](( EVENTOS GANHOS ))[/td]
[td] (( RANK ))[/td]
[/tr]
[/table]

E adicione este código em sua Folha de Estilo CSS:
Código:
.fa-table1 tr:nth-child(2) {
    font-weight: bold;
    text-align: center;
    color: #39c;
}
.fa-table1 tr:first-child {
    text-align: center;
    background-color: #39c;
    color: #fff;
    font-weight: bold;
}
.fa-table1 tr:hover {
    background-color: #e6e6e6;
}
.fa-table1 {
    border-radius: 10px 10px 0px 0px;
    background-color: #F2F2F2!important;
    border-top-width: 2px!important;
    border: solid 1px #ddd;
    border-spacing: 0;
    overflow: hidden;
    padding: 0;
}
.fa-table1 td {
    padding: 5px;
    border: solid 1px #ddd!important;
    border-top: none!important;
}

Se você quiser mudar a cor azul, procure no código CSS pela cor #39C no seu CSS, e alterá-la para uma de seu agrado.

Assim está à seu agrado?
Até mais. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por DionataBraga._. 16.01.17 22:31

Cara, está perfeito ! Muito feliz

Tem como aumentar o tamanho da tabela inteira?
Incluindo fonte e tudo, igualzin está... <3

Ficou muito pequeninho '-'

DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 16.01.17 23:33

Troque o código passado anteriormente por:
.fa-table1 tr:nth-child(2) {
font-weight: bold;
text-align: center;
color: #39c;
}
.fa-table1 tr:first-child {
text-align: center;
background-color: #39c;
color: #fff;
font-weight: bold;
}
.fa-table1 tr:hover {
background-color: #e6e6e6;
}
.fa-table1 {
border-radius: 10px 10px 0px 0px;
background-color: #F2F2F2!important;
border-top-width: 2px!important;
border: solid 1px #ddd;
border-spacing: 0;
overflow: hidden;
padding: 0;
font-size:12px;
}
.fa-table1 td {
padding: 5px;
border: solid 1px #ddd!important;
border-top: none!important;
}

Aumente os valores em vermelho à seu gosto.
O primeiro valor em vermelho, modifica o tamanho da fonte.
O segundo valor em vermelho, modifica o tamanho dos quadradinhos.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por DionataBraga._. 16.01.17 23:57

Obrigado por tudo moço, esse tópico pode ficar em privado?
DionataBraga._.

DionataBraga._.
Novo Membro

Membro desde : 14/02/2015
Mensagens : 29
Pontos : 43

http://friendsnwd.forumclan.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Tabela em código

Mensagem por Luiz 17.01.17 0:15

Negativo. =p
Todos os tópicos deste fórum devem ficar aberto pois, no futuro, se, por ventura, alguém tiver uma mesma dúvida que a sua, ele puder encontrá-la, sem ter de criar um tópico novo.

Lamento. :/

No mais, a questão encontra-se resolvida?
Se sim, clique no botão resolvido ( Resolvido ), acima da primeira mensagem deste mesmo tópico.

Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tabela em código

Mensagem por Kyo Panda 17.01.17 23:46

Tabela em código Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos