Why CSS styling is for tables too

by Michael Meadhra | Jul 07, 2004 7:00:00 AM

Tags: Michael Meadhra

Takeaway: Many Web builders feel that tables have no place on a modern, standards-based Web page. Nothing could be further from the truth--there is no better way to create columns and rows of data such as price lists, budget spreadsheets, and the like. But you shouldn't embed formatting attributes in the table markup. Instead, you can replace almost all the inline attributes of the table tags with CSS styling.

Due to the shift from tables-based layouts to structural markup with CSS styling, many Web builders feel that tables have no place on a modern, standards-based Web page. Actually, nothing could be further from the truth. The admonition against using tables is confined to their misuse as a general layout tool, not to the legitimate role of the table tags (<table>, <tr>, <td>, <th>) as the recommended way to mark up tabular matter. There is still no better way to create columns and rows of data such as price lists, budget spreadsheets, and the like.

Even when designers use HTML tables appropriately, the table tags traditionally include a lot of inline formatting attributes to specify column widths, cell borders, cell padding, background colors, and more. This is the opposite of the recommended practice of separating presentation styling from structural markup.

However, you don't have to stick with the traditional practice of embedding formatting attributes in the table markup. Instead, you can replace almost all the inline attributes of the table tags with CSS styling.

Table markup the old way

In their traditional implementation, the HTML table tags can serve as a worst-case example of stylistic formatting embedded in structural markup. The result is cluttered and repetitious markup that nearly obscures the content. The following example code produces the very simple table shown in Figure A.

<table width="400" border="3" cellpadding="5" cellspacing="2">
    <tr align="center" bgcolor="#FFFFCC">
        <td width="150">&nbsp;</td>
        <td><i>John</i></td>
        <td><i>Jane</i></td>
        <td><i>Total</i></td>
    </tr>
    <tr bgcolor="#CCCCCC">
        <td width="150" align="left"><b>January</b></td>
        <td align="right">123</td>
        <td align="right">234</td>
        <td align="right">357</td>
    </tr>
    <tr bgcolor="#CCCCCC">
        <td width="150" align="left"><b>February</b></td>
        <td align="right">135</td>
        <td align="right">246</td>
        <td align="right">381</td>
    </tr>
    <tr bgcolor="#CCCCCC">
        <td width="150" align="left"><b>March</b></td>
        <td align="right">257</td>
        <td align="right">368</td>
        <td align="right">625</td>
    </tr>
    <tr bgcolor="#CCCCCC">
        <td width="150" align="left"><b>Total</b></td>
        <td align="right">515</td>
        <td align="right">848</td>
        <td align="right">1363</td>
    </tr>

</table>

Table styling with CSS

The HTML table tags include a long list of formatting attributes, but that doesn't mean you have to use them. Instead, you can use the same CSS styling techniques on tables that you use elsewhere in your Web pages. Basically, you can style a table as if it were a div, and table cells as if they were nested divs or paragraphs.

The following example code produces the table shown in Figure B. This illustrates how you can move almost all the formatting information out of the page markup and into a CSS style sheet.

First, here are the CSS styles:

table#sample {
    background-color:#FFFFFF;
    border: solid #000 3px;
    width: 400px;

}

table#sample td {
    padding: 5px;
    border: solid #000 1px;

}

.data {
    color: #000000;
    text-align: right;
    background-color: #CCCCCC;

}

.toprow {
    font-style: italic;
    text-align: center;
    background-color: #FFFFCC;

}

.leftcol {
    font-weight: bold;
    text-align: left;
    width: 150px;
    background-color: #CCCCCC;

}

Next, here's the markup for the table. (Removing the formatting attributes from the markup cleans up this simple table noticeably. The difference is even more striking on a table with heavier formatting.)

<table id="sample" cellspacing="2">
    <tr class="toprow">
        <td>&nbsp;</td>
        <td>John</td>
        <td>Jane</td>
        <td>Total</td>
    </tr>
    <tr>
        <td class="leftcol">January</td>
        <td class="data">123</td>
        <td class="data">234</td>
        <td class="data">357</td>
    </tr>
    <tr>
        <td class="leftcol">February</td>
        <td class="data">135</td>
        <td class="data">246</td>
        <td class="data">381</td>
    </tr>
    <tr>
        <td class="leftcol">March</td>
        <td class="data">257</td>
        <td class="data">368</td>
        <td class="data">625</td>
    </tr>
    <tr>
        <td class="leftcol">Total</td>
        <td class="data">515</td>
        <td class="data">848</td>
        <td class="data">1363</td>
    </tr>

</table>

Note that the CSS starts with rules that redefine the <table> and <td> tags in a table with the id="sample". This is a simple way to set common attributes that apply throughout the table.

The table#sample style defines the width of the table, its border, and the background color that shows through the gaps between the cells. The table#sampletd style sets the padding (which takes the place of the cellpadding attribute) and the border for each cell, but it applies only to cells within the sample table.

The three class selectors (.data, .toprow, .leftcol) control the attributes of the table rows/cells with the corresponding class IDs in the table. All the alignment, font-style, font-weight, and background color attributes for these cells are now contained in these CSS rules, not in the page markup.

The only formatting attribute remaining in the page markup is the cellspacing attribute of the <table> tag. As far as I know, there is no way to control that particular table attribute with CSS. Logically, cellspacing seems to correspond to the margins in the CSS box model, but changing the margin attribute of the table cells has no effect on cellspacing within a table.

The most important advantage of using CSS styling on a table is the ability to separate structural markup from presentation formatting. But once you make the switch to CSS styling for your tables, you'll discover that CSS gives you more formatting flexibility as well. For example, CSS enables you to independently control the style, color, and thickness of the border on each side of a table cell; whereas, the inline table formatting options provide only overall color and thickness settings.