Automatic HTML table formatting with JavaScript
This article is also available in SPANISH
SOMETHING TO ADD TO YOUR BAG OF TRICKS - KILLER ZEBRA TABLES
A member on the Killersites.com Forum mentioned in a post how he was working with (or trying to work with) an article he recently read by a guy named David F. Miller.
Basically, the article had some interesting JavaScript code that automatically changed the background color of every 2nd row in an HTML table. The reasons for wanting to do this are many; here are a couple of big ones:
- To make the table look good
- To make the table information easier to read
You can see an example here.
I want to point out a couple of things:
- This is for tables that are being used to present data. Think of spreadsheets, MS Excel et cetera.
- Typically when you're displaying data in a table, you would be sucking it in from a database using something like PHP (articles on PHP coming soon, grasshoppers!) and in that case you would just do this in the PHP code and not bother with doing this with JavaScript.
Because of that (the PHP thing), when I first took a look at the article, I did not pay much attention. But about 2 weeks later, I found a place (my new HTML tags/codes page) where I could use this script!
So I got the JavaScript code, and put it to use on my page. Everything worked fine 'out of the box', except for one thing – it would not allow you to use the script on more than one table on the page … I needed to use it on many.
I could have taken the easy way out, and just manually colored the many table rows. But I quickly realized that the manual way was going to be just too much freaking work – too much work just goes against my basic sensibilities. Too much video game playing time would be lost, so something had to be done!
I got out my nerd-cap and started banging away at the JavaScript and CSS code that made this nifty script work. Thinking I could also write a nice article out of this, I settled on a variation of the script (out of a few) that made it easy to apply the script to as many tables as you wanted to; easy even for the non-programmer.
The original article was called 'Zebra Tables' (as in zebra stripes), so I thought that my modified version of the script should be called 'Killer Zebra Tables'.
ARTICLE: CREATING KILLER ZEBRA TABLES
Since this is an article about using the Killer Zebra Tables tool (script) and not about how the JavaScript programming works, I will spare you the details of the JavaScript.
That being said, you are free to go into the code and check it out for yourself. You'll find it well commented (my own and some left over from David F. Miller) along with some testing code that will allow you to 'see' the script work as it styles the tables.
The whole thing can be downloaded here.
You will find in the ZIP file a simple HTML page and a .js file with all the JavaScript. I left the required CSS code in the HTML page since it's really short, but you can easily extract it into its own CSS document.
THE 3 STEPS TO MAKING THIS WORK
- Applying the CSS.
- Applying table ID's.
- Changing the HTML 'body' tag to 'talk' to the script.
- (Optional) Setting the standard color in the .js file.
1. APPLYING THE CSS
Let's start by looking at the CSS:
.taglist {
border: 1px solid #666666;
margin-top:40px; margin-bottom:30px;
}
.taglist tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;<
border-left: 1px solid #D9D9D9;
}
.taglist tbody tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}
Even if you don't know any CSS, all you really need to know about the above code snippet is:
It's CSS code – CSS is used to style web pages. This code targets our tables specifically. In a nutshell, I've created a CSS class called 'taglist' and 2 other more targeted CSS selectors ('.taglist tbody tr td' and '.taglist tbody tr.selected td') that help to further define the look of the tables.
What you have to do is 'tag' your tables with the class: '.taglist'. You do this by going to your table code and write this:
<table id="table1" class="taglist">
I'm not going to go into the details of CSS; this is standard stuff and if you are having problems, you should go to my CSS Tutorial website.
Again, all you need to know is that for each table that you want to have styled, will need this text included in its' tag: class="taglist"
2. 'TAGGING' THE TABLES TO BE STYLED (Applying ID's)
The next thing you need to do, is to give a unique ID to each table that you want the zebra tables script to affect.
To do this, all you need to do is 'tag' each table with the text 'id=' and the unique name you want to give it. The 'unique' name can be anything as long as it's the only tag on the page with an ID of that name.
For example:
<table id="table1" class="taglist">
…
</table>
<table id="table2" class="taglist">
…
</table>
You'll notice that one table has an ID of 'table1' and the other has an ID of 'table2'. There cannot be another table (or any other HTML tag) with either of these ID's. I hope this makes sense? The JavaScript uses these unique ID's to find the tables that you want to have affected by the script.
3. HOW ARE WE 'TALKING TO' THE PROGRAMMING?
Finally, we're almost done! Ok, the last thing you have to do is 'talk' to the Killer Zebra Tables script. You do this in the HTML 'body' tag. As with many other things in life, it's just easier if I show you:
<body onload="stripeTables('table1','red','table2', 'blue');">
So what I've done in the HTML 'body' tag is to tell the browser to 'talk' to the script called 'stripeTables' and fed the 'stripeTables' script some information it needs – the name of the table and the color I want the alternate row to be. For each table I want the script to affect, I need to include the tables' unique ID (that I gave it) and the color:
'table1','red', -> for the first table
'table2', 'blue' - > for the 2nd table
As you can see it always works in pairs: table ID + color. You will also notice that I single quoted each table ID and each color with commas in-between.
If you're a little confused by this, don't worry; it will soon clear up for you. Just download the sample and try it out, change the colors and see what happens. If you're still having problems, just post a question to the Killersites.com forum and I will answer.
4. SETTING ANOTHER STANDARD COLOR
If for some reason you want to change the standard color used in all the tables (the other color that makes the zebra pattern in your tables) you will need to open up the 'killerZebraStripes.js' file and look for this code:
// hard coded here and applies to all tables.
/*
*********
*********
*/
var oddColor = "#eee";
/*
*********
*********
*/
// hard coded here and applies to all tables.
What you are actually looking for is this line of code:
var oddColor = "#eee";
This can be found around line 30 of the page. Right now it is set to an off white color: '#eee'. You can change it to any other color that you want – just type it in and re-save the file.
CONCLUSION
I hope you found the Killer Zebra Tables script interesting and easy to use. With this script in hand, you will be able to style all your tables easily and quickly.
SOME OTHER WEBSITES
www.how-to-build-websites.com : A tutorial designed to teach total beginners the fundamentals of a modern web design.
www.csstutorial.net : A website dedicated to teach total beginners the sister technology/language to HTML: CSS. CSS (cascading style sheets) is a must learn aspect of web design that gives the web designer total control over the page layout and style.
www.secretsites.com : A grab-bag of tips and tricks that I have picked up over the last 10 years.
By: Stefan N Mischook
October 24, 2004