Saturday, July 19, 2008

Div Layers and Large Tables

As I've been working in ajax and web development for the majority of my summer internship, I have recently been debating the pros and cons of using div layers as opposed to tables for web development. Div layers are convenient, easily organizable, and quick to code, but unfortunately, they have quirks when nesting with large dynamic tables.

Here's a typical example:

<div>
My first line<br />
My second line<br />

<table style="border:1px solid black;background-color:#99aabb;">
<tr><td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
</tr></table>
</div>

After the table
In this situation, the div layer's width is set by it's parent, and the table is set by it's parent/set width or it's minimum content width, whichever is larger. since the table's width is more then the div width, it breaks out of it's parent, creating an odd-looking effect.

By contrast, a table has quirks of it's own (especially the inablility to effectively use margins cross-browser), but in this instance, the parent table notices that it's child width is wider then it's parent/set width, and resizes appropriately to expand past the page and encompass it's child.
<table style="margin-top:20px;margin-bottom:20px;width:100%;">
<tr><td style="width:20px;background-color:#ffffff;"> </td>
<td style="background-color:#99bb99;">
My first line<br />
My second line<br />
<table style="border:1px solid black;background-color:#99aabb;"><tr>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
<td>LongExampleTextSuchAsPaths</td>
</tr></table>
After the table
</td>
<td style="width:20px;background-color:#ffffff;"> </td>
</tr></table>


in table less-designs, (especially fixed-width) I love div layers. (Facebook uses them - just look at the source) They easily are customizable and well organized. However, when large tables are needed to display content, a parent table, although uglier and harder to control, might be a better bet.
As an alternative school of thought, another option is to make a div contain the parent with overflow-x set to scroll. This will put a scroll bar at the bottom of the table, and either by using the scroll bar at the bottom of the table or javascript on the sides, will allow scrolling inside the div layer. To me, however, in the instances I've had to put a data table in a formatted page, it has seemed more intuitive to make the browser do the scrolling piece (especially in variable-width instances.)

Thirdly, one could scrap the layout entirely, and just go with the datatable by itself. Probably smarter, but not as friendly with ajax switching back and forth.

No comments :

Post a Comment