When I started programming, I started with tables and quickly got frustrated spending mega amounts of time trying to make them behave/align across all the different browsers. I'd spend hours fiddling with float tags and various documented strategies to line things up.

So I initially gave up. I started switching my code to use divs. After all - everywhere I went for docs/forums/blogs people kept stating that tables were evil and should never be used.

Then I read one blog that had one tip (I wish I could remember the link to give credit). Since trying this tip tables have been everything I expected them to be.

The tip is really super simple -> At the top of your css file:

html {margin:0px; padding:0px }

And OMG I never had to try a float or other odd tricks again. Tables became super super easy.

I think many people spend tonnes of time troubleshooting cross-browser alignment issues trying to fight all the varying default margin and padding behaviors the browsers put in place. By initially setting them all to 0, they become normalized. Then you can started making adjustments, which then all have the same affect for each browser.

I later found only one other tip that helped me. IE will only consistently render a column width using a %. px does not work - correctly.

  <tr> 
    <td colspan=2>....</td>
  </tr> 
  <tr> 
    <td width="25%">....</td>
    <td>....</td>
  </tr> 
  <tr> 
    <td width="25%">....</td>
    <td>....</td>
  </tr>