Table sizes

[Funkymonkey]

When I put an image in a table the size changes! How can I stop this? where do I put the sizes? In the tr tags or the td tags or the img tags????

[KDLA]

The size may be included in both the <img> and <td> tags.
eg.

<table>
<tr>
<td width="50px"><img src="" width="50px" height="50px;"></td>
<td width="50px">&nbsp;</td>
</tr>
</table>

However, tables should just be used to display tabular data, rather than as a framework for design.

If you're wanting to work with text and an image, use either the "align" property in the <img> tag, or the CSS style property "float."

eg.(1) - right-aligned image

<p><img src="" width="50px" height="50px" align="right">This is the text of my document.....</p>

eg.(2) - right-aligned image with CSS
<div style="float: right; width: 50px;">
<img src="" width="50px" height="50px;">
</div>
<p>This is the text of my document.....</p>


With CSS you can also add padding. <div style="float: right; width: 50px; padding: 4px;">

Good Luck -

[Funkymonkey]

Thanks, I think the problem is that I prefer to use % rather than px as I have a widescreen laptop and want my website to work as well on this as it does on others.

I have a table in a table, is it possible to use px for the inside table and % for the outside table so that the inner tables get stretched to fit the page anyway?????

[KDLA]

Sorry, but I don't think that will work. Pixels do not expand to the same degree as percentages.

You might explore some javascript coding which detects the screen size, then chooses an image - from a selection of various sizes you've created - based on that resolution. I do not have such coding, but have seen it on the web.

One point: make sure to check how your tables look in Netscape/Firefox. Sometimes these browsers translate layouts based on tables differently than IE.

Good Luck -

[Funkymonkey]

Tht's a good point, I'm using firefox but havn't checked my site in the other 2 browsers yet. Can I ask how you would approach it? Shall I use px's instead?

Also, if I am working out sizes in % for a cell, would that be % of the table or % of the whole page?

[KDLA]

Think of percentages as based on the width offered by the whitespace within elements.
<table width="50%">
<tr>
<td>
<table width="35%"><tr><td></td></tr></table>
</td>
</tr>
</table>

The initial table would occupy 50% of an 800px screen, making it 400px. The inset table would occupy 35% of the initial table (400px), making it 140px (if I did the math correctly). This does not take into consideration any pixel-based cell padding or spacing. If cell padding is set at 2px, you would have an area of 132px (2px subtracted from each side of the cell).

With regards to working with images, I find that working with pixels is much more exact. Percentages are easier to work with, with regards to working with space around an element. Generally, I avoid table layouts for Accessibility reasons: tables within tables give screen readers fits, alienating a percentage of your users.

As to testing in browsers, the easiest thing to do is to install those browsers - in your case IE and Netscape - on your PC, and visit your test page. Netscape is very similar to Firefox, but both are different from IE in the way that they interpret html coding.

Good Luck -

[Funkymonkey]

I didn't know there were accessibility problems with tables? I'm using tables instead of frames 'cos I thought there were problems with frames!

[KDLA]

There are problems with both. In order for a page to be Accessible, it must be presented as close to a "straight" document as possible.

Try testing your site at
http://bobby.watchfire.com/bobby/html/en/index.jsp

It's a real eye-opener with regard to Accessibility.

Good Luck -

[Funkymonkey]

Thanks for all your help! You've really helped me a lot!