Here is a list of useful table-related styles you can use. Salesforce styles are case sensitive.
- .list - add to <table> along with border="0" cellspacing="0" cellpadding="0".
- .headerRow - add to <tr> to display column headings
- .dataRow - add to <tr> to display record rows.
- .dataRow last - add to <tr> to display record rows without line separation between rows. Usage: class="dataRow last".
- .dataCell - add to <td> to display cells (this is normally not needed).
- .CurrencyElement - helpful in <td> and <th> when displaying currency in cells.
- .PhoneNumberElement - helpful in <td> and <th> when displaying phone numbers in cells.
- .DateElement - helpful in <td> and <th> when displaying date/datetimes in cells.
- .btn - Not related to tables, but useful to format anchors as buttons.
If you also want the standard onMouseOver effect in your table (row changes color on when you hover over it), you'll need to add the following to your table row:
A quick note before the sample... Salesforce stylesheets documentation is limited (and outdated in some places). Salesforce actually discourages you from using the standard stylesheets, saying that the stylesheets are not versioned and may change without notice. I think that the styles don't change often enough to be too concerned about it, and when they do, you can quickly figure out what they changed to. If you are more paranoid than I am, you can duplicate the sfdc styles in your own CSS instead - the latest Salesforce standard stylesheets are located in the following address: https://<instance>/dCSS/Theme3/default/common.css.
Here is a simplified sample that puts it all together: