Matching Styling Without <apex:pageBlockTable>

This is going to be short, sweet, and an example of something that you probably shouldn't do in production unless you know you're going to be able to fix it in the future when platform features change; but that doesn't mean it's not useful.

The Problem

These days, to make a web page feel good, there's a good chance that you've spurned the various Visualforce tags available and you're doing a lot more work client side with JavaScript and various libraries. At some point, this probably means that you're going to have a HTML generated table and it's going to stand out like a sore thumb from the rest of the tables in Salesforce unlike the easy days when you just used <apex:pageBlockTable> to get the job done.

The Fix

The good news is that you can make any table fit in with the use of a few CSS classes. These are classes defined internally by Salesforce and prone to change at any time—in other words, using them is unsupported. That said, if Salesforce update the aging 'classic' UI (which I doubt) they'd most likely do so by changing the CSS, not by changing the generated markup.

So without further waffle, here's an HTML table that will look like it belongs in the regular, still used more often than not, 'classic' UI:

<table class="list">
    <thead>
        <tr class="headerRow">
            <th class="headerRow" scope="col">
                One
            </th>
            <th class="headerRow" scope="col">
                Two&nbsp;
                <apex:image value="/s.gif" styleClass="helpIcon" title="Drag a trainer here to assign them to all events. To assign a trainer to an individual event, drag their name to that event."/>
            </th>
        </tr>
    </thead>

    <tbody>
        <tr class="dataRow">
            <td>Data one</td>
            <td>Data two</td>
        </tr>
    </tbody>
</table>

As you can see there are a few simple classes to assign, and the second header shows how to implement the little help icon with tooltip text that's seen on many of the standard pages. Not rocket science, but handy.