[TUTORIAL] Tabelas em BBCode
Página 1 de 1 • Compartilhe
[TUTORIAL] Tabelas em BBCode
Tabelas em bbcode |
--> Tutoriais e astúcias <--
Tabelas em BBCode
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]
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"]
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://2img.net/i/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. |
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://2img.net/i/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://2img.net/i/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 |
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos