Table Tricks and Tips

So you want to use valid CSS and valid (X)HTML markup and a universal reset to kill off borders, padding, and margins -- but you also want to preserve the original look and feel of the default table?

No problem! We can pretty easily spoof this look using the "inset" and "outset" features of CSS borders. To illustrate, here is the default table, before applying any universal reset:

Basic "old school" table display:

Basic "old school" table code:

Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text

      <table border="1">
        <tr>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
        </tr>
        <tr>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
        </tr>
        <tr>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
        </tr>
      </table>
  

This is all well and good, but what if you want to use a popular "universal reset" like this:
* {border:0;margin:0;padding:0;}

You won't get any borders on your table despite the border="1" attribute in your code. Why? Well I'm not really sure, but try it out for yourself. The "border" attribute is not deprecated in the XHTML standards but it doesn't work when you use a reset like this. Maybe this is due to the DOM? I'm not really practiced and educated in enough in this area to explain it. Fortunately, I know enough to be able to fix it!

I have produced the effect here with a <div> of class "violative_table2" where the child <table>, <tr>, and <td> elements have a style of border:0; which is an even trade with what the universal reset would do, but this way the table above still shows its borders. In any event, this is what you end up with (background color and padding added the containing <div> for emphasis):

Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text

What can we do? We can make our own customized border look (which is usually preferred) but sometimes we might want to preserve the default look. Since the border attribute won't be read by the browser anyway, we may as well get rid of it. For this we have the standards-compliant style version which is demonstrated below:

Basic compliant table display:

Basic compliant table code:

Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text

      <table>
        <tr>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
        </tr>
        <tr>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
        </tr>
        <tr>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
          <td>
            Some text
          </td>
        </tr>
      </table>
    

Is it a spot-on match? No, not precisely. You'll notice that the inside border color is just a bit darker in IE and the outside border color is a bit lighter in FF in the compliant version, but honestly who will really be checking that closely? Answer: Nobody!

So what's the trick?

We oh-so-cleverly apply the following CSS code to our <table>, <tr>, and <td> elements:

#compliant_table table {
  border: 1px outset #fff;
}
#compliant_table td,
#compliant_table tr {
  border: 1px inset #e2e2e2;
}
    