Como Criar um Catálogo de Produtos com HTML

Tabelas fornecem o método mais simples para construir um catálogo online em HTML. Uma tabela de três colunas oferece espaço para imagem do produto, descrição e informações de envio/pedido. Inserir informações em tabelas reduz o tempo necessário para justificar texto. Além disso, tabelas dão controle do espaço em branco ao redor das informações na página para melhorar a aparência e clareza do seu site.

Passo 1

Defina uma tabela com borda de um pixel usando a tag de abertura <table border="1">.

Passo 2

Insira a primeira linha de células e seus conteúdos com este código:

<tr>
  <td><img src="imagem1.jpg" /></td>
  <td>Esta é a descrição do primeiro item.</td>
  <td>Este item está disponível no momento.</td>
</tr>

Passo 3

Insira a segunda linha de células e seus conteúdos com este código:

<tr>
  <td><img src="imagem2.jpg" /></td>
  <td>Esta é a descrição do segundo item.</td>
  <td>Este item está em espera.</td>
</tr>

Passo 4

Feche a tabela com a tag de fechamento: </table>

Dica

Este exemplo simples produz uma tabela com duas linhas e três colunas. A primeira coluna exibe uma imagem de 60x60 pixels do produto. A segunda e terceira colunas exibem descrição e informações de estoque. Note que cada linha começa e termina com a tag <tr> e cada item na linha começa e termina com uma tag <td>. Insira quantas colunas ou linhas precisar para descrever seu produto.

Insira o comando cellpadding imediatamente após a especificação da borda na definição da tabela para aumentar o espaço em branco entre as bordas da tabela e seu conteúdo. Por exemplo, <table border="1" cellpadding="10"> cria um espaço de 10 pixels ao redor do conteúdo de cada célula.

• Como Fazer Contorno Rápido no Paint.NET
• Como Inserir um PDF em um Modelo Avery