The Cell Spacing Attribute and Dynamically Created Tables

I’m using a block of code which was presented on [url=”http://www.javascript.com”]JavaScript.com[/url] which can produce dynamic tables which act as a sort of a miniature in-frame window that can be dragged about the screen and closed. (The original script and article can be found [url=”http://www.webreference.com/programming/javascript/gr/column6/index.html”]here[/url].) By no means am I a JS developer, more of a hack… I apologize for that as I know it’s gotta be vaguely annoying, but I’m only doing this to develop some help documentation. I’m fairly familiar with CSS and HTML however, as well as coding enough in C++ and various BASIC variants to get a cursory knowledge of some of the apsects of JavaScript. The one thing I can’t decipher, however, is how to specify cell spacing for the dynamic table created by this script so that I can eliminate all spacing and make my cells directly adjacent to each other. I’ve tried a few different code blocks but nothing seems to have the desired effect. The constructor for the windows looks like this:

[code]
function JSWindow(title, oContent, x, y, w, h)
{
// save arguments
this.title = title;
this.oContent = oContent;

// initialization
this.mx = 0;
this.my = 0;

// create table for window with title-bar and content
this.oTable = document.createElement(“table”);
this.oTable.border = 0;
this.oTable.width = w;
this.oTable.height = h;

// set the position of the window
this.oTable.style.position = “absolute”;
this.oTable.style.left = x + “px”;
this.oTable.style.top = y + “px”;

// link from the table to the JSWindow object
this.oTable.jsWindow = this;

// if anywhere in the table are is clicked, bring the window to front.
this.oTable.onmousedown = JSWindow.prototype.onBringToFront;

// append to document body
document.body.appendChild(this.oTable);

// add row for title bar
var oTR = this.oTable.insertRow(0);
oTR.height = 12;

// title
var oTD = oTR.insertCell(0);
oTD.innerHTML = title;
oTD.jsWindow = this;
oTD.width = “100%”;
oTD.className = “JSWindowTitleStyle”;
oTD.onmousedown = JSWindow.prototype.tdOnMouseDown;

// close
oTD = oTR.insertCell(1);
oTD.innerHTML = “X”;
oTD.jsWindow = this;
oTD.width = 8;
oTD.className = “JSWindowButtonStyle”;
oTD.onmousedown = JSWindow.prototype.onClose;

// add row for window content
// a single cell the same width as the title bar row
oTR = this.oTable.insertRow(1);
oTD = oTR.insertCell(0);
oTD.colSpan = 2;
oTD.className = “JSWindowContentStyle”;
oTD.appendChild(oContent);
}[/code]

I tried to keep that as brief as possible, but I think the only relevant portion is the top few blocks. If you’ve looked at the original script, I can tell you the only changes I’ve made to it are that I’ve hacked out the minimize feature and I’ve also added height and width specification to the function call (it worked better for sizing the tables than specifying it using styles in the DIV).

If someone needs a sample html file to see what the code looks like in action, it’s been posted on my university web account [URL=”http://www.louisiana.edu/~lst4606/windows.htm”]here[/URL].

Thanks so much for any assistance, and please do me the kindness of possibly trying out your suggestion before giving it to me… I’ve gone through so many already, and it’d be nice to know that someone’s got a rock solid code snippet for me to toss into the mix.

Also in #JavaScript _↴