Come creare un catalogo prodotti con HTML

Le tabelle offrono il metodo più semplice per creare un catalogo online in HTML. Una tabella a tre colonne lascia spazio per l'immagine del prodotto, la descrizione e le informazioni su spedizione/ordinazione. Inserire informazioni nelle tabelle riduce il tempo necessario per giustificare il testo. Inoltre, le tabelle offrono controllo sullo spazio bianco attorno alle informazioni nella pagina per migliorare l'aspetto e la chiarezza del sito web.

Passaggio 1

Definire una tabella con bordo di un pixel usando il tag di apertura <table border="1">.

Passaggio 2

Inserire la prima riga di celle e il loro contenuto con questo codice:

<tr>
  <td><img src="picture1.jpg" /></td>
  <td>Questa è la descrizione del primo articolo.</td>
  <td>Questo articolo è attualmente disponibile.</td>
</tr>

Passaggio 3

Inserire la seconda riga di celle e il loro contenuto:

<tr>
  <td><img src="picture2.jpg" /></td>
  <td>Questa è la descrizione del secondo articolo.</td>
  <td>Questo articolo è in arretrato.</td>
</tr>

Passaggio 4

Chiudere la tabella con il tag di chiusura </table>.

Suggerimento

Questo esempio semplice produce una tabella con due righe e tre colonne. La prima colonna mostra un'immagine del prodotto di 60x60 pixel usando il tag <img>. La seconda e la terza colonna mostrano descrizione e informazioni sullo stock. Ogni riga inizia e finisce con il tag <tr> e ogni elemento nella riga inizia e finisce con un tag <td>. Inserire tutte le colonne o righe necessarie per descrivere i prodotti.

Inserire il comando cellpadding immediatamente dopo la specifica del bordo nella definizione della tabella per aumentare lo spazio bianco tra i bordi della tabella e il contenuto. Ad esempio: <table border="1" cellpadding="10"> crea uno spazio bianco di 10 pixel attorno al contenuto di ogni cella.