:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 25

Escrevendo nossas próprias tabelas

Um dos recursos mais amplos para formatação, é a criação de tabelas. O código html funciona de forma um pouquinho diferente quando se trata de tabelas em e-mails. (É bem mais simples formatar uma tabela para ser usada em um site).

O ideal é escrevermos o script em um bloco de notas e só depois aplicá-lo à aba "Origem" do e-mail. Dizemos que temos ali um script "limpo" que poderá ser usado em outros trabalhos. Basta mudarmos os fundos, as cores, alguns efeitos....

Vamos, então, entender um pouco mais as tabelas, de forma a construirmos as nossas. Já estamos trabalhando com tabelas há algum tempo, mas é importante aprendermos a criar as nossas. Vamos rever alguns tópicos importantes.

As tabelas são sempre escritas entre as tags <TABLE> </TABLE>; isto é, para começarmos a escrever o que vai dentro de uma tabela, usamos <table> e, no final, depois que tivermos colocado todos os dados que queremos, encerramos "a explicação"com </table>, para que nossa linguagem seja entendida e transformada na tabela que idealizamos.

Chamamos de células as colunas ou "divisões" da tabela.
Cada célula precisa ser indicada por <TD>. Logo depois vamos escrever o que queremos colocar em cada célula, por exemplo, uma imagem, um texto e depois fechamos com </TD>.

A tabela também "rows" (seriam nossas linhas, mas aqui o termo em inglês já é tão difundido que acredito seja adequado nos habituarmos a ele.

As linhas ou rows começam com a tag <TR> e terminam com </TR>.

Consegui me fazer entender? Qualquer dúvida, escrevam-me!

Vejam dois exemplos de tabelas.

Exemplo (temos uma coluna e duas linhas)

Célula 1

Célula 2

Vamos ver agora, como escrevemos em linguagem html a tabela do exemplo:

Começamos com <TABLE> a seguir colocamos as informações como, por exemplo, as bordas, a largura, as cores da tabela.
A seguir, indicamos que vamos apresentar a linha (row)<TR>
Não vamos escrever nada depois de <TR> vamos indicar que haverá uma coluna<TD>.
Depois de <TD> escrevemos o que deve estar nesta célula, se uma imagem, texto....e fechamos com </TD>.
Como esta linha tem apenas uma célula, fechamos agora com </TR>
T emos duas linhas, então devemos escrever novamente <TR> para que o Outlook entenda que teremos outra linha depois desta.
Escrevemos novamente <TD> e, a seguir, as informações que queremos indicar e fechamos com </TD>.
Depois fechamos a célula com </TR>.
E finalmente, acabamos a tabela e indicamos </TABLE>

Exemplo 2 (uma linha e duas colunas)

Célula 1

Célula 2

Vejamos como ficaria, agora o esquema básico da tabela deste segundo exemplo:
<TABLE>
<TR>
<TD> </TD>.
<TD></TD>.
</TABLE>

Vamos ver agora o que indicamos depois da tag <TABLE>
Geralmente informamos:

1. a largura da tabela em pixels ou porcentagem (uma dica: prefira sempre a largura em pixels para que o redimensionamento não altere a apresentação final do seu trabalho);

2. o alinhamento da tabela;

3. se a tabela tem bordas, qual a espessura da borda e as cores da mesma; usamos
borderColorLight (borda de cor clara) e borderColorDark(borda de cor escura);

4. O Cellspacing qu indica o espaço que há entre a célula e a borda da tabela (indicamos por px (pixel);

5. O Cellpadding que indica a distância entre a imagem e a borda da célula.

Veja um código de tabela na qual indiquei um filtro de transição para a imagem e um efeito de texto com sombra:

<Tr>
<TD align=center>
<IMG src="endereço da imagem"
style="FILTER:blendTrans(duration=15); VISIBILITY:hidden"
onload="filters.blendTrans.Apply(); style.visibility='visible'; filters.blendTrans.Play()">
</TD>
</TR>

<TR>
<TD align=center bgcolor=#6E381E>
<MARQUEE direction=up ScrollDelay=80 ScrollAmount=1 width=350px height=150px>
<DIV align=center style="FILTER:dropshadow(offx=1, offy=2, color=#000000, enabled=1); width:350px; height:150px">
<FONT face="Comic Sans MS" size=4 color=#DD813E>
here text
</FONT>
</DIV>
</MARQUEE>
</TD>
</TR>
</TABLE>

Obs.: Para o alinhamento horizontal usamos um dos três códigos abaixo descritos;
align=left
align=right
align=center

Para o alinhamento vertical podemos escolher entre:
valign=top
valign=bottom
valign=middle

Tarefa:

Escreva um script (em seu bloco de notas) para a tabela do exemplo 1.
Escolha um bonito background para sua mensagem e use também o código para moldura e barra de rolagem colorida.
Adicione uma figura na célula 1 de sua tabela e use um filtro de transição à sua escolha para esta imagem. Na célula 2, escreva um texto com sombra e faça o texto ir subindo. Formate a mensagem, usando seu script e anexe o script que você redigiu.
Envie para o grupo.

Importante: Insira seu cartão de visitas!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo


	.