I’ve talked before about how there are proper uses for HTML tables in addition to the improper use (i.e., page layout) that most web developers seem to be aware of. Now I’m going to show an example of an HTML table put to proper use. On my Los Angeles County Mexican Restaurants blog I have an entry that shows the restaurants that have been covered so far.

This table has a number of interesting features that I will go through one by one.

HTML

1. Usage of the SUMMARY attribute – Following the advice given at Creating Accessible Data Tables the summary attribute has been added to the opening TABLE tag. Quoting the article: “It can be acknowledged by a screenreader, but it will not be rendered in a graphical browser view of the data table. It is implemented to give a short idea of what is contained within the data table.”

2. Usage of the SCOPE attribute – Following the advice given at Creating Accessible Data Tables each TH is given the scope attribute with a value of either col or row depending on if the TH is a header for a column or a row. (Note that TH elements can appear in TBODY rows as well as THEAD rows.)

CSS

3. Progressive enhancement – This table displays fine without any CSS enhancements and also displays acceptably in browsers that do not have full CSS support. Visitors using browsers with extended CSS support will see extra visual effects but visitors using any browser will still be able to properly view all the table’s data.

4. Highlighting – The following CSS code highlights header cells in the THEAD and rows in the TBODY when they are hovered over by the user:

   1. THEAD TH:hover, TBODY TR:hover
   2. {
   3. background-color: #215F8F;
   4. }

   While the following CSS code turns the text links in those elements white when hovered over:

   1. THEAD TH:hover, TBODY TR TD A:hover
   2. {
   3. color: #FFFFFF;
   4. }

   In browsers that don’t recognize the pseudo-elements being selected the user can still take advantage of the data being presented.

5. Table Border – Originally the little known HTML attribute and value pair frame="hsides" was used in the opening TABLE tag to add top and bottom borders to the table but this has been replaced by border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;.

jQuery and Other Scripting

6. Zebra Striping – The following jQuery code adds different colored striping for alternating rows in the table:

   1. $(document).ready(function() {
   2. $(‘TABLE.sortable TBODY TR:even’).addClass(‘even’);
   3. });

7. Sortable – I can’t show all the relevant code here but this table utilizes a jQuery sortable table plugin that sorts the table alphabetically by restaurant name, city name, or reviewer name when the correct header is clicked on (clicking anywhere in the TH cell is sufficient; it is not necessary to click on the text within the cell). It also sorts numerically if the blank first TH is clicked on.

   One problem with the jQuery sorter function is that once you sort the table by restaurant, city, or reviewer name you can’t then resort the table in the proper numerical order without putting leading zeros in front of the single digit numbers. This is an okay solution for now when the blog is fairly new but when the number of reviews hits one hundred an extra leading zero will have to be added to single digit numbers and single leading zeros will have to get added to double digit numbers. Of course another such scenario will have to occur when the number of reviews hits one thousand (I believe there’s at least 1500 Mexican restaurants in Los Angeles County). Hopefully a fix can be made to the plugin that will allow leading zeros to be removed.

8. sIFR – This table properly utilizes the CAPTION element and also applies a sIFR effect to it to get the caption to appear in a stylized font that is unlikely to be installed on the visitor’s machine. This demonstrates an example of two layers of progressive enhancement in action. This first image shows the full sIFR effect:

   

   This second image shows what the table caption will look like if JavaScript and/or Flash is turned off in the browser:

   

   While this third and final image shows the table displayed as pure unadorned HTML with no enhancement from CSS, JavaScript, Flash, or sIFR:

   

   So no matter what a browser is capable of it will always display this table in a logical, presentable way.

This table doesn’t have all the features an HTML data table could have (e.g., there is no need on this table for usage of axis, colspan, rowspan, TFOOT, etc.) but it does do what it needs to do. Expect another table lesson in the future.