Mudando as especificações de uma tabela

Trabalhar com Tabelas

Parte II

Como mudar as especificações de uma TABELA pelo Código Fonte:

Para facilitar vamos repetir aqui o script da TABELA acima:

___________________________________

align=center (define a posição da tabela)

TABLE bgColor= #ffffd0 (neste comando você muda a cor do fundo da tabela, mudando o código da cor)

border=10 (aqui você define a espessura da borda da tabela)

borderColor= #fffffd (aqui você muda a cor da borda mais clara)

borderColorDark= #d0b448 (aqui você define a cor da borda mais escura)

width="50%" (aqui você define a largura total da tabela, mas, não se preocupe em fazer a mudança por aqui - é que a tabela vai se expandindo, automaticamente, à medida em que você escreve).

_____________________________

Sugestão:

Faça uma nova pausa e coloque em prática tudo o que expliquei até aqui.

Experimente tudo - verá como é fácil!

Agora vamos brincar um pouco!

Observe a TABELA:

TABELA COM MOLDURA

Bonitinha, não é?

Pois eu simplesmente copiei a tabela lá de cima, colei aqui, inseri uma imagem e escrevi um pequeno texto - simples assim.

Após a colocação do texto e da imagem, o Código Fonte ficará assim:

           

    &nbsp;</FONT><FONT
face=Verdana
size=2>         

       
</FONT></DIV>
<DIV> </DIV>
<DIV><FONT face=Verdana size=2>
<TABLE borderColor=#ffffd0 borderColorDark=#d0b448 width="50%" align=center
bgColor=#ffffd0 border=10>
<TBODY>
<TR>
    <TD>
      <DIV align=left><IMG style="WIDTH: 71px; HEIGHT: 73px" alt="" hspace=20
      src="C:\Meus documentos\IMAGENS\GIFS ANIMADAS 2\09_chibi_moon.gif"
      align=absMiddle border=0><FONT face=Verdana size=2>TABELA COM
      MOLDURA</FONT></DIV></TD></TR></TBODY></TABLE></FONT></DIV>

Vamos lá! Experimente!

Selecione e copie o código acima, em verde, e cole, como já fez anteriormente com o primeiro código em azul, no código fonte de uma nova mensagem.

O resultado será uma tabela igualzinha.

__________________________________________

Agora vamos entender os comandos e definições do script modificado:

Não se assuste, é bem simples!

Vou procurar explicar tudo, porque julgo importante que você saiba exatamente o que está fazendo:

Aí estão definidos os vários elementos:

color=#ff00ff a cor do texto

align=absMiddle o alinhamento do texto dentro da tabela

<FONT face=Verdana o tipo da fonte (Verdana)

<FONT face=Verdana size=2> o tamanho da fonte

<DIV align=left><IMG style="WIDTH: 71px; HEIGHT: 73px" alt="" hspace=20 src="C:\Meus documentos\IMAGENS\GIFS ANIMADAS 2\09_chibi_moon.gif" aqui estará indicado o endereço da imagem que você utilizar e as dimensões da mesma.

<FONT face=Verdana size=2>TABELA COM MOLDURA</FONT> o texto propriamente dito: TABELA COM MOLDURA

Conforme já disse antes, este texto pode ser apagado (com cuidado) e reescrito sem que você precise utilizar o código fonte.

Escreva diretamente na tabela e depois, selecione o texto e defina o tamanho e a cor da fonte, como faz em seus emails.

___________________

ilustração (gif animada) by Vanda Vasconcellos

Tutorial elaborado por Angela Maria P. Glavam

design by Angela Maria Pereira Glavam