tableElement.setAttribute("cellspacing", "0px"); What's wrong here?

Vortex Cortex

08-08-2003, 01:09 PM

I'm creating a menu using a table. The cells contain images. My problem is: when I generate the table using the DOM, setting the table attributes (cellspacing and cellpadding) does not produce the desired results.
<html>
<head><title>Testing</title></head>
<body>
<!-- Desired output from below javascript --/>
<div>
<table cellpadding="0px" cellspacing="0px" id="table1">
<tbody>
<tr>
<td><img src="images/home0.gif"></td>
</tr>
<tr>
<td><img src="images/about0.gif"/></td>
</tr>
</tbody>
</table>
</div>
<br/>
<div id="table2">
<!-- A div to hold the dynamic table --/>
</div>
<script language="javascript" type="text/javascript">
var image = document.createElement( "img" );
image.setAttribute( "src", "images/home0.gif" );
var cell = document.createElement( "td" );
cell.appendChild( image );
var row = document.createElement( "tr" );
row.appendChild( cell );
var tableBody = document.createElement( "tbody" );
tableBody.appendChild( row );
image = document.createElement( "img" );
image.setAttribute( "src", "images/about0.gif" );
cell = document.createElement( "td" );
cell.appendChild( image );
row = document.createElement( "tr" );
row.appendChild( cell );
tableBody.appendChild( row );
var table = document.createElement( "table" );
table.setAttribute( "cellpadding", "0px" );
table.setAttribute( "cellspacing", "0px" );
table.appendChild( tableBody );
document.getElementById( "table2" ).appendChild( table );
</script>
</body>
</html>

The first table looks fine. There is no space between the cells. However, the second table's cells have space between them (even if they were placed on the same row). I can produce the desired results if I "hard-code" an empty table element within the div, and set the table's attributes within the hard-coded element.

<div>
<table id="table2" cellpadding="0px" cellspacing="0px"></table>
</div>
...
<script ... >
...
document.getElementById( "table2" ).appendChild( tableBody );
</script>

But this defeats the purpose: It's important that I be able to create the entire table, and append it to any other element.
My guess is that I'm not setting the table attributes correctly.

Any suggestions would be greatly appreciated.

Vladdy

08-08-2003, 01:30 PM

Your two REAL problems are:
1. Relying on javascript to generate such an important part of a web page as navigation.
2. Using tables where they do not belong.

The solutions to your real problems are:
1. If you have too many pages to update when changing the menu structure, use server-side technology.
2. Navigation is not a tabular data (neither is your page as a whole, BTW), but a list of links. Learn to code your web page with a semantically meaningful markup.

Vortex Cortex

08-09-2003, 07:18 AM

Vladdy... so, what you're saying is: It's not semantically correct to place site navigation in a table. This is not my "REAL" problem. I'm not using a table to store a list of links for site navigation.

However, it would be nice do be able to dynamically generate a table and set it's attributes as well.

I do have some tabular data in the form of images that would look better if stored with no additional space between the rows and columns. Since the data is dynamic, I thought that it would be nice if the table was too. I'm sorry if the names of my images confused you. The above HTML is not actually a part of the site. The file names were only an example. Site navigation was not my primary goal.

I'll restate "REAL" question for clarity: How should I dynamically generate a table with the attributes "cellpadding" and "cellspacing" both set to "0px".

fredmv

08-09-2003, 07:48 AM

Try this:

tableElement.setAttribute("cellpadding", "0");
tableElement.setAttribute("cellspacing, "0");

magicalpig

03-14-2006, 09:47 PM

VC,

I was looking for an answer to the same problem and finally found it by messing around.

You need to call the attributes cellSpacing and cellPadding with capital letters on the second word. This works in IE6 and firefox, thankfully.

Then, you can set the value to 0, to "0" to "0px" -- whatever -- theyre all acceptable