Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como fazer sub entrada?
Hoje à(s) 08:29 am por Kyo Panda

» Grupo com neon no nick
Hoje à(s) 08:28 am por Kyo Panda

» Como modificar a estrutura do widget
Hoje à(s) 08:26 am por Kyo Panda

» Mostrar usuário do post
Hoje à(s) 08:26 am por Kyo Panda

» Template quebra ao ser editado
Hoje à(s) 08:21 am por Kyo Panda

» Nova opção de login
Hoje à(s) 07:06 am por Starset

» Problema após adicionar widget
Hoje à(s) 12:52 am por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
215 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 214 Visitantes :: 2 Motores de busca

PrisoN†BreaK

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Tabela em código

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

Resolvido Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 05:27 pm

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:

OBS :
Tem um título
http://i.imgur.com/UAIXQM5.png

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 16/01/17, 10:45 pm, editado 1 vez(es)
avatar

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 05:41 pm

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

---

Se precisar de ajuda para montar uma, pode dizer.

Até mais.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 05:51 pm

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

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 06:02 pm

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

Até mais.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 06:04 pm

avatar

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 06:31 pm

Você prefere sua tabela em: HTML ou BBCode?

Até mais. Feliz
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 06:39 pm

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

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 07:06 pm

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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 07:18 pm

Não tem como deixar nessa estrutura da imagem abaixo não ?


Ficou muito estranho na minha opinião :


Tem algum modelo mais elegante tipo a imagem de exemplo?
Dionata escreveu:
avatar

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 07:38 pm

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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 08:31 pm

Cara, está perfeito ! Muito feliz

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

Ficou muito pequeninho '-'

avatar

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 09:33 pm

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.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por DionataBraga._. em 16/01/17, 09:57 pm

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

DionataBraga._.
Nível 4

Masculino
Inscrito dia : 14/02/2015
Mensagens : 29
Pontos Ativos : 43

http://friendsnwd.forumclan.com/

Resolvido Re: Tabela em código

Mensagem por Luiz em 16/01/17, 10:15 pm

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.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tabela em código

Mensagem por Kyo Panda em 17/01/17, 09:46 pm

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

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

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3819
Pontos Ativos : 5044

http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum