How To Make Your Tables Stand Out

How To Make Your Tables Stand Out

One of the things you've got to love about having a website is wondering how your site will view in the many browsers that are available. And if you're like me you probably check your site using your browser and only check how it looks in 1 or 2 others occasionally.

But the 1 thing I've noticed in checking my sites is that tables, primarily the borders of the table, don't view the same way across all browsers. And because I don't know how to write CSS code the only way I knew to fix the problem was to either remove the borders or use borders that were close to what I was trying to do.

For example, if I was trying to get a table with a red border, depending on the browser I'd see:

Explorer

FireFox

Well yesterday I found a way to fix the border color problem without using CSS

To make colored borders for your tables that will look the same on Internet Explorer and FireFox (the 2 most popular browsers) all you have to do is:

1. Create your table.
2. Define the background for your table to be the color you want for the table's border.
3. Define the border size for your table to be 0.
4. Use the "cellspacing" attribute for your table to determine the border size.
5. Change the background for the cells of your table to be the color you want.

Here's the code for the table holding the tip title and if you're using FireFox you'll notice that it has a "nice" red border:

<table border="0" cellpadding="10" cellspacing="3" width="390" id="AutoNumber7" bgcolor="#FF0000"> <tr> <td width="80%" bgcolor="#FFFFCC"> <p align="center"> <b>How To Make Your Tables Stand Out</b></td> </tr> </table>

And this is what the above code means in English:

1. Define a table with:
   border size of 0
   cellpadding of 10 (that's the empty space around the content
   cellspacing of 3 (that sets the size of the border seen)
   width of 390 (this one is in pixels but you can use percentages)
   id is the table's name bgcolor of #FF0000 (background is red)
2. is the first table row
3. Next we define the column as: width of 80% of the table cell background color of #FFFFCC (that's light yellow)
4. Formatted the cell's content.
5. Ended the column, row and table definitions.

The above is an example of a single celled table but you can use this method to define tables with multiple rows and columns to get a nice border around your table and each of the cells.

Now if you're using an HTML editor like FrontPage to create your web pages you will have to do some HTML editing to make your border show up because many HTML editors insert some code and you'll have to remove it in order to see your border.

So after you've created your table and cells check the line that defines the table. It's the line that starts <table ...

If you see code similar to this:

style="border-collapse: collapse" bordercolor="#111111"

you'll need to remove it.

Using the above method to define your tables and cells can help make your site look the same for many web browsers. So give it a try.

To Your Success,
Susan