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.

Friday, July 11, 2008

Visual studio 2008 available to students for free

Microsoft is giving away quite a bit of software for free to students - including visual studio 2008 (the real thing)

you just need to get a microsoft passport and give them the school you go to, and you can download visual studio 2008 professional in it's entirety, as well as:

* Visual Studio 2005 Professional Edition
* Expression Studio (includes Web, Blend, Media and Design)
* SQL Server 2005 Developer Edition
* Windows Server 2003 R2 Standard Edition, with SP2


https://downloads.channel8.msdn.com/