Table style for even rows

    




<!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>

Related examples in the same category

1.	'tr' Example
2.	table row with class
3.	Set different colors for even and odd table row
4.	table row background
5.	table row hover
6.	stripe table with Javascript
7.	Coloring Rows in a Table
8.	Selecting cells in row
9.	Alternating Row Background
10.	Alternating row colors
11.	Table with subtotoal row
12.	Hiding row
13.	tr height: 30px;
14.	tr background: #EFEFEF;
15.	tr background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
16.	tr color: #505050;
17.	tr padding: 7px;
18.	tr text-align: left;
19.	Highlighting rows with mouse move

Table style for even rows : tr « Tags « HTML / CSS

Related examples in the same category