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

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Tags » tr 




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: 5102010%;

}

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.jpgrepeat-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 222008.</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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.