http://www.w3schools.com/tags/att_img_width.aspYe olde percent sign works. The containing element is the table cell, so use "100%" width or close to it, if the picture is wider than it is tall.
Example (simple table: one row, two columns. First column has image at 100% column width, second column has same image at 50% column width, aligned center):
- Code: Select all
<table border=1 cellpadding=0 width="100%">
<tr>
<td align=center bgcolor=#d5e4de>
<a href=http://www.summitpost.org/denali-s-summit-ridge/423788>
<img src=http://images.summitpost.org/small/423788.jpg width="100%">
</a>
</td>
<td align=center bgcolor=#d5e4de>
<a href=http://www.summitpost.org/denali-s-summit-ridge/423788>
<img src=http://images.summitpost.org/small/423788.jpg width="50%">
</a>
</td>
</tr>
</table>
Notice that you should set width OR height, not both. Note that browsers may not know the table row height at the time they're trying to draw the image, so it's better to set the image's width (the window width is known, and that determines the column width). For each image, set a value that makes sense depending on the image's orientation (landscape vs portrait. )
Also be aware that if you expand a small image, it gets pixellated. You can see that in the left image in this example, if you're using a decent-sized monitor. Might not be a problem with more images per row, but if it is, use the "medium" images from summitpost instead of "small".
(If you want you can detect the window size in javascript and reload images with larger versions if necessary, but that's a little beyond basic html.)
My usual approach to screen size problems is to ignore them - if you're looking at images on a three-inch device, you need more help than my HTML can give you, and if you're using a four-foot-wide screen, you don't really need my help. Website developers who *have* to support multiple form factors usually serve up at least two different versions of every page (the UI has to change anyway if the site is going to do anything useful with a phone's touch screen).
However, sometimes I do have a page with lots of small photos that I want to lay out elegantly on both toy-sized laptops and industrial-size monitors. In those cases I usually forget about tables, and put each photo (of fixed size) in its own DIV. That allows browsers to lay down as many DIVs across as will fit, then start a new row of DIVs. You don't control how many rows you end up with, and you may have an unfinished row at the end, but you do fill the available screen space pretty efficiently.
Example:
http://www.davidalbeck.com/photos/2011/heart_ov_zteel/View the source - it's simpler than tables.