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

HTML5 Tables formatting: alternate rows, color gradients, shadows

, 29 May 2014
Rate this:
Please Sign up or sign in to vote.
Novel HTML5/CSS3 formatting technique applicable to web Tables and ASP.NET GridView
Tables represent quintessentially important elements in HTML5 and all previous versions as well, serving as the cornerstone data visualization tool in data-centric applications since the early days of Internet evolution. GridView is rather important data-aware web control pertinent to ASP.NET framework; essentially, it renders the underlying data structures as HTML table. Following examples demonstrate novel CSS3 styling techniques applicable to HTML5 Table element and its sections.

HTML5 Tables typically contain multiple row tags tr, which could contain either standard cell tags td, or header cell tags th. In addition to this, Tables could be enhanced with section elements: thead and tfoot tags used for the purpose of grouping header/footer content, correspondingly and tbody tag for grouping together main content of the table. Each of these sections could be styled differently via CSS, thus are adding more “granularity” to formatting options.

Solution

For the purpose of didactic clarity, the proposed solution implements exclusively HTML5 and CSS3 features; nor JavaScript, neither jQuery is used.

Proposed solutions DO NOT use any graphic files (like .jpg, .png, .bmp, etc.), thus resulting in very small digital footprint and fast web page load. The entire solution is encapsulated in a single .htm file less than 8kb in size, which is well below the typical size of any medium-quality picture file (file size could be even further reduced by removing the comment lines added for the clarity/readability).

Last but not least: solution implements pure client-side techniques without any need for round-trip to the server, thus it could run autonomously in off-line mode, pretty much like any standard downloaded application. Any major web browser on the client’s machine could serve as a platform, providing almost universal portability ranging from typical desktop – to notebooks – to tablets – to mobile devices (smart phones).

Usage

As mentioned above, the entire solution is encapsulated in a single text file. You can copy-paste the following code snippet (see Listing 1) using, for example, Notepad text editor, then store the file with .htm extension, and voilà - that's it! Open the file in any major browser and see it up and running.

References

Detailed discussion of this formatting technique could be found in HTML5 Best Practices: Table formatting via CSS3[^]



Listing 1
<!DOCTYPE html>
<head>
    <title>HTML5 TABLE FORMATTING</title>
 
    <style type="text/css">
 
        /*** central column on page ***/
        div#divContainer
        {
            max-width: 800px;
            margin: 0 auto;
            font-family: Calibri;
            padding: 0.5em 1em 1em 1em;
 
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
 
            /* add gradient */
            background-color: #808080;
            background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#808080));
            background: -moz-linear-gradient(top, #606060, #808080);
 
            /* add box shadows */
            -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
            -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
            box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
        }
 
        h1 {color:#FFE47A; font-size:1.5em;}
 
        /*** sample table to demonstrate CSS3 formatting ***/
        table.formatHTML5 {
            width: 100%;
            border-collapse:collapse;
            text-align:left;
            color: #606060;
        }
 
        /*** table's thead section, head row style ***/
        table.formatHTML5 thead tr td  {
            background-color: White;
            vertical-align:middle;
            padding: 0.6em;
            font-size:0.8em;
        }
 
        /*** table's thead section, coulmns header style ***/
        table.formatHTML5 thead tr th
        {
            padding: 0.5em;
            /* add gradient */
            background-color: #808080;
            background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
            background: -moz-linear-gradient(top, #606060, #909090);
            color: #dadada;
        }
 
        /*** table's tbody section, odd rows style ***/
        table.formatHTML5 tbody tr:nth-child(odd) {
           background-color: #fafafa;
        }
 
        /*** hover effect to table's tbody odd rows ***/
        table.formatHTML5 tbody tr:nth-child(odd):hover
        {
            cursor:pointer;
            /* add gradient */
            background-color: #808080;
            background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
            background: -moz-linear-gradient(top, #606060, #909090);
            color: #dadada;
        }
 
        /*** table's tbody section, even rows style ***/
        table.formatHTML5 tbody tr:nth-child(even) {
            background-color: #efefef;
        }
 
        /*** hover effect to apply to table's tbody section, even rows ***/
        table.formatHTML5 tbody tr:nth-child(even):hover
        {
            cursor:pointer;
            /* add gradient */
            background-color: #808080;
            background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
            background: -moz-linear-gradient(top, #606060, #909090);
            color: #dadada;
        }
 
       /*** table's tbody section, last row style ***/
        table.formatHTML5 tbody tr:last-child {
             border-bottom: solid 1px #404040;
        }
 
        /*** table's tbody section, separator row pseudo-class ***/
        table.formatHTML5 tbody tr.separator {
            /* add gradient */
            background-color: #808080;
            background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
            background: -moz-linear-gradient(top, #606060, #909090);
            color: #dadada;
        }
 
        /*** table's td element, all section ***/
        table.formatHTML5 td {
           vertical-align:middle;
           padding: 0.5em;
        }
 
        /*** table's tfoot section ***/
        table.formatHTML5 tfoot{
            text-align:center;
            color:#303030;
            text-shadow: 0 1px 1px rgba(255,255,255,0.3);
        }
    </style>
 
</head>
<body>
 
    <!-- CENTTERED COLUMN ON THE PAGE-->
    <div id="divContainer">
 
        <h1>ANNUALIZED INFLATION RATE ON SELECTED PRODUCTS |NYC 2000-2010</h1>
 
        <!-- HTML5 TABLE FORMATTED VIA CSS3-->
        <table class="formatHTML5" >
 
            <!-- TABLE HEADER-->
            <thead>
               <tr><td colspan=3>DISCLAIMER: ALL DATA PROVIDED 'AS IS' FOR DEMO PURPOSE ONLY</td></tr>
                <tr>
                    <th>Product</th><th>Inflation Rate</th><th>Note</th>
                </tr>
            </thead>
 
            <!-- TABLE BODY: MAIN CONTENT-->
            <tbody>
                <tr>
                    <td>Coke® Inflation Index</td><td>7.23%</td><td>Yeah, it's about $2/bottle now</td>
                </tr>
                <tr>
                    <td>Gas Inflation Index</td><td>6.94%</td><td>Such a pain at the pump!</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" title="Listen to the music">I want to ride my bicycle (Queens)</a></td>
                </tr>
                <tr>
                    <td>Oil (WTI) Inflation Index estimated</td><td>13.59%</td><td>Wow!</td>
                </tr>
                <tr>
                    <td>Post Stamp Inflation Index</td><td>2.92%</td><td>Email is still free</td>
                </tr>
                <tr>
                    <td>PC RAM (memory) Inflation Index</td><td>-28.34%</td><td>Rejoyce "Intel Inside"!</td>
                </tr>
 
                <!--SEPARATOR ROW USED DIFFERENT STYLE-->
                <tr class="separator">
                    <td colspan="3">Precious metals Price Index: shown for comparison</td>
                </tr>
                <tr>
                    <td>Silver</td><td>20.94%</td><td><a href="http://exm.nr/AuAgPt" target="_blank" title="Read the article online">Element Ag</a></td>
                </tr>
                <tr>
                    <td>Gold</td><td>17.86%</td><td><a href="http://exm.nr/AuAgPt" target="_blank" title="Read the article online">Element Au</a></td>
                </tr>
                <tr>
                    <td>Platinum</td><td>10.98%</td><td><a href="http://exm.nr/AuAgPt" target="_blank" title="Read the article online">Element Pt</a></td>
                </tr>
                <tr>
                    <td>Palladium</td><td>-1.86% </td><td><a href="http://exm.nr/AuAgPt" target="_blank" title="Read the article online">Element Pd</a></td>
                </tr>
            </tbody>
 
            <!-- TABLE FOOTER-->
            <tfoot>
                <tr><td colspan="3">Copyright &#9400 2011 Infosoft International Inc</td></tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

Design Note

In case of lengthy table it could be recommended to put tfoot tag before tbody, so the browser would be able to render the foot before processing the rest of the rows.

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

 
QuestionGreat but hoiw do you add a selected event? Pinmembertonymaloney19717-Aug-14 5:38 
GeneralMy vote of 5 PinprofessionalBrian A Stephens25-Jun-14 8:29 
GeneralRe: My vote of 5 PinprofessionalDrABELL25-Jun-14 10:15 
GeneralMy vote of 5 PinmemberCarsten V2.029-May-14 9:11 
GeneralRe: My vote of 5 PinprofessionalDrABELL29-May-14 14:16 
GeneralRe: Thanks! PinmemberDrABELL14-Dec-11 3:30 
GeneralRe: man. i should be doing the checking before i comment. i stan... Pinmemberjalbertbowdenii14-Dec-11 3:15 
GeneralReason for my vote of 5 thanks for tip Pinmemberbeginner201126-Dec-11 15:12 
GeneralRe: You are very welcome! Likewise, thanks for your note. PinmemberDrABELL26-Dec-11 15:31 
GeneralReason for my vote of 5 very nice !! Pinmemberjpmontoya18226-Dec-11 8:06 
GeneralRe: Many thanks! PinmemberDrABELL26-Dec-11 15:31 
GeneralReason for my vote of 1 tfoot has to be declared before tbod... Pinmemberjalbertbowdenii13-Dec-11 18:35 
GeneralRe: what? Pinmemberstian.net14-Dec-11 2:27 
GeneralRe: Yes, in HTML4, but this example is HTML5 (see doctype) and i... Pinmemberstian.net14-Dec-11 2:31 
Yes, in HTML4, but this example is HTML5 (see doctype) and in HTML5 it's ok to put the tfoot last: http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element
GeneralLike PinmemberAhmad.M.J. Alyan12-Dec-11 20:24 
GeneralRe: Many thanks! PinmemberDrABELL14-Dec-11 3: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
Web04 | 2.8.140922.1 | Last Updated 29 May 2014
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid