Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.
    Code:
    <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.
    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New to the CF scene
    Join Date
    Aug 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    tableElement.setAttribute("cellpadding", "0");
    tableElement.setAttribute("cellspacing, "0");
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #5
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    got this working

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •