How to give different style to <table> columns and rows?

How to give different styling to last row only and 1st and last column of the table . is it possible without using css classes?

See current example here http://jsfiddle.net/jitendravyas/KxmY5/1/

and this is how I want i开发者_如何学Pythont:

If you are targeting A-Grade browsers with any sort of historical nature to them (IE 6, etc) you cannot do it without using a class/ID to select them. If the browser you are targeting supports :nth child selectors in CSS, you could write a rule to select them, but know that it won't be supported by all (probably) of your visitor's browsers.

Here is a reference to Sitepoint's nth child article

This is incredibly hacky. Doesn't work at all in IE6 (due to using the '+' adjacent-child selector). Mostly works in FF 3.6, but should give you an idea of how ugly this gets without using classes, IDs or :nth-child selectors.

<style type="text/css">

table tr + tr + tr + tr + tr + tr + tr + tr td {
        background-color: yellow; /* row 8 */
}

table tr + tr + tr + tr + tr + tr + tr + tr + tr td {
        background-color: white; /* rows 9+ */
}

table tr td {
        background-color: red; /* 1st column */
}

table tr td + td {
        background-color: white; /* reset 2nd column to white */
}

table tr td + td + td {
        background-color: green; /* 3rd column */
}

table tr td + td + td + td {
        background-color: white; /* reset cols 4-10 */
}

</style>

As this stands, the red/green columns get terminated by the yellow row. But some MORE of this ugly stuff could resume them on rows 9 and 10.

By using JQuery JavaScript framework it might be easier in your case.