Html 如何在此表中将边框设置为0

在上面的图像中，名字和文本字段没有从左侧对齐。我不知道是它的边框还是填充物。但里面的图像是有条件可见的。如何通过html和css摆脱它

<div id=first_name>
    First Name<br />
    <table>
        <tr>
            <td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
            <td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
        </tr>
        <tr>
            <td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
        </tr>
    </table>
</div><!-- eof first_name -->

名字

不能为空。

不能为空。

---

尝试如下所示，在表标记中将边框设置为0

<table  border="0">

---

在大多数（向后兼容的）浏览器中，使用古语：

仍能产生足够好的结果，HTML5中不支持属性

单元格填充

和

单元格间距

而是在样式表中添加类似的内容：

#first_name table { 
    border-collapse: collapse;
    border-spacing: 0;
}
#first_name td {
    padding: 0;
}
#first_name input { 
    margin: 0;
}

当然，您可以向元素添加类并相应地更新样式表

提示：对于将来类似的问题，请尝试在您选择的浏览器中使用开发工具，并调查应用于元素的默认样式，以便您可以相应地进行调整。

HTML

<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
        </td>
        <td>
            <input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
        </td>
    </tr>
    <tr>
        <td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>

        </td>
    </tr>
</table>

<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td>First Name:
        </td>
    </tr>
    <tr>
         <td>
            <input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
        </td>
        <td>
            <img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
        </td>

    </tr>
    <tr>
        <td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
  </td>
    </tr>
</table>
    </div>

名字
不能为空。

或 HTML

<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
        </td>
        <td>
            <input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
        </td>
    </tr>
    <tr>
        <td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>

        </td>
    </tr>
</table>

<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td>First Name:
        </td>
    </tr>
    <tr>
         <td>
            <input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
        </td>
        <td>
            <img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
        </td>

    </tr>
    <tr>
        <td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
  </td>
    </tr>
</table>
    </div>

名字：
不能为空。

---

问题是，即使您隐藏了图像，仍然有一个

元素，我对代码做了一些更改，我将名字放入

以与您的输入保持一致。还用标签把它包起来。我删除了图像所在的td，您可以将其与输入放在同一个单元格中，或者使用javascript动态添加它并将其完全取出（这将是我的方法）

名字：
不能为空。

您的意思是边距，而不是边框，对吗？

callpadding

和

cellspacting

元素的

table

属性不受HTML5支持