How to style table border=”1″ using css

I have a site built on OsCommerse, but afterwards modified to output nice html with modern markup to be easier to maintain. You can see the site at highcap.se

First of all OsCommerse is built using only tables a’la 1999. No DIV tags whatsoever.

To be able to use a 960 design I had to remove all tables (and they are nested everywhere in the code). It was a hard work because many php files included other php files with the code split up in an endless mess.

Next thing was to make the admin page look a little more modern. But the design here is not as important so making the code perfect was not the goal.

The admin pages also consists of numerous tables and some of them have borders and some of them don’t. I use compass and a reset for the html elements and when I begun with the work I saw that all table borders were gone.

To get the table borders back on only the tables that had

<table border="1">

was not that hard as it first seemed using CSS3.

In your CSS you identify those tables using:

table[border="1"] {
border: 1px solid #698AA6;
}

For those tables with cellpadding use this code:

table[cellpadding="5"] {
padding: 5px;
}

This works with other properties too.