CSS Best Practices for Tables 1

[Michael42]

Hello,
(incomming newbie question...)

I have a .css file that has entries for a how I would like "most" of my tables to be presented with entries as outlined below. I want to have a different set of table styles for how I present reports using a table.

What is the easiest to manage way to use CSS with different table styles?
table {
...
}
th
...
}
tr
...
}
td
...
}


Thanks,

Michael42

 

[tviman]

Create psuedo classes for your table and then use the "class=" attribute.

There's always a better way. The fun is trying to find it!

 

[Vragabond]

Easiest way is to create another table class and make other elements dependent of that class:

<style type="text/css">
table { ... }
th { ... }
tr { ... }
td { ... }

table.reports { ... }
table.reports tr { ... }
table.reports th { ... }
table.reports td { ... }
</style>
<table>
 <tr>
  <th>Head</th>
 </tr>
 <tr>
  <td>This is a normal table</td>
 </tr>
</table>

<table class="reports">
 <tr>
  <th>Different head</th>
 </tr>
 <tr>
  <td>This is a reports table</td>
 </tr>
</table>

 

[Michael42]

This looks to easy

Given your example, is <table class="reports"> sufficient or to all the tags in the html table (th,tr,td) need to have class="reports" too?

Thanks very much,

Michael42

 

[Vragabond]

That is sufficient. To elaborate on what the syntax is telling. Your part redefines the normal look for the elements table, tr, th and td. My added styles define a table that has a class called reports and every tr, th and td element within this table. Hope it is clear.

 

[Michael42]

>>Hope it is clear.

Yes - thanks very much for elaborating.

I am starting to "get" CSS and seeing what a big impact it can have.

Take Care,

Michal42