NOVIDADES100 Tem de Tudo
Tabelas - Conteúdo e Atributos
Tables 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 criadas. Vou dar aqui algumas formas simples para criá-las.
Digamos que você já possua sua página pronta e quer incrementá-la com algumas tables.
Para uma coluna lateral que possua 300px, aqui uma table proporcional.
Abra o código fonte de sua página de modo off line e construa o seguinte script:
Criar uma tabela simples:
<table border="1" cellspacing="3" cellpadding="3">
<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 cor para as células:
<table border="1" cellspacing="3" cellpadding="3">
<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">
<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">
<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á:
 |
 |
Como você pôde ver, tabelas são simples de serem criadas, basta você utilizar-se dos atributos cores, tamanho e espaços para exibí-las da forma que desejar.