Tables and Borders

I have had a few people ask me, “How come when I create a table and set the border parameter to 1 it doesn’t actually display any borders?” Well, the answer is usually that there may be some CSS that overwrites that parameter by establishing a style that removes all borders from tables. Luckily, there is an easy solution. Let’s take a look at some examples. Adding something like this:

table { border: 1px solid #000; }

will only add a border around the table. You would then need something like this:

table td, table th { border: 1px solid #000; }

That will add borders around your th cells and your td cells, but now you will probably have your borders doubling up. It might look something like this:

Header one	Header two	Header three
Something here	Another thing here	Something else here

Here I added some cellspacing so you can see all the borders:

Header one	Header two	Header three
Something here	Another thing here	Something else here

In order to get the table border back to the way it would have been if border=”1″ would have worked requires an extra style in your CSS.

table { border-collapse: collapse; }

Now your table should look like this:

Header one	Header two	Header three
Something here	Another thing here	Something else here

Read a bit more about it here.