Mais opção de tabelas HTML

Tabelas Html

Propriedades e Atributos de Tabelas

Tabelas são elementos muito importantes para uma página html. Elas proporcionam um designer mais diversificado, mais atraente. De uma forma geral são muito simples de serem construídas. Veja aqui alguns modêlos simples de tabelas.
Digamos que você já possua sua página pronta e quer incrementá-la com algumas tabelas.
Para uma coluna lateral que possua 300px, aqui uma tabela proporcional.
Abra sua página em modo de edição, ou seja com Bloco de Notas, e cole o seguinte código:

Criar uma Tabela Simples

<table border=”1″ cellspacing=”3″ cellpadding=”3″ width=”300″>
<tr>
<td bgcolor=”#ffcc00″> conteúdo da célula </td>
<td> conteúdo da célula </td>
</tr>
<tr>
<td> conteúdo da célula </td>
<td> conteúdo da célula </td>
</tr>
<tr>
<td> conteúdo da célula </td>
<td> conteúdo da célula </td>
</tr>
<tr>
<td> conteúdo da célula </td>
<td> conteúdo da célula </td>
</tr>
</table>

Como Ficará…

conteúdo da célula conteúdo de célula
conteúdo da célula conteúdo da célula
conteúdo da célula conteúdo da célula
conteúdo da célula conteúdo da célula

Definir o Atributo ‘Côr’ para as Células

<table border=”1″ cellspacing=”3″ cellpadding=”3″ width=”300″>
<tr>
<td bgcolor=”#ffcc00″> conteúdo da célula </td>
<td bgcolor=”#33ccff”> conteúdo da célula </td>
</tr>
<tr>
<td bgcolor=”#cccc00″> conteúdo da célula </td>
<td bgcolor=”#cccccc”> conteúdo da célula </td>
</tr>
</table>

Como Ficará…

conteúdo da célula conteúdo da célula
conteúdo da célula conteúdo da célula

Criar uma Tabela com Imagens:

<table border=”1″ cellspacing=”3″ cellpadding=”3″ width=”300px”>
<tr>
<td> <img src=”http://www.novidades100.com.br/dicas/images/acao01.jpg&#8221; width=”120″ height=”40″> </td>
<td> <img src=”http://www.novidades100.com.br/dicas/images/acao02.jpg&#8221; width=”120″ height=”40″> </td>
</tr>
<tr>
<td> <img src=”http://www.novidades100.com.br/dicas/images/acao03.jpg&#8221; width=”120″ height=”40″> </td>
<td> <img src=”http://www.novidades100.com.br/dicas/images/acao04.jpg&#8221; width=”120″ height=”40″> </td>
</tr>
</table>

Como Ficará…

atributo imagem de tabela atributo imagem de tabela
atributo imagem de tabela atributo imagem de tabela

Para Transformar as Imagens das Células em Links, Faça o Seguinte

<table border=”1″ cellspacing=”3″ cellpadding=”3″ width=”300″>
<tr>
<td> <a href=”http://www.novidades100.com.br/dicas/”&gt; <img src=”http://www.novidades100.com.br/dicas/images/acao05.jpg&#8221; width=”120″ height=”40″> </a> </td>
<td> <a href=”http://www.novidades100.com.br/videos/”&gt; <img src=”http://www.novidades100.com.br/dicas/images/acao06.jpg&#8221; width=”120″ height=”40″> </a> </td>
</tr>
</table>

Como Ficará…

atributo imagem de tabela atributo imagem de tabela

Veja um Último Exemplo de Tabela

Como último exemplo para finalizar, veja esta tabela ocupando todo o espaço disponível na área em que está localizada. Isto é importante para que você compreenda que sempre que possível, instrua a largura da tabela em ‘%’, para que ela se adeque a qualquer largura.
Veja também que foi inserido uma côr de fundo e consta também de uma célula vazia.
Você pode observar também que as configurações de css estão corretamente inseridas, o que vai fazer com que sua página seja validada pelo W3C.

<table style=”width:100%; height:auto; background:#fc7;text-align:center;”>
<tr>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
</tr>
<tr>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
<td style=”border:1px solid #009;”> &nbsp; </td>
</tr>
<tr>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
</tr>
<tr>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
<td style=”border:1px solid #009;”> Conteúdo da Célula </td>
</tr>
</table>

Como Ficará…

Conteúdo da Célula Conteúdo da Célula
Conteúdo da Célula
Conteúdo da Célula Conteúdo da Célula
Conteúdo da Célula Conteúdo da Célula

Como você pôde ver, tabelas são simples de serem criadas, basta você utilizar-se dos atributos cores, tamanho e espaços entre as células para exibí-las da forma que desejar.

Links Recomendados

Instalação e Configuração do Java Development Kit | JDK
Gerador de Curriculo para o Mercado de Trabalho
Gerenciar Blog no Novo Layout do Blogger
Gerar Metatags e Robots.Txt para Seu Site ou Blog
Gerar Certificadios Auto-Assinados x509
Sistema para Envio de Emails com Imagens Anexadas
Editar Legendas Ocultas em Videos do You Tube
Editar Anotações em Videos do You Tube
Personalizar Player Incorporado de Vídeo do You Tube
Produzir Desenhos a Partir de Fotografias
Como Criar Aplicativos Geradores de Textos Html
Aprenda Construir Gadgets para o Orkut e Igoogle
Baixar, Instalar e Configurar o Windows Live Mail
Algumas Funções do Formidável Jquery
Criar Slides Utilizando a Biblioteca Jquery
Gerador de Páginas da Web
Criando Enquetes para seu Site
Criando e Customizando Div’s
Como Criar Seu Próprio Contador de Usuários Online
Como Criar Sitemaps e Como Enviar Sitemaps de Blogs
Formulário Envie o Site
Dicas Úteis para o Messenger
Criar Formulário de Contato
Testar Páginas Html
Como Dividir Postagens de Blogs
Divulgar Sites e Blogs
Como Editar Pop-Ups na Sua Página Web
Expor Conteúdo do seu Pc para o Mundo
Criar Banners para Sites e Blogs
Instalar e Configurar o Mysql
Tabela de Cores Html
Personalizar Recados do Orkut
Instalação e Configuração do Php
Instalar o Servidor Apache
Criar Tables Html
Editar Metatags no Site ou Blog
Redirecionar Url em Html, JavaScript e Php
Editar Iframes em Páginas da Internet
Criar Emotions para o Messenger
Adicionar Emotions no Messenger
Criar Páginas Html
Sites de Sucesso na Web
Marquees Html
Traduzir Conteúdo da Web Instantaneamente
Adicionar a Guia Segurança em Suas Pastas e Arquivos
Carregar Vídeos mais Rapidamente
Alterar os Sons do Windows
Iniciar Rapidamente o Windows
Remover Vírus das Pastas Protegidas
Tornar seu Computador mais Rápido e Eficiente
Downloads de Vídeos
Corrigir Entradas Inválidas do Windows
Proteja seus Filhos Contra a Pornografia na Web
Aumentar a Velocidade de Sua Conexão de Internet
Alterar os Sons de Alertas do Messenger
Salvar Vídeos com o Mouse

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: