Best way to create a resuable <table> style

Question

I'm creating a lot of different tables (db-driven) across a number of different pages where I'd like to impose a consistent styling:

First and Last Row: bold font - reversed foreground/background All other rows zebra striped.

Basically just implementing 'header/footer' rows and zebra striped data rows. I've seen some jQuery examples and played around with it a little bit but not enough to be confident that there isn't a better CSS-only as well as knowing the best way to generalize this so it's most easily re-used.

Would love to see samples comparing css (if applicable) with jquery thx

Answer 1

With using just CSS, you could just make classes for the trs, and assign them when building the table. something like this:

tr bold { font-weight: bold; } /* for first and last */
tr even { background-color: #fff; }
tr odd  { background-color: #ddd; } /* for zebra rows */

then, apply said classes when building the table.

in jQuery, you can use the loop through the trs, check if they are even or odd and apply the correct styles, then use the :first-child & :last-child selectors to set the bolding on the first and last rows.

Answer 2

There is a great jQuery plugin called datatables but it may be overkill for you. http://www.datatables.net/

As far as CSS goes as long as you use clean table markup with THEAD and TFOOT it should be fine

<TABLE>
<THEAD>
     <TR> ...header information...
</THEAD>
<TFOOT>
     <TR> ...footer information...
</TFOOT>
<TBODY>
     <TR> ...first row of block one data...
     <TR> ...second row of block one data...
</TBODY>
<TBODY>
     <TR> ...first row of block two data...
     <TR> ...second row of block two data...
     <TR> ...third row of block two data...
</TBODY>
</TABLE>

Then you can use css like this:

.decoration table { background-color: white;}
.decoration thead, .decoration tfoot { font-color:white; background-color:black; }
.decoration tbody tr.even td {background-color:gray;}
.decoration tbody tr.odd td {background-color:white;}

Answer 3

in addition to the accepted answer and in hope with the vanishing of IE6, you may consider pseudo selectors. something like:

tbody tr:nth-child(2n+1) { background-color: #abcdef; } 
tbody tr:nth-child(2n) { background-color: #012345; }

these two add the odd and even colors. then to provide more fluid user experience:

tbody tr:hover { background-color: #ffffff; } /* highlight row */
tbody td:hover { background-color: #eeeeee; } /* highlight cell */