Monthly Archives: July 2014

Never Use HTML Tables, Ever!

I know what you’re probably thinking, come on man…there are legitimate reasons for using tables on occasion, to display tabular data, etc.  Well, yes and no.  Agreed, there is the need for table like formatting and functionality however, tables bring with them some very bizarre remnants with regard to CSS, JavaScript interaction (especially with adding and removing rows, try a google search, you’ll see what I’m talking about) as well as a few other unmentionables used by a few ambitious developers out there.  So what do we do, never use them again…ever!  “What?  Wha…what is this nonsense you speak of?” one might say and here’s my answer.

We don’t need to use tables, we can get table like functionality cleanly with none of the hassles of using true HTML tables especially with regard to JavaScript and CSS, and here’s how.

Replace all HTML tables with CSS styled equivalents.  Let’s take a look at a properly formatted HTML table, then we’ll look at how to replace it.  Consider the following:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td> 
        </tr>
    </tbody>
</table>

 

As we can see above this is a basic table using the HTML table tags along with thead and tbody.

Now, let’s take a look at the replacement:

First the markup:

<div class="table">
    <div class="thead">
        <div class="table-row">
            <div class="table-heading">
                <div class="table-cell">Heading 1</div>
                <div class="table-cell">Heading 2</div>
                <div class="table-cell">Heading 3</div>
            </div>
        </div>
    </div>
    <div class="tbody">
        <div class="table-row">
            <div class="table-cell">Row 1 Cell 1</div>
            <div class="table-cell">Row 1 Cell 2</div>
            <div class="table-cell">Row 1 Cell 3</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Row 2 Cell 1</div>
            <div class="table-cell">Row 2 Cell 2</div>
            <div class="table-cell">Row 2 Cell 3</div>
        </div>
    </div>

Next, the style:

div.table {
    display: table;
}
 
div.table > div.thead {
    display: table-header-group;
}
 
div.table > div.tbody {
    display: table-row-group;
}
 
div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
    display: table-row;
}
 
div.table > div.thead > div.table-row > div.table-heading {
    display: table-cell;
    font-weight: bold;
}
 
div.table > div.tbody > div.table-row > div.table-cell {
    display: table-cell;
}

Now we have all the functionality of a table with none of the CSS styling issues and interacting with JavaScript is straight forward and simple.  The only real issue I see with this approach is the “div soup” that is seen in place of individual tags.  Additional styling attributes such as border, cell padding and cell spacing can be controlled using standard CSS properties such as border, padding, etc.

I’ve been implementing and using this approach for quite some time now with no issues and plenty of benefits.  Feel free to let me know your feelings about this approach.  Thanks.