There are a lot of ways that you can do that but I'm going to point you in the direction of only two. One of them involves the use of frames, the other doesn't. Personally, I recommend the one that doesn't because of some accessibility problems that frames have, but either method is perfectly valid.
With frames, you will only need 3: A top frame for your header and main navigation that is the whole width of the window, a narrow left frame for your product list, and a wider right frame for your content. It will basically look like this:
________________
| header |
----------------
| p | |
| r | |
| o | content |
| d | |
| | |
----------------
Because there are three frames you will also need to make at least three HTML documents: one with just the header and navigation, one with just the list of products, and one with the table of product lists. All of the links in your header and product list should be targeted to the content frame. All of your links in documents that are loaded in the content frame should just be allowed to load where they are. Any other pages that you make for products, etc. should be designed to load in the content frame. Lissa's frame tutorial that I linked above provieds instructions for all of this.
The second method, once again, doesn't use frames. It does, however, rely on the use of some CSS. Instead of breaking the parts of your page into separate documents dispalyed in frames, you could just leave everything in one document and separate the different sections with page divisions. Most every page on your site will need to have the header and left panel on it. Because of this, whenever you load a new page, the entire page will be reloaded. The effects of this are largely alleviated by a browser's cache, though. Your source would look something like that shown below. Obviously, it's in need of a lot of tweaking on your part, and you'll likely have to learn a fair amount of CSS and some more HTML, but it's semantically correct. If you find it too difficult, there's still the frames option.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Product Stuff</title>
<meta http-equiv="Content-type" content="application/xhtml+xml;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header">Header image, links, etc. would go here.</div>
<div id="prod_list">
<h2>Product Category 1</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Etcetera</li>
</ul>
<h2>Product Category 2</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Etcetera...</li>
</ul>
</div>
<div id="content">
<table>
<tr>
<th>Product Category 1</th>
<th>Product Category 2</th>
<th>Product Category 3</th>
<th>Etcetera...</th>
</tr>
<tr>
<td>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Etcetera</li>
</ul>
</td>
<td>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
<li>Product 6</li>
<li>Product 7</li>
<li>Etcetera</li>
</ul>
</td>
<td>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Etcetera</li>
</ul>
</td>
<td>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
<li>Etcetera</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
And the CSS file, styles.css:
div#header {
height:120px;
/* styles for header section */
}
div#prod_list {
float:left;
width:20%;
/* other styles for product list section */
}
div#content {
float:right;
width:80%;
/* other styles for content section */
}
#content table {
margin:15px auto;
border-collapse:collapse;
border:solid 1px black;
}
#content th,td {
padding:5px;
border:solid 1px black;
vertical-align:top;
}