Colspan not working with input field in html

Question

I've been trying to make a basic form inside a table to keep all the input fields intact but I want to have some gap between the columns and that's why I tried inserting colspan but it's not working at all, When I try to do the same with the label it works but for some reason not with input field. Can anyone please help me with this?

  <form>
    <table>
      <tr>
        <td>
          <label for = "first">First Name</label>
        </td>
        <td colspan="4">
          <input type = "text" id = "first">
        </td>
        <td>
          <label for = "last">Last Name</label>
        </td>
        <td>
          <input type = "text" id = "last">
        </td>
        <td>
          <button type="submit">Submit!</button>
        </td>
      </tr>
    </table>
  </form>

`colspan` is about spanning multiple columns, it's not a styling property to adjust displayed width (Though that is often a side effect of spanning multiple columns). If you want gaps between the columns, [this question about cell spacing](https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css) and [this question about border spacing](https://stackoverflow.com/questions/17469483/how-to-increase-the-distance-between-table-columns-in-html/17469611) are probably relevant. — DBS, Jun 16 '20 at 15:02

score 2 · Accepted Answer · answered Jun 16 '20 at 16:35

2

Try adding a margin to your input field with this in your css:

input { margin-right: 10px; }

answered Jun 16 '20 at 16:35

Jack

313
5
22

Colspan not working with input field in html

1 Answers1