CM01 Ecommerce Table Component

v0 Display Table without column borders

Sample
Code
Templates (0)

Use to display list of items when each column has a separate header. This table allows left justification of alpha values and right justification of numeric values such as Price, using class "cmamount."

Transaction Number	Transaction Date	Amount
SF-US-0606-14553 1 - Sun Fire X4200 Server, 1 - Sun Ultra 20 Workstation	Jun 01, 2006	$6,895.00
SF-US-0606-14553 1 - Sun Fire X4200 Server, 1 - Sun Ultra 20 Workstation, 1 - Sun Fire V40z Server	May 28, 2006	$6,895.00
SF-US-0606-14553 1 - Sun Fire X4200 Server, 1 - Sun Ultra 20 Workstation	May 30, 2006	$6,895.00

Copy the code below and paste into your text editor.

<div class="cm1">
<div class="cm1v0">
<table cellspacing="0">
<thead>
<tr>
<th><a href="#">Transaction Number</a></th>
<th><a href="#">Transaction Date <img src="/im/ic_sort_d.gif" width="10" height="12" border="0" valign="absmiddle" alt="" /></a></th>
<th class="cmamount"><a href="#">Amount</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="order_details.jsp">SF-US-0606-14553</a>
<div class="small">
1 - Sun Fire X4200 Server, 1 - Sun Ultra 20 Workstation
</div>
</td>
<td>Jun 01, 2006</td>
<td class="cmamount">$6,895.00</td>
</tr>
<tr>
<td><a href="order_details.jsp">SF-US-0606-14553</a>
<div class="small">
1 - Sun Fire X4200 Server, 1 - Sun Ultra 20 Workstation,<br />
1 - Sun Fire V40z Server
</div>
</td>
<td>May 28, 2006</td>
<td class="cmamount">$6,895.00</td>
</tr>
<tr>
<td><a href="order_details.jsp">SF-US-0606-14553</a>
<div class="small">
1 - Sun Fire X4200 Server, 1 - Sun Ultra 20 Workstation
</div>
</td>
<td>May 30, 2006</td>
<td class="cmamount">$6,895.00</td>
</tr>
</tbody>
</table>
</div>
</div>

No Templates Reference this

Use to display items in a tabular format.

Item Description

Qty

Your Price

Total

Image Here
Sun Fire X4200 Server

1	$4,845.00 A65-PFB2-2H-4G-CB7 Sun Fire X4200 Server,2 AMD Opteron Model 275 CPUs,4-GB (4x1GB DIMMS) PC3200 DDR1-400 Mem,2 73GB 10000 RPM SAS Disk,DVD,2 PSUs,Svc Proc,4 Ethernet &4 USB 1.1 Ports,1 64bit/133MHz,1 64bit/100MHz & 3 64bit/66MHz PCI-X Slots,JES&Solaris 10 Pre-Installed Ships Within: 6 business days
2	$800.00 X311L Power Cord Kit, North American/Asian, RoHS Compliant Ships Within: 6 business days

1

$5,645.00

Promotion Code 12XY34ABC Applied

Discount

- $1,000.00

NOTE: Taxes shown are estimated. Actual tax will be calculated at time of invoice.

Subtotal

$7,340.00

Tax (UT 6.60%)

$934.00

Shipping

$125.00

Total

$8,399.00

Copy the code below and paste into your text editor.

<div class="cm1">
<div class="cm1v2">
<table cellspacing="0" width="100%">
<thead>
<tr>
<th class="tcell">Item Description</th>
<th>Qty</th>
<th class="cmpriceheader">Your Price</th>
<th class="cmpriceheader">Total</th>
</tr>
</thead>

<tr>
<td class="tcell">
Image Here<br />
<b>Sun Fire X4200 Server</b><br />
<div class="cmCartDetails">
<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr valign="top">
<td class="small">1</td>
<td class="small">
<div class="small cmItemPrice">$4,845.00</div>
<strong>A65-PFB2-2H-4G-CB7</strong><br style="clear: both;" />
Sun Fire X4200 Server,2 AMD Opteron Model 275 CPUs,4-GB (4x1GB DIMMS) PC3200 DDR1-400 Mem,2 73GB 10000 RPM SAS Disk,DVD,2 PSUs,Svc Proc,4 Ethernet &amp;4 USB 1.1 Ports,1 64bit/133MHz,1 64bit/100MHz &amp; 3 64bit/66MHz PCI-X Slots,JES&amp;Solaris 10 Pre-Installed
<div class="small cmShipsWithinCart-Email">Ships Within: <a href="javascript:showDHTML('shipswithin', 200)" class="small">6 business days</a></div>
</td>
</tr>
<tr valign="top">
<td class="small">2</td>
<td class="small">
<div class="small cmItemPrice">$800.00</div>
<strong>X311L</strong><br style="clear: both;" />
Power Cord Kit, North American/Asian, RoHS Compliant
<div class="small cmShipsWithinCart-Email">Ships Within: <a href="javascript:showDHTML('shipswithin', 200)">6 business days</a></div>
</td>
</tr>
</table>
</div>
</td>
<td class="dcell" nowrap="nowrap">
1
</td>
<td class="dcell" align="right">
$5,645.00
</td>
<td class="dcell" align="right">
$5,645.00
</td>
</tr>
<tr>
<td class="tcell" colspan="2"><strong>Promotion Code 12XY34ABC Applied</strong></td>
<td class="dcell" align="right"><b>Discount</b></td>
<td class="dcell" nowrap="nowrap"><div class="cmCheckoutPrice">- $1,000.00</div></td>
</tr>
<tr>
<td colspan="2" rowspan="4" class="tcell small">
<strong>NOTE:</strong> Taxes shown are estimated. Actual tax will be calculated at time of invoice.<br />
</td>
<td class="dcell" align="right"><b>Subtotal</b></td>
<td class="dcell" align="right">
<div class="cmPrice">$7,340.00</div>
</td>
</tr>
<tr>
<td class="dcell" align="right" nowrap="nowrap"><b>Tax</b> <span class="small">(UT 6.60%)</span></td>
<td class="dcell cmCheckoutPrice" nowrap="nowrap">
$934.00
</td>
</tr>
<tr>
<td class="dcell" align="right"><b>Shipping</b></td>
<td class="dcell cmCheckoutPrice">
$125.00
</td>
</tr>
<tr>
<td class="dcell" align="right"><b>Total</b></td>
<td class="dcell cmCheckoutPrice">
$8,399.00
</td>
</tr>
</table>
</div>
</div>

No Templates Reference this

v2 Comparison Table for Product Attributes (EOLed)

Sample
Code
Templates (0)

Use the g15v5 Expandable Table instead.

	SMALL	MEDIUM	LARGE	EXTRA LARGE
Shop Worldwide
Your Price (US)	$1,916.00	$2,268.80	$2,588.80	$4,516.00
List Price (US)	$2,395.00	$2,836.00	$3,236.00	$5,645.00
Compute Power
Scalability
Processors	1 Single-core AMD Opteron - Model 248	2 Single-core AMD Opteron - Model 252	2 Single-core AMD Opteron - Model 254	2 Dual-core AMD Opteron - Model 275
Clock Speed	?	?	?	?
Max # of Processors	2	2	2	2
Secondary Cache	1 MB L2 Cache	1 MB L2 Cache	1 MB L2 Cache	1 MB L2 Cache
Memory	1 GB	2 GB	2 GB	4 GB
Max Memory	16 GB	16 GB	16 GB	16 GB
# of Memory slots	2	4	4	4
Max # of Memory slots	16	16	16	16

Hardware Get It

Copy the code below and paste into your text editor.

!!! WARNING !!!

THIS CODE IS EOL

THIS CODE IS ONLY SHOWN HERE FOR REFERENCE PURPOSES
AND MUST NOT BE USED IN NEW PROJECTS.

EXISTING PROJECTS USING THIS CODE MUST BE UPGRADED
TO USE CODE THAT IS CURRENT

===================================================

<div class="cm1">
<div class="cm1v4">
<table cellspacing="0">
<thead>
<tr>
<th></th>
<th></th>
<th>SMALL</th>
<th>MEDIUM</th>
<th>LARGE</th>
<th>EXTRA LARGE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cmProdCatEc"></td>
<td class="cmProdCat"><div class="bluearrows"><a href="#">Shop Worldwide</a></div></td>
<td><input type="button" class="hotbutton" onclick="location.href='configuration_a65zv_o2_alt_sq1.jsp'" value="Customize It" /></td>
<td><input type="button" class="hotbutton" onclick="location.href='configuration_a65zv_o2_alt_sq1.jsp'" value="Customize It" /></td>
<td><input type="button" class="hotbutton" onclick="location.href='configuration_a65zv_o2_alt_sq1.jsp'" value="Customize It" /></td>
<td><input type="button" class="hotbutton" onclick="location.href='configuration_a65zv_o2_alt_sq1.jsp'" value="Customize It" /></td>
</tr>
<tr>
<td class="cmProdCatEc"></td>
<td class="cmProdCat">
<a href="#">Your Price (US)</a>
</td>
<td>
<div class="cmPrice">$1,916.00</div>
</td>
<td>
<div class="cmPrice">$2,268.80</div>
</td>
<td>
<div class="cmPrice">$2,588.80</div>
</td>
<td><div class="cmPrice">$4,516.00</div></td>
</tr>
<tr>
<td class="cmProdCatEc"></td>
<td class="cmProdCat">
List Price (US)
</td>
<td><div class="cmPrice">$2,395.00</div></td>
<td>
<div class="cmPrice">$2,836.00</div>
</td>
<td>
<div class="cmPrice">$3,236.00</div>
</td>
<td><div class="cmPrice">$5,645.00</div></td>
</tr>
<tr>
<td class="cmProdCatEc"></td>
<td class="cmProdCat">
<a href="#">Compute Power</a>
</td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:55px solid #0c0;border-right:25px solid #ccc;" alt="" /></a></td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:60px solid #0c0;border-right:20px solid #ccc;" alt="" /></a></td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:65px solid #0c0;border-right:15px solid #ccc;" alt="" /></a></td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:70px solid #0c0;border-right:10px solid #ccc;" alt="" /></a></td>
</tr>
<tr>
<td class="cmProdCatEc"></td>
<td class="cmProdCat">
<a href="#">Scalability</a>
</td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:55px solid #0c0;border-right:15px solid #ccc;" alt="" /></a></td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:50px solid #0c0;border-right:20px solid #ccc;" alt="" /></a></td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:45px solid #0c0;border-right:25px solid #ccc;" alt="" /></a></td>
<td><a href="#"><img src="/im/a.gif" style="height:10px;width:0px;border:none;border-left:40px solid #0c0;border-right:30px solid #ccc;" alt="" /></a></td>
</tr>
<tr>
<td class="cmProdCatEc"><a href="javascript:expandCollapse('processors');"><img id="processors-img" src="/im/ic_show_plus.gif" alt="" border="0" /></a></td>
<td class="cmProdCat">Processors</td>
<td>1 Single-core AMD Opteron - Model 248</td>
<td>2 Single-core AMD Opteron - Model 252</td>
<td>2 Single-core AMD Opteron - Model 254</td>
<td>2 Dual-core AMD Opteron - Model 275</td>
</tr>
<tr id="processors1" class="hidethis">
<td class="cmProdCatEc"></td>
<td class="cmProdCatSub">Clock Speed</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
<tr id="processors2" class="hidethis">
<td class="cmProdCatEc"></td>
<td class="cmProdCatSub">Max # of Processors</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr id="processors3" class="hidethis">
<td class="cmProdCatEc"></td>
<td class="cmProdCatSub">Secondary Cache</td>
<td>1 MB L2 Cache</td>
<td>1 MB L2 Cache</td>
<td>1 MB L2 Cache</td>
<td>1 MB L2 Cache</td>
</tr>
<tr>
<td class="cmProdCatEc"><a href="javascript:expandCollapse('memory');"><img id="memory-img" src="/im/ic_show_plus.gif" alt="" border="0" /></a></td>
<td class="cmProdCat">Memory</td>
<td>1 GB</td>
<td>2 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr id="memory1" class="hidethis">
<td class="cmProdCatEc"></td>
<td class="cmProdCatSub">Max Memory</td>
<td>16 GB</td>
<td>16 GB</td>
<td>16 GB</td>
<td>16 GB</td>
</tr>
<tr id="memory2" class="hidethis">
<td class="cmProdCatEc"></td>
<td class="cmProdCatSub"># of Memory slots</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr id="memory3" class="hidethis">
<td class="cmProdCatEc"></td>
<td class="cmProdCatSub">
Max # of Memory slots
</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
<ul>
<li><a href="http://alpha3j.com/b2c/getit_2000_option2_design1_alt.jsp">Hardware Get It</a></li>
</ul>

CM01 Ecommerce Table

Include:

Definition

Usage

v0 Display Table without column borders

No Templates Reference this

v1 Display Table with column borders

No Templates Reference this

v2 Comparison Table for Product Attributes (EOLed)

No Templates Reference this