[TUTORIAL] Tabelas em BBCode

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

  • 0

[TUTORIAL] Tabelas em BBCode Empty [TUTORIAL] Tabelas em BBCode

Mensagem por Solkis em 01.11.10 13:35

[TUTORIAL] Tabelas em BBCode Magic Tabelas em bbcode
As tabelas são úteis em variadas formas de uso, e em fóruns, ela é mais que útil para a exibição dos membros da staff ou até mesmo para a organização do fórum em qualquer uma das áreas que ele possua, basta usar a criatividade.


--> Tutoriais e astúcias <--
Tabelas em BBCode




- Ativar o BBCode em seu fórum.
Para ativar o html em seu fórum, aceda a: Painel de Controle [TUTORIAL] Tabelas em BBCode 633772 Geral [TUTORIAL] Tabelas em BBCode 633772 Mensagens, MPs e Emails [TUTORIAL] Tabelas em BBCode 633772 Configuração
Procure pela alternativa "Permitir BBCode" e marque "Sim".

(carregue na imagem para aumentar)
[TUTORIAL] Tabelas em BBCode Painel12

- Conhecer sobre tabelas

[ table ] e [ /table] [TUTORIAL] Tabelas em BBCode 633772Tags de abertura das tabelas. Aceitam atributos css como por exemplo, background-image.
[ tr ] e [ /tr] [TUTORIAL] Tabelas em BBCode 633772 Tags que determinam as linhas das tabelas. (horizontais)
[ td ] e [ /td] [TUTORIAL] Tabelas em BBCode 633772 Tags que determinam as colunas das tabelas (verticais), também aceitam atributos css.

Um exemplo de tabela feita, utilizando atributos css:
Código:
1 [table border=1 bgcolor="yellow"]
2  [tr]
3      [td]1ª coluna - 1ª linha[/td]
4        [td bgcolor="green"]2ª coluna - 1ª linha[/td]
5  [/tr]
6[/table]
Acabamos de fazer uma tabela com o fundo em cor amarela e o fundo de uma coluna em cor verde.
Para uma personalização avançada, use a imaginação e utilize imagens, bordas e etc, abuse do css.

- Criando uma tabela de Staff
Vamos fazer agora uma tabela de staff, assim como a daqui do FDF.
[TUTORIAL] Tabelas em BBCode Puce_bleu Título
Código:
[table class="forumbg" style="width: 98%; margin: 0 auto; padding: 5px 3px 3px 3px;" cellspacing="0"][tr][td align="left" colspan="2" style="padding-bottom: 3px; background-image: url(imagem de fundo);"][color=#7bb92b][b]Nome do Grupo[/b][/color][/td][/tr][tr][td align="left"]
Agora precisamos fazer a edição de acordo com o fórum.

background-image: url(imagem de fundo) - Você deverá alterar o texto imagem de fundo, pela url da imagem que deseja usar de fundo do título da tabela (caso queira).
Nome do grupo: Você deverá alterar este texto para o nome do grupo que está apresentando, como por exemplo: Adminineiros ou Moderadeiros. Repare que antes do nome possui a tag Color, a cor que está é verde, altere para a cor de seu grupo.

[TUTORIAL] Tabelas em BBCode Puce_bleu Imagem do rank
Código:
[table class="row2" style="width: 100%;"][tr][td align="left"][table class="table1" style="width: 100%;"][tr][td align="left"]Rank:[/td][td align="left"][img]endereço da imagem do rank[/img][/td][/tr]
Rank: - Repare que logo após "Rank:" está chamando uma imagem, esta imagem é a imagem do rank que estamos apresentando, edite o "endereço da imagem do rank", pelo endereço da imagem de seu rank.

[TUTORIAL] Tabelas em BBCode Puce_bleu Nome do rank.
Código:
[tr][td align="left"]Título do rank:[/td][td align="left"][b][color=#7bb92b]Nome do rank[/color][/b][/td][/tr]
Nome do rank: - Substitua este texto pelo nome do seu rank, exemplo.: Admineiros. Repare que antes deste texto, possui a tag color aberta, edite a cor para a cor do seu rank, ou para uma de sua preferência.

[TUTORIAL] Tabelas em BBCode Puce_bleu O grupo e sua descrição
Código:
[tr][td align="left"]Função do grupo:[/td][td align="left"]Descrição da função do grupo[/td][/tr]
Descrição da função do grupo: - Substitua este texto pela descrição da função do grupo que está sendo apresentado.

[TUTORIAL] Tabelas em BBCode Puce_bleu Membros do Grupo
Código:
[tr][td align="left"][table class="row2" colspan="2" style="width: 100%;"][tr][td align="left"][table class="table1" style="width: 100%;"][tr class="row3"] [td align="left" colspan="2"][b]Membros do grupo[/b][/td][/tr][tr][td align="left" style="width:50px;"][url="mensagem pessoal"][img]http://illiweb.com/fa/prosilver/icon_contact_pm.png[/img][/url][/td][td align="left"][url=endereço do perfil"][/url][b][color=#7bb92b]Nome do membro do grupo.[/color][/b][/url][/td][/tr][/table] [/td][/tr]Caso queira adicionar mais membros cole aqui, caso não apague este texto.[/table] [/td][/tr]
[/table] [/td][/tr][/table]
url=Mensagem pessoal - edite o texto "Mensagem Pessoal", pelo endereço de enviar uma mensagem pessoal ao membro do grupo.
nome do membro do grupo - Substitua este texto para o nome do membro que está sendo apresentado. Observe que ao lado possui a tag color mude a cor para uma de sua preferência, ou a do grupo para uma maior organização.
Endereço do perfil - Substitua este texto pela URL do perfil do membro que está sendo apresentado.

[TUTORIAL] Tabelas em BBCode Puce_bleu Adicionando mais partes...
Caso seja necessário adicionar mais um membro na lista do grupo. Apenas copie esta parte e cole no lugar do texto que tem no código acima.
Código:
[tr][td align="left" style="width:50px;"][url="mensagem pessoal"][img]http://illiweb.com/fa/prosilver/icon_contact_pm.png[/img][/url][/td][td align="left"][url=perfil do usuário"][/url][b][color=#7bb92b]Nome do membro do grupo.[/color][/b][/url][/td][/tr][/table] [/td][/tr][/table] [/td][/tr]


- Código final
Código:
[table class="forumbg" style="width: 98%; margin: 0 auto; padding: 5px 3px 3px 3px;" cellspacing="0"][tr]
[td align="left" colspan="2" style="padding-bottom: 3px; background-image: none;"]
[color=#7bb92b][b]Nome do Grupo[/b][/color][/td][/tr][tr][td align="left"]
[table class="row2" style="width: 100%;"][tr][td align="left"][table class="table1" style="width: 100%;"]
[tr][td align="left"]Rank:[/td][td align="left"][img][/img][/td][/tr]
[tr][td align="left"]Título do rank:[/td][td align="left"][b][color=#7bb92b]Nome do rank[/color][/b][/td][/tr]
[tr][td align="left"]Função do grupo:[/td]
[td align="left"Descrição da função do grupo[/td][/tr]
[tr][td align="left"]Descrição:[/td][td align="left"][i]Descrição do grupo[/i][/td][/tr][/table][/td][/tr]
[tr][td align="left"][table class="row2" colspan="2" style="width: 100%;"][tr][td align="left"][table class="table1" style="width: 100%;"][tr class="row3"] [td align="left" colspan="2"]
[b]Membros do grupo[/b][/td][/tr][tr]
[td align="left" style="width:50px;"][url=http://ajuda.forumeiros.com/msg.forum?mode=post&u=7240][img]http://illiweb.com/fa/prosilver/icon_contact_pm.png[/img][/url][/td][td align="left"][url=http://ajuda.forumeiros.com/profile.forum?mode=viewprofile&u=7240][b]
[color=#7bb92b]Nome do membro do grupo.[/color][/b][/url] [/td][/tr][/table] [/td][/tr][/table] [/td][/tr][/table] [/td][/tr][/table]

[TUTORIAL] Tabelas em BBCode Untitl13



© Fórum dos Fóruns



[TUTORIAL] Tabelas em BBCode Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Tabelas em BBCode
Solkis

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9984
Pontos Ativos : 12077

Ver perfil do usuário https://ajuda.forumeiros.com

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


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