[Tutorial] Tabelas em BBCode

Autor: Desconhecido
Funcionalidade: Em todas as versões
Descrição: 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.

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

[tr][td align="left"][/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][table class="table1" style="width: 100%;"][/td][table class="row2" style="width: 100%;"][tr][table class="table1" style="width: 100%;"][/table]