Enrich Your HTML Tables with JavaScript Progressive Enhancement
- By Ivan Pepelnjak
- Sep 7, 2007
📄 Contents
- Tabular Headaches
- Add the Final Touches
- Create Lively Tables
- Summary
- + Share This
- 💬 Discuss
Like this article? We recommend
Sams Teach Yourself JavaScript in 24 Hours, 4th Edition
Learn More Buy
Like this article? We recommend
Like this article? We recommend
Sams Teach Yourself JavaScript in 24 Hours, 4th Edition
Learn More Buy
I’ve been struggling with table formatting for years. Although I could use Cascading Style Sheets (CSS) to automate most of my other formatting/design scenarios, tables remained elusive. For example, the simplest requirements (alternate background on even/odd rows and borders between columns) required manually applying CSS classes to half the rows and at least first or last column
NOTE
An in-depth discussion on how you can use various CSS features to minimize the required table formatting can be found in the article "Seven Common CSS Mistakes and How to Avoid Them".
While fixing the server-side scripts to apply the necessary classes to the table rows and cells is usually easy, the tables produced manually remain a huge pain. Just imagine adding a row in the middle of a long table; all the subsequent rows would have to be fixed.
Tabular Headaches
With no obvious short-term CSS advances that would help me solve this problem, I finally gave up and decided to use client-side JavaScript to add the final design touches to the tables. Obviously, the HTML markup itself should produce reasonably acceptable tables with JavaScript progressive enhancement adding the final touches.
To start the project, I defined a new CSS class that would be applied to the whole table and a number of CSS rules that defined the default formatting of cells in the table:
- The header cells would have gray background and left, right, and bottom borders.
- All the other table cells would have left and right borders.
Furthermore, I had to define additional classes to be applied with the JavaScript code to enhance the table:
- The OddRow and EvenRow classes for the table rows
- The FirstColumn and LastColumn classes for the first and last cell in the row
NOTE
You can even define a separate class for every column to facilitate left/right column alignment.
The resulting CSS rules are included in the following printout and you can view the whole CSS style sheet and the resulting table on my web site.
TABLE.printout { border-collapse: collapse; }
TABLE.printout TD, TABLE.printout TH {
padding-left:8px; padding-right:8px;
padding-top: 2pt; padding-bottom: 2pt;
border-px; border-right-style: outset;
border-left-style: outset; }
TABLE.printout TH {
border-bottom-style: outset;
background-color: #C0C0C0; }
TABLE.printout TR.EvenRow { background-color: #E0E0E0; }
TABLE.printout TR.OddRow {}
TABLE.printout .FirstColumn { border-left-style: none; }
TABLE.printout .LastColumn { border-right-style: none; }
NOTE
Note: As the left and right borders are applied to HTML elements (table cells), you can use CSS classes (the FirstColumn and LastColumn classes) to remove the unwanted attributes (left and right borders). If the borders were defined in a CSS class, the border definitions in the FirstColumn and LastColumn classes would have to contain the !important keyword to override the previous rule.
- + Share This
- 🔖 Save To Your Account