title: HTML table wont removing padding
body: <p>I am creating a calendar using a HTML table. I have a problem where each <strong>td</strong> element has a padding in it which I want to remove.</p>
  
  <p><strong>Can you help me so that the link(&amp; the img &amp; text) inside the td element extend the whole width of the td element so you cannot see any of the background.</strong> What I want is to remove the space around my images(within) the td elements. The reason why I dont use css &amp; background-image instead of img is because I want the img to be scalable for the users screen.</p>
  
  <p>I have tried many things, resetting the css data, setting each td, th, tr element to have no padding &amp; etc. and I have had no luck. PS: do you know why my text is not being displayed over my img?</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --&gt;
  &lt;head&gt;
      &lt;style type="text/css" media="all"&gt;
          &lt;!--
  
          html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: center;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 
          table, tr, td, th, tbody, thead {vertical-align:baseline}
  
          a:link, a:hover, a:visited, a:active { width: 100%; height: 100%; }
          a:hover                              { background-color: yellow; width: 100%; height: 100%; }
  
          #col1 { width: 10%; float: left; background-color: blue; }
          #col2 { width: 90%; float: left; text-align: center; }
  
          #calendar { margin: 2%; width: 100%; }
          #calendar th { }
          #calendar td { background-color: red; } // adding this "padding: 0; margin: 0;" here doesn't work 
  
          .date { position: relative; } // adding this "padding: 0; margin: 0;" here doesn't work 
          .tile { position: absolute; top: 0px; left: 0px; z-index: 1; }
          .content { z-index: 5; }
          --&gt;
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="col1"&gt;
          &lt;p&gt; sjkdjkjksd &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="col2"&gt;
          &lt;table id="calendar"&gt;
              &lt;tr&gt; &lt;td COLSPAN=7&gt; &lt;img src="Images/1.jpg" alt="January" width="500px" height="300px"/&gt; &lt;/td&gt; &lt;/tr&gt;
              &lt;tr&gt; &lt;th&gt;Sunday&lt;/th&gt; &lt;th&gt;Monday&lt;/th&gt; &lt;th&gt;Tuesday&lt;/th&gt; &lt;th&gt;Wednesday&lt;/th&gt; &lt;th&gt;Thursday&lt;/th&gt; &lt;th&gt;Friday&lt;/th&gt; &lt;th&gt;Saturday&lt;/th&gt; &lt;/tr&gt;
              &lt;tr&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
                  &lt;td&gt;&lt;a class="date" href=""&gt;1&lt;img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/&gt;&lt;/a&gt;&lt;/td&gt; 
              &lt;/tr&gt;
  
              &lt;tr&gt; &lt;td&gt;&lt;a class="date" href=""&gt;9&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;10&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;11&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;12&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;13&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;14&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;15&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt;
              &lt;tr&gt; &lt;td&gt;&lt;a class="date" href=""&gt;16&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;17&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;18&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;19&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;20&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;21&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;22&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt;
              &lt;tr&gt; &lt;td&gt;&lt;a class="date" href=""&gt;23&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;24&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;25&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;26&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;27&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;28&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;29&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt;
              &lt;tr&gt; &lt;td&gt;&lt;a class="date" href=""&gt;30&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;31&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a class="date" href=""&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; 
          &lt;/table&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>