skip css formatting on one html table

Question

I have CSS items for all my table elements (<table>, <tr>, etc...) but I have one table for which I don't want the CSS to apply.

What is the quickest way to have this table just display as a raw HTML table and not apply my CSS formatting.

Also, in my CSS file, I have this:

 table td 
 {
   padding: 5px;   
   border: solid 1px #e8eef4;
 }

 table th
 {
   padding: 6px 5px;
   text-align: left;
   background-color: #FFFFFF; 
   border: solid 1px #e8eef4;   
 }

what if I want to have multiple table formats, how do I do this?

Answer 1

Use a class for the table you want formatted. For example

<table class="myformat">
    ....
</table>

Now on the css side make sure you define the correct formatting as follows:

table.myformat th {
    color: red;
}

table.myformat td {
    color: green;
}

The tables that have the class="myformat" property will have the formatting. The ones that not will not. With this approach you can further make various table formats as different classes and apply them to your different tables.

Answer 2

You should use classes to define several different styles, e.g:

// global table styles - will be applied to all tables
table td
{
  background-color: green;
}

// styles for tables with class "style1"
table.style1 td
{
  border: solid 1px red;
}
table.style1 th
{
  ...
}

// styles for tables with class "style2"
table.style2 td
{
  border: solid 1px blue;
  background-color: white;
}

Then set the class attribute on the tables where you want to apply that style:

<table class="style1"><tr><td> red border, green background </td></tr></table>

<table class="style2"><tr><td> blue border, white background </td></tr></table>

<table><tr><td> default border, green background </table>

Here style1 is applied to TDs of the first table, style2 to TDs of the second table.

Note that global styles (without any class name) apply to all matching elements (e.g. TDs), but these styles can be overridden by specific styles (as shown with the background-color, which is globally set to green, but overridden for style2).

BTW: for a tutorial about CSS, have a look at http://w3schools.com/css/.