Skip Photoshop…Mock Up Tables in HTML and CSS

Photoshop is a great tool for mocking up websites. Layers, shapes, and filters help make the design process quick and easy. However, designing data tables can be a chore. Setting the spacing and alignment of the text, borders, and rows isn’t necessarily hard, but is definitely tedious. A simple change of cell padding could require resizing and moving dozens of objects and layers, one at a time.

My advice for mocking up data tables in Photoshop? Don’t bother. There are plenty of other tools that design tables with less effort. And since a mockup’s final destination is a website, why not start with HTML?

HTML and CSS give an enormous amount of control over the design of tables. I always start with a table of fake data, including headers and footers. The markup looks something like this:

    <table>
        <thead>
            <tr>
                <th>Facilisi Formas</th>
                <th>Ullamcorper</th>
                <th>Usus</th>
                <th>Feugiat</th>
                <th>Humanitatis</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">This is the FOOTER</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th>Row 1</th>
                <td>Parum Lius</td>
                <td>Minim</td>
                <td>$1,799</td>
                <td>Quod</td>
            </tr>
            <tr>
                <th>Row 2</th>
                <td>Ex Amet Erat</td>
                <td>Quinta</td>
                <td>$4,342,099</td>
                <td>Vulputate</td>
            </tr>
            <tr>
                <th>Row 3</th>
                <td>Nonummy</td>
                <td>Sed Seacula</td>
                <td>$325</td>
                <td>Et Dolore Iis</td>
            </tr>
            <tr>
                <th>Row 4</th>
                <td>Doming</td>
                <td>Tation Nunc</td>
                <td>$99</td>
                <td>Nunc Futurum</td>
            </tr>
            <tr>
                <th>Row 5</th>
                <td>Adipiscing Est Id</td>
                <td>Nonummy</td>
                <td>$41,799</td>
                <td>Putamus</td>
            </tr>
        </tbody>
    </table>

I reuse this code for almost any design. Using CSS3 selectors, just about any table element can be targeted for styling. Here is the CSS for the above table:

    table {
        font: normal 12px/1 Helvetica;
        border-collapse: collapse;
        padding: 0;
        border: 1px solid #6a7180;
        text-align: left;
        width: 500px;
    }
    
    tbody tr:nth-child(even) {
        background: #ddd;
    }
    
    th, td {
        line-height: 1.2;
        font-size: 11px;
        padding: 5px 6px;
        border: 1px solid #999;
        border-top: 0;
        border-bottom: 0;
    }
    
    th {
        font-weight: bold;
        background: rgba(163,169,183,.40);
        border-left: 1px solid #6a7180;
    
    }
    
    thead th, tfoot td {
        background: #a3a9b7;
        white-space: nowrap;
        padding: 12px 6px;
        text-transform: uppercase;
        font-weight: bold;
        border: 1px solid #6a7180;
    }
    
    th:nth-child(4), td:nth-child(4) {
        text-align: right;
    }

There are several things to note about this CSS. Alternating row colors (zebra striping) is a great way to make tables easier to read, but it’s normally accomplished by setting a class to every other row in the markup, or through Javascript. It’s much easier using CSS3’s :nth-child(even) pseudo-class selector, which automatically targets every even table row.

Since I want the zebra striping to show through the header column, I am using CSS3’s rgba(red,green,blue,alpha) color value. The ‘a’ in RGBa adds transparency as a decimal value between 0 (completely transparent) and 1 (opaque).

To give the ‘price column’ a right-alignment, I am again utilizing the :nth-child() pseudo-class. In this case, I am targeting the fourth column in each row with td:nth-child(4).

Now load this HTML into your browser (Safari, Chrome, or the latest previews of Firefox or Opera) and take a screenshot. Open the screenshot in Photoshop, crop, and drop it into the mockup. Here is a screenshot of the above sample (from Safari):

Updating the mockup in Photoshop is now done with a simple two-step process of deleting or hiding the current screenshot and dropping in a new one. Easy-peasy.

A note of caution: this HTML and CSS will need to be modified for a live website. Older browsers may not support nth-child selectors (older Firefoxes), RGBa color values (older Operas), or both (any Internet Explorer, including 8).