| Culinária | Detonados | Internet | Poesias | Wallpapers | Web Tools |
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.
<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>
| 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 |
<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>
| conteúdo da célula | conteúdo da célula |
| conteúdo da célula | conteúdo da célula |
<table
border="1" cellspacing="3"
cellpadding="3" width="300px">
<tr>
<td> <img src="https://novidades100.com.br/dicas/images/acao01.webp" width="120"height="40"> </td>
<td> <img src="https://novidades100.com.br/dicas/images/acao02.webp" width="120"
height="40"> </td>
</tr>
<tr>
<td> <img src="https://novidades100.com.br/dicas/images/acao03.webp" width="120" height="40"> </td>
<td> <img src="https://novidades100.com.br/dicas/images/acao04.webp" width="120"height="40"> </td>
</tr>
</table>
 |  |
 |  |
<table border="1"cellspacing="3"cellpadding="3"width="300">
<tr>
<td> <a href="https://novidades100.com.br/dicas/"> <img src="https://novidades100.com.br/dicas/images/acao05.webp"width="120" height="40"></a> </td>
<td> <a href="https://novidades100.com.br/videos/"> <img src="https://novidades100.com.br/dicas/images/acao06.webp" width="120" height="40"> </a>
</td>
</tr>
</table>
 |  |
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;"> </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>
| 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
Nosso site utiliza cookies para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades de acordo com seus interesses.
Política de Privacidade
