|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
body {
font-size: 62.5%;
margin: 5% 10% 20% 10%;
}
img {
border: none;
}
img.prod {
background: white;
float: left;
margin: 0 7px 7px 0;
border: 2px solid #FFCC00;
padding: 1px;
}
.dltprod {
text-align: right;
}
.dltprod p {
margin: 0;
padding: 0;
font-size: .9em;
color: #333333;
}
td, th {
padding: 0.1em 1em;
border-right: 1px solid #666;
}
td {
padding: 7px;
}
caption {
padding: 1em;
}
#shoppingcartTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #666;
}
#shoppingcartTable th {
background: #888 url(th_bkgd.jpg) repeat-x;
font: italic 1.5em Georgia, "Times New Roman", Times, serif;
padding: .5em 0 .5em 7px;
text-align: left;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
text-shadow: #ccc -2px 2px -2px;
}
#shoppingcartTable td {
vertical-align: top;
}
#shoppingcartTable input[type=text] {
border: 1px solid black;
}
#shoppingcartTable .prodcell {
width: 70%;
}
#shoppingcartTable .prodcell a {
font-size: 1.2em;
}
#shoppingcartTable .prodtitle {
text-overflow: ellipsis;
overflow: hidden;
padding: 2px 0;
font-weight: bold;
width: 35em;
white-space: nowrap;
}
#shoppingcartTable #iteminfo {
text-indent: -1000em;
width: 5em;
}
.dltitem {
margin-top: 1em;
}
tr {
background: #eee;
}
tr.odd {
background: #ccc;
}
</style>
</head>
<body>
<form method="get" action="">
<table id="shoppingcartTable" summary="List of products.">
<caption>Shopping Cart Listing - <strong>Subtotal: $99.16</strong>; changed quantities? <input type="submit" value="Update price(s)" /> </caption>
<thead>
<tr>
<th id="iteminfo" scope="col">Item info</th>
<th scope="col">Product</th>
<th scope="col">Qty.</th>
<th scope="col">Price</th>
</tr>
</thead>
<tr>
<td class="dltprod">
<p>Item added on March 22, 2008.</p>
<a href="" title="Delete this product">delete"</a>
</td>
<td class="prodcell">
<img class="prod" alt="product image" src="u.jpg" />
<div class="prodtitle"><a href="">this is a text</a></div>
<strong>U2</strong>
</td>
<td>
<input type="text" value="1" name="qty" size="2" />
</td>
<td>
$9.66
</td>
</tr>
<tr class="odd">
<td class="dltprod">
<p>Item added on March 22, 2006.</p>
<a href="" title="Delete this product">delete</a>
</td>
<td class="prodcell">
<img class="prod" alt="product image" src="a.jpg" />
<div class="prodtitle"><a href="">this is a text</a></div><strong>Apple</strong>
</td>
<td><input type="text" value="1" name="qty" size="2" /></td>
<td>$7.97</td>
</tr>
<tr>
<td class="dltprod">
<p>Item added on March 22, 2006.</p>
<a href="" title="Delete this product">delete</a>
</td>
<td class="prodcell">
<img class="prod" alt="product image" src="a.jpg" />
<div class="prodtitle"><a href=""></a></div><strong>this is a text</strong>
</td>
<td><input type="text" value="1" name="qty" size="2" /></td>
<td>$9.66</td>
</tr>
<tr class="odd">
<td class="dltprod">
<p>Item added on March 22, 2006.</p>
<a href="" title="Delete this product">delete</a>
</td>
<td class="prodcell">
<img class="prod" alt="product image" src="f.jpg" />
<div class="prodtitle"><a href="">The Other Side</a></div><strong>this is a test. </strong>
</td>
<td><input type="text" value="1" name="qty" size="2" /></td>
<td>$15.98</td>
</tr>
</table>
</form>
</body>
</html>
|