Novidades100 - Dicas de Internet e Computador

Propriedades e Atributos de 'Tables' Html

Propriedades e Atributos de Tabelas

Tabelas são elementos muito importantes para uma página html. Elas proporcionam um 'Design' 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> 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 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

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" width="120" height="40"> </td>
<td> <img src="http:// www.novidades100.com.br/dicas/images/ acao02.jpg" width="120" height="40"> </td>
</tr>
<tr>
<td> <img src="http://www. novidades100.com.br/dicas/images/acao03.jpg" width="120" height="40"> </td>
<td> <img src="http://www. novidades100.com.br/dicas/images/ acao04.jpg" 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/"> <img src="http://www.novidades100. com.br/dicas/images/acao05.jpg" width="120" height="40"> </a> </td>
<td> <a href="http:// www.novidades100.com.br/videos/"> <img src="http://www.novidades100.com.br/ dicas/images/acao06.jpg" width="120" height="40"> </a> </td>
</tr>
</table>

Como Ficará…

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.

| | HomePage | Relatar Problema |