Part of the reason that your pictures don't fit on the screen without a horizontal scroll bar on lower-resolution monitors probably has to do with their width.
Based on the code in your original post, each of them are 500px wide.
Any monitor with a resolution that has a width lower than 1032px will show a horizontal scrollbar when viewing two images of that size side-by-side. (That's not counting any horizontal paddings or margins you have applied within the page, which would also need to be accounted for) A large portion of the Internet browsing population does have a resolution with a width that's lower than that. For example, 1024x768 and 800x600.
No matter what HTML/CSS techniques you implement, this issue will persist.
My suggestion is to resize each of images to have a width no larger than 384px. (again, not counting and horizontal padding or margins) Alternatively, you could stack the images one above the other and leave them at the current size.
No matter what you do, I should mention that there is absolutely no reason to be using a table to position these images to your liking. Tables are for tabular data and not for the positioning or layout of elements such as images.