text: Q:
  
  Staggered for statements
  
  I have this codeJSFiddle, and when you hover over the cells, the column changes colour, however, when you move your mouse to another cell you can see that the colour seems to revert in a staggered pattern, does anyone have any idea why this is happening, I don't want a lecture on how horrible my code is please.
  Code that handles the un-highlighting:
  tables[i].onmouseout = function(e){
      var target;
      if(e.target.tagName.toLowerCase() == 'span') target = e.target.parentNode;
      else if(e.target.tagName.toLowerCase() == 'td') target = e.target;
      if(!target || target.innerHTML == '&nbsp;') return;
      target = document.getElementsByClassName('hcell');
      for(var i = 0; i < target.length; i++){
          target[i].className = target[i].className.replace(/\bhcell\b/,'');
      }
  }
  
  A:
  
  You have an error in your onmouseover logic, you are adding the hcell class a dozen times and then later you remove only one of them, a short test in your fiddle resulted in this:
  <td class="letter hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell"><span class="tblsup">2</span>D</td>
  
  Consider making your life a lot easier using jQuery for this.
  
  