Table Size:

[MCD4x4]

Hi All,

I'm fooling around with a page and my first table has three columns. Why are the two outside cells not the same with? Is this adjustable from somewhere other than dragging the ends? The picture width is only one pixel different but the column on the right is a lot wider then the one on the left. thanks.

http://www.mcd4x4.com/SubwaysOfNewYork/index.htm

[MandyJay]

Hi,
You should not drag table corners to alter them. (even though physically possible!!). To alter the size of the whole table or each individual cell, right click inside and select either "table properties" or "cell properties". You will have to right click inside each individual cell to set their properties.

make sure the width of all three cells adds up to the total width of the table.

Now you have your table set in percentage opposed to pixels. That is fine the table will expand for the larger resolutions. Your whole table is 100% and your left cell 33%, middle cell 33% and right cell 34% - But your graphics do not fit that percentage, i.e. the two smaller images are not 33% of the whole table width. The larger the resolution the wider thos image cells will all get. You need to set your left and right for a pixel setting. One graphic is 71 pixels so you can set that cell for 71pixels or bit more, the other graphic is 69 pixels, so set that one for 69pixels or a bit more. Now your center graphic is 803 pixels wide, but make sure it is centered (it is) and set that cell for 100% .... that way anyone viewing at a larger resolution than you, then only the center cell will expand to fit their view leaving the two smaller graphics each end, as is and without too much space around them.

Now having said that. I would just point out that those viewing at 800 resolution will have to scroll horizontally as their maximum width to view is around 765 pixels.

Anyway, just remember not to pull at the table handles but to actually right click inside tables/cells to set their properties. Also remember to add up the width of images and take that into account also. i.e. the total width of your images going across will also determine how wide your table is if they exceed the width you set.

Hope that helps
MJ

[MCD4x4]

Hi MJ.

For some reason now that center picture doesn't reach the the walls now. Also, I'm not able to change the table percentage in all three boxes. What ever I change one to, they all become the same. I'm happy with the look but I would like the header to touch the cell walls on both sides.

[MandyJay]

Also, I'm not able to change the table percentage in all three boxes. do you mean table or cell?

MJ

[MCD4x4]

The cell size stays at whatever I set it too. The table size seems to all have to be set the same.?

[MandyJay]

In any event, if you are wanting the center image to touch the borders either side, then everything needs to be in pixels. No percentage.

you have three images
left = 69px
center = 803px
right = 69px

So total width of images is 941pixels

So first set your table width to 941 pixels.
then set each of your cells according to width of their images.

MJ

[MCD4x4]

OK, when I do that, the whole top of teh page is to short width wise. Have a look at it now. Also, I just checked the page in FireFox and theres no yellow tiles at all. Maybe I shouldn't do these things so late? I never have this many problems.

[MandyJay]

Okay, you cant have it both ways .... :danceup:

either you have it stretch to fit all wider resolutions, in which case your center image wont touch the borders for everyone as that center cell will have to stretch, or you will have to have the two cells either side stretch instead, in which case the space around the images will grow; or you have the images as they are now, touching the sides but not filling everyones resolution. As it is people viewing at 800 have to scroll horiztonally as the images are far too large for them. You need to decide who you are desiging for and perhaps make compromises. If you center the table and maybe use a page background color or something, it will look just fine. but to fit all the larger resolutions .... something has to stretch, either the two outside cells or the center cell.

Firefox ..... for it to see the colored borders correctly you have to use CSS either as external style sheets (easiest) or as style in the head tags of each page.

MJ

[MCD4x4]

OK, so the best way in this case is to set the two outside cells to 85 so there is a little extra room. The center cell is set to 803. Now, the "Table" Properties is what's confusing me. Where it says "Specify width" you can chose to use pixels or percent, ya can't do both. Now, what I'm trying to explain is, by setting it to 100%, that makes all three columns 100%. I thought we only wanted to set the center one to 100? I have four screens as one desk top, when I unlock the screen, and drag the window width wise that center picture is not stretching, it's staying to the left. I have it set to 100% too.

The FireFox question is, I have a background picture set to tile. For some reason, I don't see it in FireFox.

[MandyJay]

Your background image doesnt show becuase you have not uploaded it. Check the source code it is still on your computer. IE can see it becuase it is reading from your computer ... you are the only one that can see it, I cant and noone else will be able to.
Now, the "Table" Properties is what's confusing me. Where it says "Specify width" you can chose to use pixels or percent, ya can't do both No, you cant, you have to choose whether you want to set your whole table in percent or pixels. Set that first, and regardless of what happens to the cells, once you have set the table width, then right click inside each cell - set the width to the cell, then click in the next cell and set that one etc.

But looking at your source code, you dont have the cells set at 100% like the table ....

<table border="1" width="100%" bgcolor="#000000">
<tr>
<td width="85">
<p align="center"><img border="0" src="images/m-logo-test.gif" width="69" height="79"></td>
<td width="803">
<p align="center"><img border="0" src="images/header.jpg" width="803" height="80" align="right"></td>
<td width="85">

so I am not too sure what you mean by setting the table to 100% sets all three columns .....

MJ

[MCD4x4]

the top table has three boxes (columns) in it. I would like to have the page look ok in the bigger resolutions. What do I need to change for this to happen?

[MandyJay]

Gosh I just made a long post and it asked me for my login even though I had to log in to reply .. ugh double ugh .. hahah ... okay will write again ....

The largest resolution is 1600. Viewable area of around 1560 ... which is approximately 620 pixels wider than your three images.

So if you were to design so all the larger resolutions - their screen were filled, your table would, in my opinion, not look good at all, as somewhere inside those three columns you have to add 620 pixels of space.

So, what I would do if it was my website, is set the table for 941 pixels (or maximum amount of images), and each cell the size to fit the image. I would center the table. That way at the worst, anyone viewing at 1600 would have around 300 pixels of space to the left and right of their screen, but your content would be centered.

Also, when you read a screen, the middle section of the screen is the easiest to read. If you ahve to read from the left edge of your browser right over to the right side of your browser, that is not comfortable and you risk missing lines as you read. If you have a colored complimentary background color to your page, or image, then it would look fine.

Alternatively, keep that header table as it is, the same size as all the images, center it, but then the rest of your page you have as 100% ... but I dont think that would look so good.

All that is just my opinion, others may disagree, as you may too.

MJ