I am making a table in a website that's as big as the display area of the browser for instance:



How do I know the width of the browser display area? Better yet, is there a general formula for
that for other screen resolutions?

I know a little bit of javascript, are there functions for that?

Simple solution to the table width. Use percentages.

CODE

<Table border=0 cellpadding=0 cellspacing=0 width=100% align=center>
....
.....
</table>

This way it fits whatever width the browser is displaying. It does screw up the pages some if you have designed a page for 1024x768 and somebody is viewing say at 800x600.

Can't help you with the javascript question.

It's hard to use that especially if I have the other tables within the larger table require that they be measured in pixels.

For instance, I want the large table to contain a separator (like cellpadding) of width 10px, how I am supposed to compute for the measurements of the other tables so that they add up to the larger table holding them?

here's a "graphic" explanation of my problem:

Do you actually need a spacer? As you said, you can use cell padding, or use CSS to change the margins and padding of the cells to get it to work if all you want is space. If it needs a different background or something, then you will need a separate cell.

I think there are 3 ways of using Javascript to get the width and height of the browser window, but I strongly advise you not to use them. They can cause all sorts of bugs, especially if JS is turned off and then people won't see your site at all.



They all return the width or height of the browser window in pixels, but there are problems. With the first one, IE returns nothing so people still using Internet Explorer either won't see the site, or will see a garbled mess. Method 2 will get a result from IE, but it's 0 for v5 or 6 in quirks mode. Method 3 gets a result from everything bar Netscape, but some browsers offer the internal size not including scroll bars, some offer internal size including scroll bars and some give the size of the whole window. This is why I advise using either a fixed width table centralised in the page or setting the table to a width of 100%.

Javascript is not the answer for a table width problem like this. It has too many restrictions based on the browser being used. What you are going to want to do is use width="100%" and if you are going to set the pixel width of any tr's or td's inside the 100% width table, be warned that if the screen is too small for the set widths specified, a scrollbar will be inserted.

Ya,
Use "percentage" instead of "pixels" while mentioning the table/cell dimentions.
For example, let's talk about the width.
100% width means the width of display. So if you are putting some image file in a particular table cell give it's size in pixels and the remaining space is now 100%. Divide it with the other cells/tables.

10px on 1024x768 (I think that's what most people use, isn't it?) is just about 1%, so couldn't you have the width of the table as 100% and the spacers 1%?