title: HTML Table with images
body: <p>so i am currently re making the site for my university's drama department and i want to add 3 images side by side (with spacing between them). They also need to have captions. But the caption needs to have a header (that is styled differently than the caption itself) followed by the caption itself. having looked around here and other places i figured i would be able to do this using a table since formatting size would be easiest this way. I have been at this portion of the site for almost 1 month and have tried numerous other methods (divs, tables, etc.) I was wondering if someone else has done something like this and would be able to impart some advice. The site currently is located here: <a href="http://www.queensu.ca/drama/template1.html" rel="nofollow">drama site</a>. Any help would be appreciated (i hope this follows the guidelines, first time asker)</p>
  
  <p>Edit: The following is the portion of the code i need help with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function windowSize() {
    var w = var w = document.getElementById('body').clientWidth;
    document.getElementById('newsTable').style.width = w + 'px';
    document.getElementById('newsItems').style.height = document.getElementById('newsItems').clientWidth + 'px';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body id="body" onload="windowSize();getCurrentPage();" onresize="windowSize()"&gt;
    &lt;table id="newsTable" cellpadding="0" border="0"&gt;
      &lt;tr&gt;
        &lt;td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif"&gt;1&lt;/td&gt;
        &lt;td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif"&gt;2&lt;/td&gt;
        &lt;td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif"&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td id="newsItems" align="center"&gt;4&lt;/td&gt;
        &lt;td id="newsItems" align="center"&gt;5&lt;/td&gt;
        &lt;td id="newsItems" align="center"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't want the pictures to be as big as they are in the link, i would like them to be a bit smaller. I would also like some room between them. Currently when the page gets bigger the image starts to repeat. If i took the repeat off then it would have blank space where it would normally repeat</p>