Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Skin Tabela

    Design On Brasil - Skin De Download


    E ai pessoal, irei ensinar à vocês como criar uma Skin de Download, como essa de cima, por Tabela <table>.

    Primeiro vamos entender o que é uma tabela. Tabela é uma divisória que pode ser composta por borda ou sem borda.

    Irei mostrar como criar uma tabela sem bordas. É algo bem simples:
    <table align="center" cellpadding="0" cellspacing="0" style="border: 0px solid black;"> </table>
    Align = Alinhamento (Center = Centro)
    Cellpadding e Cellspacing é a distância entre as partes da tabela.
    Border = Borda (Sem borda = 0)

    Agora irei mostrar os componentes internos da tabela. Em seguida irei dividi-la em partes e explica-la.
    <table align="center" cellpadding="0" cellspacing="0" style="border: 0px solid black;"><tbody>
    <tr><td height="63px" style="background: url(http://i1242.photobucket.com/albums/gg531/JonnyUp/skinpartes1_01.png) no-repeat;" width="300px"><div style="font-size: 15px; padding: 30px 0px 0px 20px;">
    Design On Space - Skin De Download</div>
    </td></tr>
    <tr><td height="221px" style="background: url(http://i1242.photobucket.com/albums/gg531/JonnyUp/skinpartes1_02.png) no-repeat;" width="300px">
    <a href="http://designonbrasil.blogspot.com/" target="_blank"><img height="202px" src="http://i1242.photobucket.com/albums/gg531/JonnyUp/lay3.png" style="margin-left: 29px; margin-top: -10px;" width="243px" /></a></td></tr>
    <tr>  </tr>
    <tr><td height="116px" style="background: url(http://i1242.photobucket.com/albums/gg531/JonnyUp/skinpartes1_03.png) no-repeat;" width="300px"><a href="http://designonbrasil.blogspot.com/" target="_blank"><img height="53px" src="http://i1242.photobucket.com/albums/gg531/JonnyUp/fatias2_07.png" style="margin-left: 30px; margin-top: -20px; padding: 0px 0px 20px 0px;" width="237px" /></a></td></tr>
    </tbody></table>


    <tr>Separa as linhas da tabela e as colunas. No caso eu estou usando apenas uma coluna.</tr>
    <td>É o complemento que há dentro da linha.</td>
    Height e Width são as devidas medidas das imagens. Dependo do local em que ela está posta. A imagem pode está posta como Background ou como Imagem "Src".

    Background: Url(Imagem da parte da tabela. Depende da parte da Skin).
    Src="Imagem que ficará dentro da Skin."
    Padding: Moverá as partes da internas da Skin como a imagem ou o nome "Design On Brasil - Skin de Download".
    Primeiramente para criar uma skin utilizando <table> você deve ter algum conhecimento em <div>. Por que sem div você não será capaz de mover as partes internas da skin.
    Resumindo, essa é uma skin rápida mas complicada de fazer por conter muitos códigos. Essa é uma versão simplificada de como criar um Skin básica usando <table>. Boa sorte ao tentar criar uma por sima do que ensinei. Até o outro tutorial que será Skin a partir de Div.

    0 Deixe um Comentário:

    Postar um comentário