Results 1 to 3 of 3

Thread: Setting table properties in js

  1. #1
    Join Date
    May 2011
    Posts
    48
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default Setting table properties in js

    I have manage to cobble together this table http://www.siftradingsystems.com/DailySysSum.html which is fairly close to what I want. It correctly loads the cell data from an xml file. However, there are some simple things I would like to be able to do but can't figure out. I would like the table body to be centered on the page. I can center it within it's container element, but then it's not centered on the page. I just need to add margin on the left or change the width of the cells, but I am unable to figure this out. I would also like the cells to appear with a single instead of double line between them.

    Thanks for any help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't think you need javascript for that. For the space between td's, to get rid of that you can set the style for the table with (preferred):

    Code:
    <style type="text/css">
    table {
    	border-spacing: 0;
    }
    </style>
    Add that to the head of the page, or include it's rule in an existing stylesheet for the page.

    Or you can add the inline attribute cellspacing='0' (deprecated) to the table tag inside the script:

    Code:
    document.write("<table border= '10px' cellspacing='0' borderColor= '#435063' left='200px'>");
    You are correct about margin as being a way to center the table on the page. Since the width of the table is dictated by the width of the first row, it will be fairly constant across browsers, give or take a few pixels at about (after removing the gaps between cells and accounting for that 10px border around the table) 422px. As a result, and taking into account the parent's left margin, giving it a margin-left of 90px or so looks about right. You can experiment till you get it as you want it to be (adding to our rule for the table):

    Code:
    <style type="text/css">
    table {
    	border-spacing: 0;
    	margin-left: 90px;
    }
    </style>
    I liked 88px. But 58px is closer to mathmatical centering*

    If some tables are going to be wider - like the longest system name in your demo is:

    ES Gumbo Port
    Which is shorter than the content in the corresponding first row cell:

    ------SYSTEM NAME------
    If you're going to maybe have system names longer than that (------SYSTEM NAME------), then we would have to do something in javascript to make sure the table is centered.


    *perception of center on a page isn't always the mathematical center. Other elements on the page often subtly skew the way the eye visually perceives center. Different folks will see it as slightly different, so just take your best stab at it.
    Last edited by jscheuer1; 03-03-2012 at 04:34 PM. Reason: add - But 58px is . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Atom (03-03-2012)

  4. #3
    Join Date
    May 2011
    Posts
    48
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default

    Thanks a bunch. My table looks so much better; just like I wanted.

Bookmarks

Posting Permissions

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