Come fare un catalogo prodotti con l'HTML

March 25

Le tabelle forniscono il metodo più semplice di costruire un catalogo on-line in formato HTML. Una tabella a tre colonne si dà spazio per una immagine del prodotto, descrizione e / informazioni per l'ordine di spedizione. Inserimento di informazioni in tabelle riduce la quantità di tempo necessaria per giustificare il testo. Inoltre, le tabelle offrono il controllo dello spazio bianco che circonda le informazioni sulla tua pagina per migliorare l'aspetto e la chiarezza del tuo sito web.

istruzione

1 Definire una tabella con un bordo di un pixel con l'apertura tag <table>:

<Table border = "1">

2 Inserire la prima fila di celle e del loro contenuto con questo codice:

<Tr>

<Td>

<Img width = "60" height = "60" />

</ Td>

<Td> Questa è una descrizione del primo elemento. </ Td>

<Td> Questo articolo non è attualmente disponibile. </ Td>

</ Tr>

3 Inserire la seconda fila di celle e del loro contenuto con questo codice:

<Tr>

<Td>

<Img width = "60" height = "60" />

</ Td>

<Td> Questa è una descrizione del secondo elemento. </ Td>

<Td> Questo elemento è in arretrato. </ Td>

</ Tr>

4 Chiudere la tabella con il tag di chiusura:

</ Table>

Consigli e avvertenze

  • Questo semplice esempio produce una tabella con due righe e tre colonne. La prima colonna visualizza un'immagine di pixel di 60-by-60 del prodotto usando il tag <img>. La seconda e la terza colonna mostrano descrizione del prodotto e informazioni di borsa. Si noti che ogni riga inizia e finisce con il tag <tr> e ogni voce inizia riga e termina con un tag <td>. Inserire il maggior numero di colonne o righe di cui hai bisogno per descrivere il tuo prodotto.
  • Inserire il comando cellpadding subito dopo la specifica di confine nella definizione della tabella per aumentare la quantità di spazio bianco tra i confini della tabella e il contenuto. Ad esempio, <table border = "1" cellpadding = "10"> crea uno spazio bianco 10 pixel intorno il contenuto di ogni cella della tabella.