Tabelas em HTML

As tabelas são muito importantes para o designer de uma homepage. Com elas pode-se fazer alinhamentos que dificilmente seriam possíveis com simples comandos. Neste post veja tabelas em HTML.

A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page.

Inserção de imagens, bem como seus alinhamentos, largura, altura, borda são algumas das propriedades disponíveis. Cor e textura de fundo também são propriedades disponíveis.
Exemplo simples de tabela:

Código:

 <table> <!-- inicia tabela -->
 <thead> <!-- cabeçalho da tabela -->
  <tr> <!-- define a linha (table row) -->
   <td>País</td><td>UF</td><td>Cidade</td> <!-- define as colunas da tabela (table data) -->
  </tr> <!-- encerra linha -->
 </thead> <!-- fim do cabeçalho da tabela -->
 <tbody> <!-- início corpo da tabela -->
  <tr> 
    <td> Brasil</td><td> São Paulo</td><td> Sumaré</td>    
   </tr>
 </tbody> <!-- fim corpo da tabela -->  
  </table> <!-- encerra a tabela --> 

Configurações:

Borda (BORDER) – borda da tabela: <table border=valor> substituir valor por número inteiro

Alinhamento (ALIGN) – pode ser aplicado nas tags TR, TH e TD: <td align=center></td>

Alinhamento do texto na célula (VALIGN) – pode ser aplicado nas tags TR, TH e TD:
<td valign=top></td>

Cor de fundo das células (BGCOLOR): <td bgcolor=cor></td>

Para fazer com que uma coluna ocupe o espaço de, por exemplo, duas colunas, utilizamos a propriedade colspan:

<td colspan="3">Total</td>

Código:

<table border=3>
  <tr>
     <td bgcolor="#FF0000">Produto</td>
     <td bgcolor="#FF0000">Preço</td>
     <td bgcolor="#FF0000">Qtde</td>
     <td bgcolor="#FF0000">Total</td>
  </tr>
  <tr>
     <td>Nintendo Switch</td>
     <td>2.190,00</td>
     <td>20</td>
     <td>43.800,00</td>
  </tr>
  <tr>
     <td>Sony Playstation 4</td>
     <td>2.100,00</td>
     <td>50</td>
     <td>105.000,00</td>
  </tr>
  <tr>
     <td>Microsoft XBox One</td>
     <td>1.300,00</td>
     <td>30</td>
     <td>39.000,00</td>
  </tr>
  <tr>
    <td colspan="3">Total</td>
    <td>144.043,80</td>
  </tr>
</table>

Listas em HTML

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: html | tabelas