Tabela em código

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 !

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.

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?

por Luiz 16.01.17 20:02

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

Até mais.

por DionataBraga._. 16.01.17 20:04

Claro, aqui está : https://ajuda.forumeiros.com/t2156-faq-gestao-das-cores#12565

por Luiz 16.01.17 20:31

Você prefere sua tabela em: HTML ou BBCode?

Até mais. Feliz

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

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

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:

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

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

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.

por DionataBraga._. 16.01.17 23:57

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

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 (

), acima da primeira mensagem deste mesmo tópico.

Até mais.

por Kyo Panda 17.01.17 23:46

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

Tabela em código