How to Make a Product Catalog With HTML

By Finn McCuhil

Tables provide the simplest method of building an online catalog in HTML. A three-column table gives you room for a product image, description and shipping/ordering information. Inserting information into tables reduces the amount of time required to justify text. In addition, tables give you control of the white space surrounding the information on your page to enhance the appearance and clarity of your website.

Step 1

Define a table with a one-pixel border using the opening


Step 2

Insert the first row of cells and their contents with this code:

This is a description of the first item.This item is currently available.

Step 3

Insert the second row of cells and their contents with this code:

This is a description of the second item.This item is on backorder.

Step 4

Close the table with the ending tag:

Tips & Warnings

  • This simple example produces a table with two rows and three columns. The first column displays a 60-by-60 pixel image of the product using the tag. The second and third columns display product description and stock information. Note that each row starts and ends with thetag and each item in the row starts and ends with atag. Insert as many columns or rows as you need to describe your product.
  • Insert the cellpadding command immediately after the border specification in the table definition to increase the amount of white space between the table's borders and your content. For example,creates a 10-pixel white space around the contents of each cell in the table.

References & Resources