• Posts do Just Candy Doll •

Tabelinha

Neste tutorial você irá aprender a fazer tabelinhas fofas. Elas servem para você colocar recadinhos, notícias ou até mesmo um post de seu blog. Veja abaixo o tutorial para você fazer as tabelas.

-1° passo: salve a imagem da tabela que mais lhe agradar, salve o código dela no Bloco de Notas e depois monte o layout da tabela no seu editor de imagens.

  <TABLE cellSpacing=0 cellPadding=0 width=355 height=264 background="ENDEREÇO DA IMAGEM" border=0 style="border-collapse: collapse" bordercolor="#111111"> <TBODY> <TR> <TD width=61 height=28> </TD> <TD width=133 height=28> </TD> <TD width=148 height=28> </TD> <TD width=14 height=28> </TD></TR> <TR> <TD width=194 height=237 colspan="2" rowspan="2"> </TD> <TD width=148 height=209> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 146; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:#ED6979; SCROLLBAR-BASE-COLOR:#000000; HEIGHT: 210"> <font face="Times New Roman" size="2" color="#000000">   </font></DIV></TD> <TD width=14 height=209> </TD></TR> <TR> <TD width=148 height=28> </TD> <TD width=14 height=28> </TD></TR></TBODY></TABLE> 

  <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="372" height="323" id="AutoNumber1" background="ENDEREÇO DA IMAGEM"> <tr> <td width="182" height="25"> </td> <td width="178" height="25" colspan="2"> </td> </tr> <tr> <td width="182" height="198"> </td> <td width="159" height="198" valign="top"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="164" id="AutoNumber2" height="59"> <tr> <td width="164" height="59" valign="top"> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 160; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:#FE95BD; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 276"> <font face="Times New Roman" size="2" color="#000000">  </font></font></DIV></td> </tr> </table> </center> </div> </td> <td width="20" height="198"> </td> </tr> <tr> <td width="182" height="19"> </td> <td width="162" height="19" colspan="2"> </td> </tr> </table> </center> </div> 

  <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="411" height="322" id="AutoNumber1" background="ENDEREÇO DA IMAGEM"> <tr> <td width="192" height="156" rowspan="3"> </td> <td width="219" height="80" colspan="2"> </td> </tr> <tr> <td width="207" height="1" valign="top"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="129"> <tr> <td width="100%" height="129"> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 211; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:#dibb5b; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 165"> <font face="Times New Roman" size="2" color="#000000">  </font></DIV></td> </tr> </table> </center> </div> </TD> </td> <td width="12" height="1"> </td> </tr> <tr> <td width="219" height="74" colspan="2"> </td> </tr> </table> </center> </div> 

  <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="344" height="320" id="AutoNumber1" height="320" background="ENDEREÇO DA IMAGEM"> <tr> <td width="344" height="121" colspan="3"> </td> </tr> <tr> <td width="82" height="144"> </td> <td width="189" height="144"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="112"> <tr> <td width="100%" height="112"> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 215; SCROLLBAR-3DLIGHT-COLOR: #dibb5b; SCROLLBAR-ARROW-COLOR:#dibb5b; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 144"> <font face="Times New Roman" size="2" color="#000000">  </font> </DIV></td> </tr> </table> </center> </div> </td> <td width="73" height="144"> </td> </tr> <tr> <td width="344" height="51" colspan="3"></td> </tr> </table> </center> </div> 

  <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="378" height="343" id="AutoNumber1" background=" ENDEREÇO DA IMAGEM "> <tr> <td width="378" height="38" colspan="3"> </td> </tr> <tr> <td width="182" height="139"> </td> <td width="170" height="139" valign="top"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2"> <tr> <td width="100%"> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 172; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:#dibb5b; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 161"> <font face="Times New Roman" size="2" color="#000000">  </font> </DIV></td> </tr> </table> </center> </div> </td> <td width="26" height="139"> </td> </tr> <tr> <td width="378" height="142" colspan="3"> </td> </tr> </table> </center> </div> 

  <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="368" height="340" id="AutoNumber1" background="ENDEREÇO DA IMAGEM"> <tr> <td width="64" height="20"> </td> <td width="266" height="20"> </td> <td width="38" height="20"> </td> </tr> <tr> <td width="64" height="126"> </td> <td width="266" height="126" valign="top"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="43"> <tr> <td width="100%" height="43" valign="top"> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 266; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:#dibb5b; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 136"> <font face="Times New Roman" size="2" color="#000000">  </font> </DIV></td> </tr> </table> </center> </div> </td> <td width="38" height="126"> </td> </tr> <tr> <td width="64" height="62" rowspan="2"></td> <td width="266" height="182"> </td> <td width="64" height="62" rowspan="2"></td> </tr> <tr> <td width="266" height="1"></td> </tr> </table> </center> </div> 

  <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="368" height="340" id="AutoNumber1" background="ENDEREÇO DA IMAGEM" > <tr> <td width="52" height="182"> </td> <td width="264" height="182"> </td> <td width="52" height="182"> </td> </tr> <tr> <td width="52" height="23"> </td> <td width="264" height="23" valign="top"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2"> <tr> <td width="100%"> <DIV style="SCROLLBAR-FACE-COLOR: #FFFFFF; LEFT: 306px; FLOAT: right; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 264; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:#dibb5b; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 132"> <font face="Times New Roman" size="2" color="#000000">  </font> </DIV></td> </tr> </table> </center> </div> </td> <td width="52" height="23"> </td> </tr> <tr> <td width="52" height="12"> </td> <td width="264" height="12"> </td> <td width="52" height="12"> </td> </tr> </table> </center> </div> 

2° passo: depois de ter salvo a imagem, faça o layout e depois disso hospede a imagem dela e coloque onde diz ENDEREÇO DA IMAGEM.

3° passo: após ter feito o 2° passo modifique o código com cores que prefere, borda, imagens e o conteúdo que você vai colocar na tabelinha. Depois de tudo é só você copiar o código da tabela e colá-lo onde quer que apareça. São 7 modelos e 7 códigos, ou seja, se você quiser pode fazer mais de uma. Se o nosso tutorial for útil, dê os créditos. Crédito: Cristiny Online