Novidades100 - Dicas de Internet e Computador
CulináriaInternetDetonadosWallpapersPoesiasVideos

Criar Tabelas Html

Propriedades para Personalizar Tables Html

Tabelas são elementos muito importantes para uma página html. Elas proporcionam um layout 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.
Copie o código abaixo e cole no local desejado.

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 a propriedade Cor 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="https://www.novidades100.com.br/dicas/images/acao01.jpg" width="120"height="40"> </td>
<td> <img src="https://www.novidades100.com.br/dicas/images/acao02.jpg" width="120" height="40"> </td>
</tr>
<tr>
<td> <img src="https://www.novidades100.com.br/dicas/images/acao03.jpg" width="120" height="40"> </td>
<td> <img src="https://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

Transformar as Imagens nas Células em Links

<table border="1"cellspacing="3"cellpadding="3"width="300">
<tr>
<td> <a href="https://www.novidades100.com.br/dicas/"> <img src="https://www.novidades100.com.br/dicas/images/acao05.jpg"width="120" height="40"></a> </td>
<td> <a href="https://www.novidades100.com.br/videos/"> <img src="https://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, determine a largura da tabela em '%', para que ela se enquadre a qualquer largura.
Veja também que foi inserido uma côr de fundo e consta também de uma célula vazia.

<table style="width:100%; height:auto; background:#ff4;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.

Propriedades, Tabelas, Tables, Html

Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos

Sobre o Autor | Política de Privacidade