Skip to main content

See also:

HTML5 Best Practices: Table formatting via CSS3

HTML5 Best Practices: Table Formatting via CSS3
HTML5 Best Practices: Table Formatting via CSS3Alexander Bell

Modern web applications adhere to the programming paradigm of separation of concerns, namely:

  1. Content -> HTML
  2. Formatting -> CSS3
  3. Functionality -> Javascript/iQuery

In practice, there could be some exceptions to the rule. For example novel CSS3 features could add interactivity and dynamic effects to the web page, which could be classified as additional functionality beyond just formatting features (for example, dynamic menu, modal pop-ups, etc.). Likewise, Javascript/jQuery could add sophisticated visual effects to the page (e.g., perform dynamic CSS styling), thus enhancing the overall aesthetic appeal well beyond the limitation of traditional formatting techniques.

Web Tables

Tables represent quintessentially important HTML elements, serving as the cornerstone data visualization tool in data-centric applications since the early days of Internet evolution. Tables typically contains multiple row tags <tr>, which in their turn could contain standard cell tag <td>, or header cell tag <th>. In addition to this, Tables could be enhanced with <thead> and <tfoot> tags in order to group the header and footer content, correspondingly and <tbody> tag grouping the main content of the table. These sections could be styled differently, thus are adding more “granularity” to the formatting CSS options. Following example demonstrate the technique of different styling pertinent to the different Table sections.

Solution

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

Second, proposed solutions do not use any graphic files (like. jpg, .png, .bmp, etc.), thus minimizing the web page digital footprint and ensuring the fast page load. Entire solution is encapsulated in a single text file of less than 8kb in size, which is well below the typical size of any medium-quality picture file (the file size could be even further reduced by removing the comment lines added for the clarity/readability).

The last but not least: proposed 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 will serve as a platform, providing almost universal portability ranging from typical desktop – to notebooks – to tablets – to mobile devices (smart phones).

Content

Demo Table is populated with sample textual content taken from the reference article [1,2]; it is presented “AS IS” for demo purpose only without warranty of any kind. Textual content is used just for simplicity and didactic clarity. In general, Tables could contain graphic and other multimedia elements, as, for example, in online video player[3].

Source code

Listing 1. Web page demonstrates novel Table formatting technique via HTML5 and CSS3

<!DOCTYPE html>
<head>
<title>ALTERNATE TABLE ROWS | HTML5, CSS3</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 notes

Color gradient effects dramatically increase the overall aesthetic appeal of the web page; the following code listing demonstrates the linear gradient technique working in all major web browsers:

Listing 2. Color gradients in CSS3

/* add gradient */
background-color: #808080;
background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
background: -moz-linear-gradient(top, #606060, #909090);

Rounded corner effect could be styled by novel CSS3 feature like shown below:

Listing 3. Rounded corners in CSS3

/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Box shadows could be added as shown in the following code snippet:

Listing 4. Adding box shadows via CSS3

/* 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);

Browser compatibility

  • Mozilla Firefox 7+
  • Google Chrome 12+
  • Apple Safari 5+
  • Microsoft Internet Explorer 9+

References

  1. New York City, a decade of inflation: the outspoken numbers
  2. First decade of 21st Century: Aurum is golden and Silver is such Argentum!
  3. YouTube Top100 statistics as of 09/01/2011

Copyright © 2011 Alexander Bell

Comments