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.
