NOVIDADES100 Tem de Tudo
Tables (Tabelas)
Conteúdo e Atributos
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> 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/images/jogos/acao01.jpg" width="120" height="40"> </td>
<td> <img src="http://www.novidades100.com.br/images/jogos/acao02.jpg" width="120" height="40"> </td>
</tr>
<tr>
<td> <img src="http://www.novidades100.com.br/images/jogos/acao03.jpg" width="120" height="40"> </td>
<td> <img src="http://www.novidades100.com.br/images/jogos/acao04.jpg" width="120" height="40"> </td>
</tr>
</table>
Como Ficará
 |
 |
 |
 |
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/images/jogos/acao05.jpg" width="120" height="40"> </a> </td>
<td> <a href="http://www.novidades100.com.br/videos/"> <img src="http://www.novidades100.com.br/images/jogos/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;"> </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.