Awesome Tables With Very Little Markup

Feb

11

Creating nice looking tables in HTML can be quite annoying. You have to give the table an ID or class, then give each row a class or give each column a class. Then you have to add some crazy code to make each row alternate color and another set of crazy javascript to make the rows highlight when you mouse over them. Well... That is no longer the case. Below is an example of how to get nice looking HTML tables with very little code or markup.

Use Tables For Tables Only!
First things first, if your page is using tables for layout, then stop reading. This solution is for people who only use tables for their intended purpose. So, make sure you are using tables correctly before continuing on.

The Table Markup
The actual XHTML code for the tables themselves is extremely simple, and because of this is, it is nice and legible.

<table>
    <thead>
        <tr>
            <th>Column Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column Value</td>
        </tr>
    </tbody>
</table>

Give It a Little Style
Now that you have the HTML down, it's time to give this table it's looks.

table {
    border-collapse: collapse; /* removes unwanted
cellspacing garbage */
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    margin-bottom: 20px;
}

table thead {
    background: #ccc;
	text-transform: uppercase;
}

table thead th {
    border-bottom: 2px solid #333;
}

table thead th, table tbody td {
    padding: 5px 10px;
    border-right: 1px solid #999;
}

table tbody td {
    border-bottom: 1px solid #999;
}

Here's what you get:
Table with no row colors

Looks nice, eh? We're not done yet. Now we want to make each row alternate color and make each row change to a different color when you mouse over it. To do this, we need a little JavaScript.

function niceTables(evenclass,oddclass,hiliteclass) {
    if(document.getElementsByTagName('table')) {
		var tables =
document.getElementsByTagName('table');
		for (var nn = 0; nn < tables.length; nn++) {
		  var rows = tables[nn].tBodies[0].rows;
            for(var ii = 0; ii < rows.length; ii++) {
		    	var row = rows[ii];
		    	row.onmouseover = function () {
                        this.className=hiliteclass;
                    };
		    	if(ii % 2) {
		    		row.className = evenclass;
		    		row.onmouseout = function () {
		    		        this.className=evenclass;
		    		    };
		    	} else {
		    		row.className = oddclass;
		    		row.onmouseout = function () {
		    		        this.className=oddclass;
		    		    };
		    	}
		    }		
		}
	}
}

This will set the class of all rows that are divisible by 2 to the variable evenclass and all other rows to the variable oddclass. It will also set a mouse over event on the row and when moused over change the class to the hiliteclass. So this is great and all, but how do I get this function to run? Simple... We're going to add an onload event to the window with javascript like this:

window.onload=function(){
    niceTables('light', 'dark',
'hilite');
}

So, if this javascript included in the head of all your html files, then every table that exists in the page will obtain this style when the page loads. Notice that calling this function set the evenclass to 'light', the oddclass to 'dark', and the hilite class to 'hilite'. What this means, is that we have to add these classes to our stylesheet:

.light {
    background: #fff;
}

.dark {
    background: #DFEEFF;
}

.hilite {
    background: #9FCDFF;
}

...and you end up with:
Tables with alternatiing row
colors

There you have it, nice, sleek looking tables with very little markup. See it in action.

feedtag thisdigg this

No CommentsComments

Leave a Comment