Home | Store | osCommerce Tutorials

osCommerce Main Categories Web Layout

Before studying the file structure or code structure of osCommerce Main Categories, this is better to have an idea of the web layout of the Main Categories.

The diagram below shows the web layout of osCommerce Main Categories:

osCommerce Main Categories web layout

As you can see that the osCommerce Main Categories contains the Main Categories Header and the Main Categories Content.

If you follow the codes to display the Main Categories Header and Main Categories Content, the HTML codes of the tables are:

osCommerce Main Categories Header HTML Code

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="14" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt="" width="11" height="14"></td>
<td width="100%" height="14" class="infoBoxHeading">Categories</td>
<td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
</tr>
</table>

The codes in blue color are the 1st column of the table

The codes in purple color are the middle column of the table.

The codes in green color are the 3rd column of the table.

Main Categories Content Outer Table and Inner Table HTML Code

<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">
<tr>
<td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
</tr>
<tr>
<td class="boxText"><a href="http://osc.cz.cc/index.php?cPath=1">Hardware-&gt;</a>&nbsp;(6)<br><a href="http://osc.cz.cc/index.php?cPath=2">Software-&gt;</a>&nbsp;(4)<br><a href="http://osc.cz.cc/index.php?cPath=3">DVD Movies-&gt;</a>&nbsp;(17)<br></td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
</tr>
</table>

</td>
</tr>
</table>

The codes in black font color are the Outer Table.

And the codes in blue font color are the Inner Table.

Now we know the HTML layout of the osCommerce Main Categories box.