Madison Rails
Smart CSS for data tables

Home Page | All Pages | Recently Revised | Feed

Data table code from the February Crazy Talks lightning talk:

xxxxx The example below was taken verbatim from Andy Budd’s book on CSS Mastery. Also of note on the Friends of Ed website is the new book out called Rails Solutions: Ruby on Rails Made Easy

Take a look at the CSS Table Gallery , showing off all kinds of useful data table styles (some good, most not-so-good). I was going to present this during the lightning talk but it’s just as useful here.

While I’m on the topic of CSS styling for front-ends, CSS Vault is a great site presenting several examples for building out the front-end of your web site using floating CSS-only presentation code.

Even more on the topic of smart CSS for data tables is the Yahoo UI. YUI data tables provide a great place to start building smart data tables with compliant xHTML and CSS (and a little JavaScript too). To see these examples at work, check out the examples and implementations pages. Of special note in the YUI DataTable.Widget, custom sorting, no dB calls needed, nifty.

View demo for Andy’s table code:

xHTML for the sample table

CSS for the example table

Here is the basic structure of the xHTML:

<table cellspacing="0" id="playlistTable" summary="Blah, blah, blah">
    <caption>Top 15</caption>
    <colgroup>
        <col id="playlistCol" />
        <col id="trackCol" />
        <col id="artistCol" />
        <col id="albumCol" />
    </colgroup>
    <thead>
        <tr>
            <th id="playlistPosHead" scope="col">Playlist Position</th>
            <!-- scope can be either "col" or "row" OR "rowgroup" or "colgroup" -->
            <th scope="col">Track Name</th>
            <th scope="col">Artist</th>
            <th scope="col">Album</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>1</td>
            <td>Hide You</td>
            <td>Kosheen</td>
            <td>Resist</td>
        </tr>
        <tr>
            <td>2</td>
            <td>.38.45</td>
            <td>Thievery Corporation </td>
            <td>Sounds Rom the Thievery Hi-Fi</td>
        </tr>
     </tbody>
</table>

... and the CSS to style the above:

table {
    border-collapse: collapse;
    width: 50em;
    border: 1px solid #666;
}
th, td {padding: 0.1em 1em;}
caption {
    font-size: 1.2em;
    font-weight: bold;
    margin: 1em 0;
}
col {border-right: 1px solid #ccc;}
col#albumCol {border: none;} /* Removes the right border from previous col rule */
thead {
    background: url(table_header.jpg) repeat-x left center; /* Example will funtion w/o this rule, but it looks nice */
    border-top: 1px solid #a5a5a5;
    border-bottom: 1px solid #a5a5a5;
}

/*The tbody style below adds scrollbars to the table ... you'll need to adjust the table width to accom. */
/* tbody {overflow: scroll; height: 100px;}*/

th {font-weight: normal; text-align: left;}
#playlistPosHead {text-indent: -1000em;} /* Makes column header appear "off screen" so it doesn't blow out the table */
.odd {background: #edf5ff;} /* Alternating row color */
tr:hover {background-color: #3d80df; color: #fff;} /* Sorry IE, you suck, no cool row hover effect for you */
thead tr:hover {background-color: #3d80df; transparent; color: inherit;} /* Adds header row color hover effect, not really needed, but looks cool (again, IE will not handle hover effects on non-links)*/