如何对这个 HTML 表的定位进行排序？ - 我需要右侧的提交按钮，需要删除左侧的间距

Question

I'm just putting together a HTML table for a wix site and for some reason the table is coming out looking all kinds of funky. There seems to be excessive spacing on the left hand side and the submit button will not position to the right edge of the input boxes? Also, I am trying to change the background colour of the input boxes to '#3A3B3F' but for some reason everything I try is not working, not sure if I have made a fundamental error in the code somewhere. If anyone can provide me with any assistance to this I would be eternally grateful: this is a copy of the tables code and a screengrab of how the table currently looks: Screenshot of table

<style>
    #crmWebToEntityForm tr , #crmWebToEntityForm td { 
        padding:6px;
        border-spacing:0px;
        border-width:0px;
        }
</style>
<table style='width:600px;background-color:#3A3B3F;background-color:#3A3B3F;color:#3A3B3F'><tr>
<td  colspan='2' align='left' style='color:#ffffff;font-family:Avenir;font:Avenir;font-size:18px;word-break: break-word;'><strong></strong></td>
</tr> <br></br>
  <tr><td  style='word-break: break-word;text-align:left;font-size:16px;font- 
family:Avenir;font:Avenir;width:30%;'><span style='color:red;'></span></td>
  <td style='width:40;' style='height:40px'' ><input type='text' placeholder="First Name" 
style='width:200%; height:50' box-sizing:border-box;'  maxlength='0' name='First Name' /> 
   </td>
    <td style='width:350px; style='height="50px" ></td></tr>
    <tr><td  style='word-break: break-word;text-align:;font-size:16px;font- 
 family:Avenir;font:Avenir;width:350px'><span style='color:red;'></span></td>
 <td style='width:40%;' ><input type='text' placeholder="Last Name" style='width:200%; 
height:50' 'box-sizing:border-box' maxlength='80' name='Last Name' /></td>
    <td style='width:350px; style='height="50px"></td></tr><tr><td  style='word-break: break- 
word;text-align:left;font-size:16px;font-family:Avenir;font:Avenir;width:30%;'><span 
style='color:red;'></span></td>
  <td style='width:40%;' ><input type='text' placeholder="Email Address" 
style='width:200%;height:50''box-sizing:border-box;'  maxlength='100' name='Email' /></td>
    <td style='width:350px; style='height="50px"></td></tr><tr><td  style='word-break: break- 
word;text-align:left;font-size:16px;font-family:Avenir;font:Avenir;width:30%;'><span 
style='color:red;'></span></td>
  <td style='width:40%;' ><input type='text' placeholder="Phone Number" style='width:200%; 
height:50''box-sizing:border-box;'  maxlength='40' name='Phone' /></td>
<td style='width:350px; style='height="50px"></td></tr><tr style='display:none;' ><td 
style='word-break: break-word;text-align:left;font-size:16px;font- 
family:Avenir;font:Avenir;width:30%'>Lead Source</td><td style='width:40%;'>
    <select style='width:100%;box-sizing:border-box;' name='Lead Source'>
    </select></td><td style='width:30%;' ></td></tr><tr style='display:none;' ><td 
 style='word-break: break-word;text-align:left;font-size:16px;font-family:Arial;width:30%'> Introducer </td>
<td style='width:40%;' ><input type='text' style='width:100%;box-sizing:border-box;'  maxlength='255' name='LEADCF1' value='ContractorPeople'></input></td>
    <td style='width:30%;'></td></tr><tr><td  style='word-break: break-word;text-align:left;font-size:16px;font-family:Arial;width:30%;' ></td><td  style='width:40%;'> <textarea name='Description' maxlength='32000' style='width:200%;height:100' >&nbsp;</textarea></td>
<td style='width:30%;'></td></tr>

    <tr><td colspan='2' style='text-align:69%; padding-top:15px;font-size:16px;'>
  <button id="formssubmit">SUBMIT QUERY</button><style type="text/css" type="submit">

#formssubmit { 
 background-color: #ffffff;
 padding: .5em;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 6px;
 color: #ddddd;
 font-family: 'Avenir';
 font-size: 20px;
 text-decoration: none;
 border:color:#ffffff;
}

#formssubmit:hover {
 border: none;
 background: #9799A4;
 box-shadow: 0px 0px 1px #ffffff;
}

Answer 1

I had a look and there is a lot going on. I don't see why in each row you have 3 columns. I would remove the first and last as you use your input in the 2nd td but the first and last seem empty:

I would move these table divisions and work with what is left: <td style="word-break: break- word;text-align:left;font-size:16px;font-family:Avenir;font:Avenir;width:30%;"><span style="color:red;"></span></td>

<td style="width:350px; style=" height="50px"></td>

then you can style the td with your input, you can for example use padding: 0 20px or style different width so you can position all your inputs the way you want to.

regarding background colors of the input boxes and since you are using inline style you can simply do:

<input style="width:200%;height:50; background:#3A3B3F;">

regarding the button positioning: now that you have less table divisions it's also easier to position your button on the right. You can for example add the following css to your formssubmit button:

#formssubmit {
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

and it will position on the right with a bit of margin.

Does that already help reshape your form a bit closer to what you want it to be?