Building an ACP 3D HTML Table Image Gallery

In this section I give you the summary of a simple project, which we shall carry out to illustrate how to make a 3D HTML table operate faster. In the table for the example, there are three rows, three columns and three planes. For the gallery you have just one page. The 3D table is in the page.

Each table cell has an image. There is a button on the page. When you click this button, you see the next set of images. When you click an image, it is maximized; when you click the maximized image, it is reduced to its original size and it remains at its original position. In this section, I give you the table code without explanation; you can get the full details from the link on the first page leading to my article on 3D HTML tables. This is the code for the 3D HTML table:

<table id="T1" cellpadding="0">

<tr id="R0">

<td id="TD00">

<table id="T00" cellpadding="0">

<tr id="TR00">

<td id="TD000" valign="top" style="display:block" width="100" height="100"><img src="i000.gif" id="I000" onclick="maxRest('I000')" title="Click to Maximize">

</td>

<td id="TD001" valign="top" style="display:none" width="100" height="100"><img src="i001.gif" id="I001" onclick="maxRest('I001')" title="Click to Maximize">

</td>

<td id="TD002" valign="top" style="display:none" width="100" height="100"><img src="i002.gif" id="I002" onclick="maxRest('I002')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD01">

<table id="T01" cellpadding="0">

<tr id="TR01">

<td id="TD010" valign="top" style="display:block" width="100" height="100"><img src="i010.gif" id="I010" onclick="maxRest('I010')" title="Click to Maximize">

</td>

<td id="TD011" valign="top" style="display:none" width="100" height="100"><img src="i011.gif" id="I011" onclick="maxRest('I011')" title="Click to Maximize">

</td>

<td id="TD012" valign="top" style="display:none" width="100" height="100"><img src="i012.gif" id="I012" onclick="maxRest('I012')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD02">

<table id="T02" cellpadding="0">

<tr id="TR02">

<td id="TD020" valign="top" style="display:block" width="100" height="100"><img src="i020.gif" id="I020" onclick="maxRest('I020')" title="Click to Maximize">

</td>

<td id="TD021" valign="top" style="display:none" width="100" height="100"><img src="i021.gif" id="I021" onclick="maxRest('I021')" title="Click to Maximize">

</td>

<td id="TD022" valign="top" style="display:none" width="100" height="100"><img src="i022.gif" id="I022" onclick="maxRest('I022')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

</tr>

<tr id="R1">

<td id="TD10">

<table id="T10" cellpadding="0">

<tr id="TR10">

<td id="TD100" valign="top" style="display:block" width="100" height="100"><img src="i100.gif" id="I100" onclick="maxRest('I100')" title="Click to Maximize">

</td>

<td id="TD101" valign="top" style="display:none" width="100" height="100"><img src="i101.gif" id="I101" onclick="maxRest('I101')" title="Click to Maximize">

</td>

<td id="TD102" valign="top" style="display:none" width="100" height="100"><img src="i102.gif" id="I102" onclick="maxRest('I102')" title="Click to Maximize">

</tr>

</table>

</td>

<td id="TD11">

<table id="T11" cellpadding="0">

<tr id="TR11">

<td id="TD110" valign="top" style="display:block" width="100" height="100"><img src="i110.gif" id="I110" onclick="maxRest('I110')" title="Click to Maximize">

</td>

<td id="TD111" valign="top" style="display:none" width="100" height="100"><img src="i111.gif" id="I111" onclick="maxRest('I111')" title="Click to Maximize">

</td>

<td id="TD112" valign="top" style="display:none" width="100" height="100"><img src="i112.gif" id="I112" onclick="maxRest('I112')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD12">

<table id="T12" cellpadding="0">

<tr id="TR12">

<td id="TD120" valign="top" style="display:block" width="100" height="100"><img src="i120.gif" id="I120" onclick="maxRest('I120')" title="Click to Maximize">

</td>

<td id="TD121" valign="top" style="display:none" width="100" height="100"><img src="i121.gif" id="I121" onclick="maxRest('I121')" title="Click to Maximize">

</td>

<td id="TD122" valign="top" style="display:none" width="100" height="100"><img src="i122.gif" id="I122" onclick="maxRest('I122')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

</tr>

<tr id="R2">

<td id="TD20">

<table id="T20" cellpadding="0">

<tr id="TR20">

<td id="TD200" valign="top" style="display:block" width="100" height="100"><img src="i200.gif" id="I200" onclick="maxRest('I200')" title="Click to Maximize">

</td>

<td id="TD201" valign="top" style="display:none" width="100" height="100"><img src="i201.gif" id="I201" onclick="maxRest('I201')" title="Click to Maximize">

</td>

<td id="TD202" valign="top" style="display:none" width="100" height="100"><img src="i202.gif" id="I202" onclick="maxRest('I202')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD21">

<table id="T21" cellpadding="0">

<tr id="TR21">

<td id="TD210" valign="top" style="display:block" width="100" height="100"><img src="i210.gif" id="I210" onclick="maxRest('I210')" title="Click to Maximize">

</td>

<td id="TD211" valign="top" style="display:none" width="100" height="100"><img src="i211.gif" id="I211" onclick="maxRest('I211')" title="Click to Maximize">

</td>

<td id="TD212" valign="top" style="display:none" width="100" height="100"><img src="i212.gif" id="I212" onclick="maxRest('I212')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

<td id="TD22">

<table id="T22" cellpadding="0">

<tr id="TR22">

<td id="TD220" valign="top" style="display:block" width="100" height="100"><img src="i220.gif" id="I220" onclick="maxRest('I220')" title="Click to Maximize">

</td>

<td id="TD221" valign="top" style="display:none" width="100" height="100"><img src="i221.gif" id="I221" onclick="maxRest('I221')" title="Click to Maximize">

</td>

<td id="TD222" valign="top" style="display:none" width="100" height="100"><img src="i222.gif" id="I222" onclick="maxRest('I222')" title="Click to Maximize">

</td>

</tr>

</table>

</td>

</tr>

</table>