Click here to Skip to main content
15,867,594 members
Articles / Web Development / HTML5
Tip/Trick

HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows

Rate me:
Please Sign up or sign in to vote.
4.94/5 (29 votes)
16 Jun 2015CPOL2 min read 213.2K   58   16
HTML5/CSS3 advanced formatting of web Tables and ASP.NET GridView

Introduction

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, proposed solution implements exclusively HTML5 and CSS3; nor JavaScript, neither jQuery is used.

The solution DOES 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 further reduced by removing the comment lines added for 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).

DEMO

Image below demonstrates demo Table formatted via advanced CSS3 technique:

Image 1

Fig 1. DEMO Table formatted using advanced CSS3 styling techniques

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.

Listing 1
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Advanced Table CSS formatting</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Copyright" content="2011-2015 Infosoft International Inc" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta name="Robots" content="all" />
    <meta name="Distribution" content="global" />

    <style type="text/css">
    #divContainer {
        max-width: 600pt;
        width: 90%;
        margin: 0 auto;
        margin-top: 10pt;
        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: #ababab;
        background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ababab));
        background: -moz-linear-gradient(top, #909090, #a0a0a0);
        /* 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);
    }

    #divContainer h2 { color: #efefef; font-size: 1em; }

    table.formatHTML5 {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        color: #606060;
    }

    table.formatHTML5 td {
        vertical-align: middle;
        padding: 0.5em;
    }

    table.formatHTML5 thead tr td {
        background-color: White;
        vertical-align: middle;
        padding: 0.6em;
        font-size: 0.8em;
    }

    table.formatHTML5 thead tr th,
    table.formatHTML5 tbody tr.separator {
        padding: 0.5em;
        background-color: #909090;
        background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ababab));
        background: -moz-linear-gradient(top, #909090, #ababab);
        color: #efefef;
    }

    table.formatHTML5 tbody tr:nth-child(odd) {
        background-color: #fafafa;
    }

    table.formatHTML5 tbody tr:nth-child(even) {
        background-color: #efefef;
    }

    table.formatHTML5 tbody tr:last-child {
        border-bottom: solid 1px #404040;
    }

    table.formatHTML5 tbody tr:hover {
        cursor: pointer;
        background-color: #909090;
        background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ababab));
        background: -moz-linear-gradient(top, #909090, #ababab);
        color: #dadada;
    }

    table.formatHTML5 tfoot {
        text-align: center;
        color: #303030;
        text-shadow: 0 1px 1px rgba(255,255,255,0.3);
    }
    </style>
</head>
<body>
    <!-- CENTERED-->
    <div id="divContainer">

        <h2>ANNUALIZED INFLATION RATE ON SELECTED PRODUCTS |NYC 2000-2010</h2>

        <!-- 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>Yeah, pain at the pump!</td>
                </tr>
                <tr>
                    <td>NY subway fare Inflation Index</td>
                    <td>4.14%</td>
                    <td></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></td>
                </tr>
                <tr>
                    <td>PC RAM (memory) Inflation Index</td>
                    <td>-28.34%</td>
                    <td></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://www.codeproject.com/Tips/262546/HTML-Tables-formating-best-practices" 
                    target="_blank" title="Read the article on Codeproject.com">
                    Read the article</a></td>
                </tr>
                <tr>
                    <td>Gold</td>
                    <td>17.86%</td>
                    <td>AU is Golden!</td>
                </tr>
                <tr>
                    <td>Platinum</td>
                    <td>10.98%</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Palladium</td>
                    <td>-1.86% </td>
                    <td>Element Pd</td>
                </tr>
            </tbody>

            <!-- TABLE FOOTER-->
            <tfoot>
                <tr><td colspan="3">Copyright 
                &#9400 2011-2022 Alexander Bell</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. More reading on CSS Table Formatting available at [2,3].

References

  1. Click/Select row in ASP.NET GridView or HTML 5 Table
  2. Fixed Table Header Atop Scrollable GridView in ASP.NET

License

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


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
QuestionGreat but hoiw do you add a selected event? Pin
tonymaloney19717-Aug-14 5:38
tonymaloney19717-Aug-14 5:38 
GeneralMy vote of 5 Pin
Brian A Stephens25-Jun-14 8:29
professionalBrian A Stephens25-Jun-14 8:29 
GeneralRe: My vote of 5 Pin
DrABELL25-Jun-14 10:15
DrABELL25-Jun-14 10:15 
GeneralMy vote of 5 Pin
Carsten V2.029-May-14 9:11
Carsten V2.029-May-14 9:11 
GeneralRe: My vote of 5 Pin
DrABELL29-May-14 14:16
DrABELL29-May-14 14:16 
GeneralRe: Thanks! Pin
DrABELL14-Dec-11 3:30
DrABELL14-Dec-11 3:30 
GeneralRe: man. i should be doing the checking before i comment. i stan... Pin
jalbertbowdenii14-Dec-11 3:15
jalbertbowdenii14-Dec-11 3:15 
GeneralReason for my vote of 5 thanks for tip Pin
beginner201126-Dec-11 15:12
beginner201126-Dec-11 15:12 
GeneralRe: You are very welcome! Likewise, thanks for your note. Pin
DrABELL26-Dec-11 15:31
DrABELL26-Dec-11 15:31 
GeneralReason for my vote of 5 very nice !! Pin
jpmontoya18226-Dec-11 8:06
jpmontoya18226-Dec-11 8:06 
GeneralRe: Many thanks! Pin
DrABELL26-Dec-11 15:31
DrABELL26-Dec-11 15:31 
Many thanks!
GeneralReason for my vote of 1 tfoot has to be declared before tbod... Pin
jalbertbowdenii13-Dec-11 18:35
jalbertbowdenii13-Dec-11 18:35 
GeneralRe: what? Pin
StianSandberg14-Dec-11 2:27
StianSandberg14-Dec-11 2:27 
GeneralRe: Yes, in HTML4, but this example is HTML5 (see doctype) and i... Pin
StianSandberg14-Dec-11 2:31
StianSandberg14-Dec-11 2:31 
GeneralLike Pin
Ahmad.M.J. Alyan12-Dec-11 20:24
Ahmad.M.J. Alyan12-Dec-11 20:24 
GeneralRe: Many thanks! Pin
DrABELL14-Dec-11 3:30
DrABELL14-Dec-11 3:30 

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

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