title: How do I fit my table with images in any screen css? do i need to add a div?
body: <pre><code>    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    img {
        width: 100%;
        display: block;
        resize: both;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;html&gt;
      &lt;head&gt;
  &lt;title&gt;Untitled-1&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;/head&gt;
  &lt;body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"&gt;
  &lt;!-- Save for Web Slices (Untitled-1) --&gt;
  &lt;table id="Table_01" width="600" height="901" border="0" cellpadding="0" cellspacing="0"&gt;
   &lt;tr&gt;
    &lt;td colspan="4"&gt;
     &lt;img src="images/test_01.jpg" width="600" height="226" alt=""&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td colspan="2"&gt;
     &lt;img src="images/test_02.jpg" width="309" height="228" alt=""&gt;&lt;/td&gt;
    &lt;td colspan="2" rowspan="2"&gt;
     &lt;img src="images/test_03.jpg" width="291" height="290" alt=""&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td colspan="2"&gt;
     &lt;img src="images/test_04.jpg" width="309" height="62" alt=""&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td rowspan="2"&gt;
     &lt;img src="images/test_05.jpg" width="216" height="384" alt=""&gt;&lt;/td&gt;
    &lt;td colspan="2"&gt;
     &lt;img src="images/test_06.jpg" width="186" height="34" alt=""&gt;&lt;/td&gt;
    &lt;td rowspan="2"&gt;
     &lt;img src="images/test_07.jpg" width="198" height="384" alt=""&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td colspan="2"&gt;
     &lt;img src="images/test_08.jpg" width="186" height="350" alt=""&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;
     &lt;img src="images/spacer.gif" width="216" height="1" alt=""&gt;&lt;/td&gt;
    &lt;td&gt;
     &lt;img src="images/spacer.gif" width="93" height="1" alt=""&gt;&lt;/td&gt;
    &lt;td&gt;
     &lt;img src="images/spacer.gif" width="93" height="1" alt=""&gt;&lt;/td&gt;
    &lt;td&gt;
     &lt;img src="images/spacer.gif" width="198" height="1" alt=""&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- End Save for Web Slices --&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  </code></pre>
  
  <p>I can't actually make the tables images fit my screen.
  I tried to add a div but doesn't work
  Trying to centre my table with fit width and height proportion
  the width and height of my image is so big that is why im having a hard time doing a resize for the table itself to fit my screen. :( do i need to redo my design jpeg? I just literally put here one of the columns but it has many columns on it.
  Everything gets screwed with my code.
  I'm a beginner here. need your help.</p>