Assinaturas mais Limpas usando o comando Tabela

Índice ==>

Observações Iniciais Introdução A Tabela Comandos Conclusão

---

1) Observações Iniciais

---

Em primeiro lugar, esse é apenas um guia para que os novatos não lotem suas assinaturas com dois quilômetros de imagens, com textos, friend codes e por aí vai. Não é para ficar bonito, e sim prático.

---

2) Introdução

---

Olá membro do fórum! Você gostaria de criar uma assinatura simples e útil para você e para os outros usuários?

Em primeiro lugar, o que é uma assinatura?
Se você não sabe, a assinatura, ass ou sign (sing para aqueles que não sabem escrever direito) é um espaço personalizável que você pode colocar no fim de cada post seu.

O que pode ser colocado? Textos Imagens pequenas e médias Flash muito pequenos (um botão de play para uma música, por exemplo) Links Propagandas BBCode HTML (não recomendado, por poder estragar o layout)

O que não pode ser colocado? Pornografia Imagens grandes (um wallpaper, por exemplo) Flash no geral, excluindo os anteriores Conteúdo ofensivo

É claro que, bem, usemos o bom censo. Não vamos lotar nossa assinatura de imagens brilhosas e sedusentes, ou virar um Classificados da PM. Lembrando que há um limite de peso nas assinaturas de 350kb; ou seja, você pode colocar quantas imagens e textos e códigos quiser; desde que tudo junto não ultrapasse os 350kb.

Essa regra é mais aplicada para imagens e flash pequenos. Considerando que o texto é algo simples de se inserir em um fórum, podemos dizer que todo um texto de dez linhas pese apenas 1kb.

Exemplo de assinatura:

• Imagem de 159kb + Imagem de 88kb + Texto = 248kb (dentro do limite)

Flash são altamente não-recomendados, visto que são geralmente pesados e excedem facilmente o limite da sign (assinatura).
Vale lembrar também que imagens que se movem (.gifs) são geralmente mais pesados que imagens fixas... logo não adianta pegar qualquer imagem de gatinhos no Tumblr, que elas, em sua maioria, pesam mais que os 350kb permitidos.

Para editar sua assinatura, acesse seu [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] e selecione a aba Assinatura. Ou simplesmente clique no link abaixo:
Mas não vamos perder tempo falando apenas de assinaturas. O propósito desse tópico é aprender a compactá-la em um espaço pequeno.

---

3) A Tabela

---

Para quem não sabe, uma tabela é isso aqui:

	Janeiro	Fevereiro	Março
Lucro Obtido pela Empresa Amoras	R$3.000,00	R$4.000,00	R$5.000,00
Lucro Obtido pela Empresa Beterrabas	R$6.000,00	R$2.500,00	R$3.500,00

Ou seja, é um arranjo de dados em forma de grade. Na matemática, é usado em matriz para altas tretas, mas no fórum o comando Tabela é usado para criar "caixas de texto". Deste modo, usamos o comando tabela para criar vários "mini-campos" onde podemos colocar o que quisermos.

Para criar uma tabela, clique no botão Tabela [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] logo acima. Ao clicar no botão, aparecerá dois campos de texto, onde você escolherá o número de linhas e colunas. Na minha tabela de exemplo, escolhi 3x4, ou seja, três linhas e quatro colunas. Mas na assinatura, usaremos um valor menor, como 1x2.

Usando a ferramenta tabela, podemos criar textos do lado de imagens, como é o caso abaixo:

| #pikametalfusion | #klashyoutuber | #lambdanasuateta | #freezavoltaprodbz |

╔ ║ ║ ║ ║ ╚

═ ═ ═ ═ ═ ═ ═ ═ ═ ═ Eu queria tanto que você não fugisse de mim Mas se fosse eu, eu fugia. ═ ═ ═ ═ ═ ═ ═ ═ ═ ═

╗ ║ ║ ║ ║ ╝

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Sem a ferramenta tabela, ficaria algo assim:

| #pikametalfusion | #klashyoutuber | #lambdanasuateta | #freezavoltaprodbz |
╔
║
║
║
║
╚

═ ═ ═ ═ ═ ═ ═ ═ ═ ═
Eu queria tanto que você
não fugisse de mim
Mas se fosse eu,
eu fugia.
═ ═ ═ ═ ═ ═ ═ ═ ═ ═

╗
║
║
║
║
╝[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Entendeu a diferença?

---

4) Comandos

---

Primeiramente, vamos criar uma tabela 1x2. Clica-se na ferramenta Tabela [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] e então digita-se "1" no primeiro campo, e então "2" no segundo. Obtemos o seguinte resultado

Código:

[table border="1"]
[tr]
[td] [/td][td] [/td]
[/tr]
[/table]

Obs: os quadradinhos de citação NÃO APARECEM. Só coloquei eles para destacar os campos de texto.

Assim como todo BBCode, a tabela funciona no espaço de [ comando ] e [ /comando ].
Logo, tudo entre [ table ] e [ /table ] são os códigos da tabela.
Os marcadores [ tr ] e [ /tr ] marcam as linhas. Logo, tudo o que for escrito neles, pertencerá a uma linha da tabela. Faça mais campos [ tr ] se quiser mais linhas.
Os marcadores [ td ] e [ /td ] marcam as colunas. Digamos que eles demarcam as caixas de texto que criamos na tabela.

Meu deus! Quanta coisa!
Se não entendeu nada, vá testando os códigos. Uma hora você acerta.

(algumas horas depois...)

Oh, entendi como funciona! #aleluia

Mas, eu queria saber como que tira esse contorno feio da minha borda...
Para isso, só remover o border="1" do código da tabela.

Código:

[table]
[tr]
[td] Fadas Borboletas e Elefantes [/td][td] Bolinhas Pretas Fedorentas [/td]
[/tr]
[/table]

Fadas Borboletas e Elefantes

Bolinhas Pretas Fedorentas

Hum... interessante... mas eu queria colocar uma imagem, que nem você fez!

Para isso, escolha um dos dois quadrados (esquerda ou direita) e coloque lá o código completo da imagem. Ou seja, [ img ] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [ /img ].

Exemplo:

Código:

[table]
[tr]
[td] Texto Aleatório [/td][td]  [img]~~URL DA IMAGEM AQUI~~[/img] [/td]
[/tr]
[/table]

Aqueles olhos verdes eu garanto que é lente

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Lembrando que as duas caixas de texto ficam do tamanho que você desejar! Elas se adaptam ao tamanho do que você colocar ali. Mas lembre-se que duas caixas de texto em uma linha tendem a manter o mesmo centro. Ou seja, o texto vai ficar meio que centralizado em relação à imagem.

Exemplo usando duas imagens:

Código:

[table]
[tr]
[td] [img]~~LINK DA IMAGEM 1~~[/img] [/td][td] [img]~~LINK DA IMAGEM 2~~[/img] [/td]
[/tr]
[/table]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Mas tipo, eu queria aproveitar e colocar uns links, sabe? Pro meu perfil, pro meu youtube, pro meu instagram, pro meu twitter, pro meu facebook, pro meu tumblr, pro meu formspring pro meu steam, pro meu caralho a quatro.
Então, coloque em um dos campos o código completo pro link.

Para quem não sabe colocar um link "mascarado":

Código:

[url=www.coloqueolinkaqui.com]Escreva Aqui o Que Você Quer que Apareça[/url]

Escreva Aqui o Que Você Quer que Apareça

Código:

[table]
[tr]
[td] [img]~~LINK DA IMAGEM~~[/img] [/td][td] [url]Link 1[/url]
[url]Link 2[/url]
[url]Link 3[/url] [/td]
[/tr]
[/table]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Link 1 Link 2 Link 3

Mais uma coisinha: quem quiser colocar a tabela toda encostada na direita, só precisa colocar um align="right" no código da tabela.
Ah sim, lembre-se de Alinhar À Direita [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] manualmente o conteúdo das caixas de texto, para que fique "encostado" na imagem.

Código:

[table align="right"]
[tr]
[td] [right]Texto Aleatório[/right] [/td][td] [img]~~LINK DA IMAGEM~~[/img] [/td]
[/tr]
[/table]

BIG BLACK HORSE AND A CHERRY TREE TUDO ENCOSTADO NA IMAGEM ALEATORIA DO LADO

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Caramba! Que legal! Mas agora, queria colocar mais uma coluna! Quero aproveitar ao máximo a tabela!
Ao escolher os valores 1x2, coloque 1x3. Ou então, coloque mais um [ td ] [ /td ] no seu código de tabela.

Código:

[table]
[tr]
[td] Coluna 1 [/td][td] Coluna 2 [/td][td] Coluna 3 [/td]
[/tr]
[/table]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

---

5) Conclusão

---

Bem, isso é o principal para qualquer um que queira usar tabelas na assinatura. AS novidades e coisas legais vão aparecendo com a combinação da tabela com outros BBCodes (por exemplo, fazer uma lista de links, ou linhas de texto coloridas que acompanhem a imagem).

Gastei umas duas horas fazendo isso, espero que não passe despercebido.