User:Eleazaros/Tables

a list of table formatting information.

Coming Soon...

Sortable Global Alternating Rows
This works for basic tables. If you want specific classes with tables, just name the class and include it in the  portion of your table. /* DEFAULT "sortable" tables alternating colors. */ table th { background-color: white; } table tr.odd { background-color: skyblue; } table tr.even { background-color: white; } This will set tables to alternating rows of blue and white but won't effect the header row of a table.

You can do the same thing with non-sortable tables with the code in the next section. It can also work with the sortable tables so I tend not to use the above code versus just using the Alternating Rows code below.

Alternating Rows in Tables
The code for handling this is located in both the .CSS file and in your .JS file.

Place the following in your .CSS file:
 * Note: You'll want to specify the  for the class with this.  If you don't, when used with   it effects the background-color of your header as well.  This is an oddity of the sortable class.  Simply specify the header background color in your css and it fixes the problem.

table.bandedRows th {background-color: white;} table.bandedRows tr.odd {background-color: white;} table.bandedRows tr.even {background-color: skyblue;}

In your .JS file: /* functions for alternating row colors in tables */ function setAlternateRows(tbl, parseClass) { rows = tbl.getElementsByTagName("tr"); for (k = 1; k < rows.length; k++) { rows[k].className = (k % 2 == 0 ? "even" : "odd"); }   return; } function alternateRows { tbls = document.getElementsByTagName("table"); for (i = 0; i < tbls.length; i++) { tbl = tbls[i]; parseClasses = tbl.className.split(" "); for (j = 0; j < parseClasses.length; j++) { parseClass = parseClasses[j]; switch( parseClass ) { case "bandedRows": setAlternateRows( tbl, parseClass ); break; default: break; }       }    } } addOnloadHook( function {        alternateRows }); If you put the above lines into your Special:MyPage/monobook.css and Special:MyPage/monobook.js file here, you should see the following table with alternating rows. Pretty basic stuff to work with but handy. If you need more than 1 alternating row pattern, I adjusted the code to allow for this. Simply create another CSS color definition, with a different name, and add a line to the CASE in the JS code with that class name in it. Example:
 * altRows as a different color schema:

table.altRows th {background-color: orange;} table.altRows tr.odd {background-color: slategray;} table.altRows tr.even {background-color: pink;} for the javascript code you will insert a couple lines into the switch statement within the alternateRows function: This table will show the "plug ugly" effect of this color combo...