[TUTORIAL] 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

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



2º - Conhecer sobre tabelas

[ table ] e [ /table] Tags de abertura das tabelas. Aceitam atributos css como por exemplo, background-image.

[ tr ] e [ /tr] Tags que determinam as linhas das tabelas. (horizontais)

[ td ] e [ /td] 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.

3º - Criando uma tabela de Staff
Vamos fazer agora uma tabela de staff, assim como a daqui do FDF.
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.

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.

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.

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.

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][/table] [/td][/tr]Caso queira adicionar mais membros cole aqui, caso não apague este texto.
[/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.

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]

5º - 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]

© Fórum dos Fóruns

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