HTML中图片后多余空白及表格内图片显示异常问题（仅使用HTML解决）

Let's tackle your two problems head-on, using only HTML as you requested:

Problem Breakdown #

• Small image but excessive space usage: Your outer and inner tables had default spacing (cellpadding/cellspacing) creating extra empty space, plus a syntax error in your <input type="image"> tags that messed up button image rendering.
• Extra blank space after images: Images are inline elements by default, so they align with text baselines, leaving a small gap at the bottom.

Corrected Code #

<html>
<body>
  <table border="1" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="top">
        <form action="">
          <table cellpadding="3" cellspacing="0" width="400">
            <tr>
              <td colspan="2" align="center">
                <font size="20" color="blue">Calculator</font><br />
              </td>
            </tr>
            <tr>
              <td align="center" colspan="2">
                <img src="calculator.jpg" height="300" width="400" align="bottom" />
              </td>
            </tr>
            <tr>
              <td><label for="">Input1</label></td>
              <td><input type="number" name="input1" /><br /></td>
            </tr>
            <tr>
              <td><label for="">Input2</label></td>
              <td><input type="number" name="input2" /><br /></td>
            </tr>
            <tr>
              <td><label for="">Select Operation</label></td>
              <td>
                <select name="operation">
                  <option value="Select..">Select..</option>
                  <option value="ADD">ADD</option>
                  <option value="SUBTRACT">SUBTRACT</option>
                  <option value="MULTIPLY">MULTIPLY</option>
                  <option value="DIVIDE">DIVIDE</option>
                </select><br />
              </td>
            </tr>
            <tr>
              <td>
                <input type="image" name="submit" src="calc.jpg" alt="Submit" height="80" width="80" align="bottom" />
              </td>
              <td>
                <input type="image" name="reset" src="reset.jpg" alt="Reset" height="80" width="80" align="bottom" />
              </td>
            </tr>
          </table>
        </form>
      </td>
    </tr>
  </table>
</body>
</html>

Key Changes Explained #

• Added cellspacing="0" to all tables: Removes default gaps between table cells, eliminating wasted space around your images and form elements.
• Set inner table width to 400px: Matches your calculator image's width, ensuring the table fits the image perfectly instead of expanding unnecessarily.
• Added align="bottom" to all images: Forces inline images to align with the bottom of their container, fixing the extra blank space issue.
• Fixed <input type="image"> syntax: Removed the invalid img attribute from your submit/reset buttons—this was causing those images to display incorrectly.
• Added valign="top" to outer table cell: Ensures your form starts at the top of the outer table cell, avoiding extra vertical space above the content.
• Set outer table cellpadding="0": Reduces inner padding in the outer table cell to prevent unnecessary space around the form.

内容的提问来源于stack exchange，提问作者Anjali Bharti