MDBitz Development Resources

Every day it seems more and more web developers seem to think that tables should not be used. Instead all we see now a days is style=”float: left” or style=”float:right”, even when all the developer is trying to do is create columns. Why do we need to complicate things. If you are creating multiple columns then use a table that is what it’s purpose is, and to top it off you don’t have to worry about how to clear your floats appropriately. For those that need a refresher course below is the basic structure for a 2 column table with its content vertical aligned at the top and not center of the column…

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
        <!-- content for left column -->
    </td>
    <td valign="top">
        <!-- content for right column -->
    </td>
  </tr>
</table>

Now the next time you find yourself using floats, take a deep breadth and ask yourself should I be using a table for this?

In Dynamic websites we often find that we need to modify page content on the fly based on user actions. A common example of this is allowing the user to add additional input boxes for configurations or attachments. I personally like to contain such input as a new row in a table. To accomplish this I utilize the jQuery library for JavaScript.

For illustration lets assume we have the following table in our page:

<table id="exampleTable1">
<tr>
    <th>City</th><th>State</th>
</tr>
<tr>
    <td>Rochester</td><td>New York</td>
</tr>
<tr>
    <td>Boston</td><td>Massachusetts</td>
</tr>
</table>

In this example the approach to adding more columns is very straightforward as we can utilize jQuery’s child and last selectors with the after modifier to add a new table row.

var newRow = '<tr><td>Albany</td><td>New York</td></tr>';
$('#exampleTable1 tr:last').after(newRow);

These 2 lines of JavaScript create the new row as a string then utilizes jQuery to get the last row of the table and append the new row after it, adding this row to the end of our table.

If a table contains a tfoot element with rows then the above will insert a row in the footer, A modification that can be done is to obtain the tbody element of the table and append the new row.

$('#exampleTable1 tbody').append(newRow);

That is all there is to it simply define your new row as a string then utilize jQuery to identify where you would like that row added to the DOM.