PDA

View Full Version : Resolved Setting table properties in js



Atom
03-03-2012, 01:47 PM
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.

jscheuer1
03-03-2012, 04:22 PM
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):


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


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):


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

Atom
03-03-2012, 04:46 PM
Thanks a bunch. My table looks so much better; just like I wanted.