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
» Aparecer pop-up de login ao clicar em Conectar-se
Hoje à(s) 05:52 am por Flames

» Colocar link do perfil no menu
Hoje à(s) 05:51 am por Luiz

» Personalizar barra de ferramentas
Hoje à(s) 05:25 am por Flames

» Logo do fórum
Hoje à(s) 05:04 am por Luiz

» Cor do fundos dos tópicos
Hoje à(s) 05:02 am por Luiz

» Como adicionar um Painel de Usuário no fórum?
Hoje à(s) 04:59 am por Luiz

» Categoria do fórum
Hoje à(s) 12:06 am por PrisoN†BreaK

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
Flames
 
JulioPais
 
Shek
 
APOllO
 
Forumpw
 

Quem está conectado
221 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 221 Visitantes :: 2 Motores de busca

Nenhum

[ 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 : 3566
Pontos Ativos : 4246

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 : 3566
Pontos Ativos : 4246

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 : 3566
Pontos Ativos : 4246

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 : 3566
Pontos Ativos : 4246

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 : 3566
Pontos Ativos : 4246

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 : 3566
Pontos Ativos : 4246

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 : 3566
Pontos Ativos : 4246

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3708
Pontos Ativos : 4952

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