How to Apply a class to a table?

[maharamDan]

Hello I have many tables on one page. I was wondering if the example below is the correct way to assign a class to a single table. For example if I only want to use the TD and TR charactericts for one table on the page not all.

Thanks in advance:


<style type="text/css">
.tableone {
width: 100%;
max-width: 500px;

td.tableone
border: 1px solid #666666;
font-family: Verdana;
font-size: 10px;
color: #000000;
padding-left: 5px;

tr.tableone
font-family: Verdana;
font-size: 10px;
color: #000000;


}
</style>

<table border="1" class="tableone">
<tr>
<td>Table</td>
</tr>
</table>

 

[zvrcvm]

This is the correct form to write the styles for your needs:

<style type="text/css">
.tableone {
width: 100%;
max-width: 500px;
}
.tableone td {
border: 1px solid #666666;
font-family: Verdana;
font-size: 10px;
color: #000000;
padding-left: 5px;
}
.tableone tr {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
</style>

When you assign the class 'tableone' to a table, all the td and tr tags it has inside will take their specified styles

Giorgio


Masochist: Windows programmer with a smile.

 

[Vragabond]

What you are defining is a class tableone, that has width and maxwidth. Then you are saying if you apply this class to a <td> or <tr> element (td.tableone, tr.tableone) it should have the described attributes. Your table should in that case be constructed like this:

<table class="tableone">
 <tr class="tableone">
  <td class="tableone"></td>
 </tr>
</table>

If you want to do it the way you described above, this is what to change in the css:

<style type="text/css">
  .tableone [b]{[/b]
    width: 100%;
    max-width: 500px;
  [b]}[/b] 
    
  [COLOR=red].tableone td[/color] [b]{[/b]
    border: 1px solid #666666;
    font-family: Verdana;
    font-size: 10px;
    color: #000000;
    padding-left: 5px;
  [b]}[/b]
  
  [COLOR=red].tableone tr[/color] [b]{[/b]
    font-family: Verdana;
    font-size: 10px;
    color: #000000;
  [b]}[/b]
</style>

<table border="1" class="tableone">
  <tr>
    <td>Table</td>
  </tr>
</table>

Also note the curly braces. They need to be around specific elements/classes/ids, not around the entire declaration. Hope it helps.