Click here to Skip to main content
Click here to Skip to main content
Go to top

Alternate Rows in ASP.NET GridView, HTML5 Tables

, 10 Jan 2013
Rate this:
Please Sign up or sign in to vote.
Novel HTML5/CSS3 features simplify alternate rows styling in GridView, DetailsView, and other tables.

Introduction

Formatting GridView control as well as any other ASP.NET data-bound controls like DetailsView, FormView, which are quintessential in data-centric web applications, could be performed in a rather simple way by using novel CSS3 features tr:nth-child(odd) and tr:nth-child(even) in order to apply different styles to the odd/even rows (see the following code snippet included in Listing 1):

Suggested technique utilizes exclusively CSS3 features, thus it does not require any server coding or client scripting. The solution is rather universal, applicable to any HTML 5 Table element, either dynamically generated on the server side (such as GridView, DetailView, FormView controls pertinent to ASP.NET) or added to the web page as a static HTML element at design time.

Further enhancements could be achieved via "good old" tr:hover CSS styling added to table rows (tr). In addition to this, the element selectors tr:first-child and tr:last-child could could be used to apply a separate styling to the first/last rows of the Table element.

Demo

A working demo is available at Embedded YouTube Player[^] with attaches a playlist implemented as CSS3-enhanced ASP.NET GridView control (note: web query parameter ?idx=2 specifies the ordinal position of the item to play).

Listing 1
/* Table odd rows style */
tr:nth-child(odd) 
{
   background-color: #ffffff;
}
/* Table even rows style */
tr:nth-child(even) 
{
   background-color: #efefef;
}
/* Table hover style */
tr:hover 
{
   background-color: #dadada;
   color: #000;
}

In this simple example, odd table rows differ from even ones just by the background-color attribute; any other formatting features (font attributes, borders, etc.) could be added to make them more visually distinctive. The same consideration applies to the hover CSS styling.

Entire solution

The entire solution, encapsulated in a single HTML file, is shown below:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ALTERNATE TABLE ROWS | HTML5, CSS3</title>
 
    <style type="text/css">
        thead{  font-weight:bold; }
        
        /* Table odd rows style */
        div.AltRow tr:nth-child(odd) {
           background-color: #ffffff;
        }
        
        /* Table even rows style */
        div.AltRow tr:nth-child(even) {
           background-color: #efefef;
        }
        
        /* Table hover style */
        div.AltRow tr:hover {
           background-color: #dadada;
        }
    </style>
 
</head>
<body>
 
    <h2>DEMO TABLE: This Table included in div with class="AltRow" (see CSS) implements Alternate Rows effect</h2>
 
    <h3>Annualised Inflation Rate for the first decade of XXI Century in NY City</h3>
    <h3>(re: <a href="http://exm.nr/Inf2010" 
      target="_blank">New York City, a decade of inflation: the outspoken numbers</a>)</h3>
    <div class="AltRow">
        <table>
            <tr>
             <td>Product</td><td>Inflation Rate</td><td>Note</td>
            </tr>
            <tr>
            <td>Coke® Inflation Index</td><td>7.23%</td><td>Yeah, it's now about 2 bucks for the bottle</td>
            </tr>
            <tr>
            <td>Gas Inflation Index</td><td>6.94%</td><td>Such a pain at the pump, dude...</td>
 
            </tr>
            <tr>
            <td>NY subway fare Inflation Index</td><td>4.14%</td><td>
              <a href="http://www.youtube.com/watch?v=Q07Zp7tQBRQ" target="_blank">I want to ride my bicycle (Queens)</a></td>
            </tr>
            <tr>
            <td>Oil (WTI) Inflation Index estimated</td><td>13.59%</td><td>Oh, man! Oh, man...</td>
 
            </tr>
            <tr>
            <td>Post Stamp Inflation Index</td><td>2.92%</td><td>And, btw, email is for free...</td>
            </tr>
            <tr>
            <td>PC RAM (memory) Inflation Index</td><td>-28.34%</td>
              <td>Rejoyce "Intel Inside": for you it's deflation! :)</td>
 
            </tr>
            <tr>
        </tr></table>
    </div>
    <hr />
 
    <h2>This is a regular Table, which does not implement Alternate Rows</h2>
    <h3>Precious metals annualized price index</h3>
 
    <h3>(re: <a href="http://exm.nr/AuAgPt" target="_blank">
      First decade of 21st Century: Aurum is golden and Silver is such Argentum!</a>)</h3>
    <table>
        <tr>
        <td>Precious metals</td><td>Price Index</td><td>Note</td>
        </tr>
        <tr>
        <td>Silver</td><td>20.94%</td><td>Element Ag</td>
        </tr>
        <tr><td>Gold</td><td>17.86%</td><td>Element Au</td>
        <tr>
        <td>Platinum</td><td>10.98%</td><td>Element Pt</td>
        </tr>
        <tr>
        <td>Palladium</td><td>-1.86% </td><td>Element Pd</td>
        </tr>
    </tr></table>
    <hr />
    Disclaimer: all data is provided 'AS IS' for Demo purpose only
 
</body>
</html>

Browser Compatibility

As stated above, this solution should work in any Web Browser supporting HTML5, including the major browsers listed below:
  • Microsoft IE9+
  • Mozilla FireFox 4+
  • Google Chrome 10+
  • Safari 5+

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience. He is Win/Web veteran, published 200+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, SQL, .NET, ASP.NET, WPF, C#, Speech Technology and Mobile apps. He's been among recent App submission winners (The Windows 8* & Ultrabook™ App Innovation Contest 2012). Sample pubs:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Edumatter-M12 for Windows, app overview
  5. Engineering Calculator VOLTA-814D
  6. CoolPhone: phone numbers-to-text converter
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects (Finance/Investment, Engineering, Edu) w/total code base exceeding 250k lines; doing consulting in NYC for 20 yrs.
Follow on   Twitter

Comments and Discussions

 
GeneralFormView and DetaisView are not relevant to tables Pinmemberamiramk13-Oct-12 6:50 
GeneralRe: FormView and DetaisView are not relevant to tables PinmemberDrABELL13-Oct-12 7:43 
GeneralRe: FormView and DetaisView are not relevant to tables Pinmemberamiramk13-Oct-12 8:04 
GeneralRe: FormView and DetaisView are not relevant to tables PinmemberDrABELL13-Oct-12 8:08 
GeneralRe: Thanks. I probably missed something, but looks like the link... PinmemberDrABELL12-Apr-11 13:01 
GeneralRe: Fair enough. I was curious about the tables being embedding ... Pinmemberbeauxjames12-Apr-11 10:16 
GeneralSimple and effective. Works great. PinmemberLuis Dasta1-Jun-11 10:03 
GeneralRe: Many thanks, Luis! Kind regards, Alex PinmemberDrABELL1-Jun-11 13:23 
GeneralI will say that you remove the double-inverted-commas to sti... Pinmembermanish.kungwani16-May-11 22:51 
GeneralRe: Hi Manish, Sorry, but your comments are a bit confusing: wha... PinmemberDrABELL19-May-11 8:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 10 Jan 2013
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid