0

I have done plenty of searching both on stackoverflow and other sites and haven't found a single solution that has worked for me yet. I have attached a screenshot of the webpage to see the problem more clearly. If anyone has any tips or tricks that have not already been tried in my code then please let me know! I have tried all the ideas from former VERY similar posts but for some reason none of them are working for me. Thanks in advance.

enter image description here

HTML:

<table>
  <tr>
    <td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
    <td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
    <td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
  </tr>
<tr>
    <td>text box describing level for java</td>
    <td>text box describing level for python</td>
    <td>text box describing level for html/css</td>
</tr>
</table> 

CSS:

table {
    border-collapse: collapse;
    border-spacing: 0px;
}
td {
    border: none;
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
    font-size: 0;

img {
    vertical-align: top;
    border: none;
    margin: 0;
    padding: 0;
    font-size:0;
    display: block;
}
9
  • If you can provide a working link or jsfiddle then i can help you better Apr 24, 2015 at 22:50
  • And what problem are you trying to solve? In what way are the answers to existing, similar questions failing in your case? Apr 24, 2015 at 22:54
  • Are your images really 568.5 pixels wide by 296.5? Half pixels just seem like funny measurements.
    – wunth
    Apr 24, 2015 at 22:56
  • @ManishShukla I will work on that. Apr 24, 2015 at 23:03
  • @DavidThomas I tried all the tricks mentioned (such as display: block, font-size: 0, etc.) and none are decreasing the white space between cells (the problem I'm having is in the title). Apr 24, 2015 at 23:03

2 Answers 2

0

You have defined the with of your .png images to be 568.5 pixels, which means the table width will be about 1704 px wide, which is probably wider than the width of your page template.

You want the images to scale to fit the width of the table cells.

you can do this setting a width to the td (33%) and then letting the images scale to a width of 100%.

Note: I built a flexible/responsive layout, which I think might be what you need.

table {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
  border: 1px solid blue;
}
td {
  border: none;
  padding: 0;
  width: 33%;
}
img {
  display: block;
  width: 100%;
}
tr.labels td {
  background-color: beige; /* for demo only */
  text-align: center;
  padding: 20px 0;
}
tr.images td {
  padding: 5px; /* for demo if so needed */
}
<table>
  <tr class="images">
    <td>
      <img border="0" alt="java" src="http://placehold.it/568x296">
    </td>
    <td>
      <img border="0" alt="python" src="http://placehold.it/568x296">
    </td>
    <td>
      <img border="0" alt="htmlcss" src="http://placehold.it/568x296">
    </td>
  </tr>
  <tr class="labels">
    <td>text box describing level for java</td>
    <td>text box describing level for python</td>
    <td>text box describing level for html/css</td>
  </tr>
</table>

0
0

The padding is already set to 0 in your CSS and table cells are unaffected by margins, so this is not the issue. Table cells expand to the size of their content. Your images are each 568.5px x 296.5px. To get rid of this extra space, decrease the size of your images in the markup, or crop them in your image editor of choice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.