How to use tables to structurize forms in HTML?

HTML Web Development Front End Technology

The tables can be used to create and structurize forms in HTML. But, before that let us see how to create a form in HTML.

Create a Form in HTML

Example

Let us see how to create a form using the <form> tags. We have set three input type radio with individual labels −


<!DOCTYPE html>
<html>
<head>
   <title>HTML Form</title>
</head>
<body>
   <h1>Details</h1>
   <form id="myform">
      <p>Select the subject you want to choose:</p>
      <div>
         <input type="radio" id="prog" name="subject" value="prog">
         <label for="prog">Programming</label>
         <input type="radio" id="dev" name="subject" value="dev">
         <label for="dev">Web Development</label>
         <input type="radio" id="db" name="subject" value="db">
         <label for="db">Database</label>
         </div><br/>
         <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>

Create a Form using HTML Tables

Now, let us convert the above form to a form created using HTML tables. The <form> is set inside the <table> tag −

<table>
   <form id="myform">
      <!- -
      -->
   </form>
</table>

Then come the rows, wherein we have set the from input type −

<tr>
   <td>
      <input type="radio" id="prog" name="subject" value="prog">
   </td>
</tr>

Example

The above goes on for every input type i.e. a <tr> for every input. Let us now see the complete example −


<!DOCTYPE html>
<html>
<head>
   <title>HTML Form</title>
</head>
<body>
   <h1>Details</h1>
   <p>Select the subject you want to choose:</p>
   <table>
      <form id="myform">
         <tr>
            <td>
            <input type="radio" id="prog" name="subject" value="prog">
            </td>
            <td>
            <label for="prog">Programming</label>
            </td>
         </tr>
         <tr>
            <td> <input type="radio" id="dev" name="subject" value="dev"></td>
            <td> <label for="dev">Web Development</label>
            </td>
         </tr>
         <tr>
            <td><input type="radio" id="db" name="subject" value="db"></td>
            <td> <label for="db">Database</label>
            </td>
         </tr>
         <tr>
            <td><button id="submit" type="submit">Submit</button></td>
         </tr>
      </form>
   </table>
</body>
</html>