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. GridViewis 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

Proposed 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 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).

DEMO

The full-functional DEMO is available at [1]: click on the image below to open Demo Table formatted via advanced CSS3 technique:

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.

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].