How to use tables to structure forms ?

Last Updated : 20 Aug, 2021

Creating an HTML form is an important aspect when creating a website. Forms are a method of interacting with the users of the website. Thus it becomes necessary that the forms must be properly aligned and attractive when implemented on a website. The process of simply adding an HTML form to a webpage is as follows.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2>Welcome To GFG</h2> 
    <p>Default code has been loaded into the Editor.</p> 
  
    <form> 
        <label for="name">Name</label> 
        <input type="text" id="name" /> 
        <label for="email">Email</label> 
        <input type="email" id="email" /> 
        <label for="telnum">Tel No.</label> 
        <input type="telnum" id="telnum" /> 
        <label for="Roll No.">Roll No.</label> 
        <input type="number" id="rollno" /> 
    </form> 
</body> 
  
</html> 

Output: With this code, we have simply created a form within the body of the page. In the output, it can be seen that the form fields and labels are all in one line which does not look good. Even if we use the <br> tag to separate them into different lines, it would still not be properly aligned.

Structuring the form using HTML Tables: We can take the help of HTML tables to structure our forms. The <table> tag not only helps in creating desired tables but can also be used to structure our content such as forms. The below steps show how to use HTML tables to structure forms.

Create an HTML table using the <table> element.
Now add the <form> element within this table.
Next, we will create form fields.
We add the required form fields to the form using the <tr> element that is used to add rows to a table.
We use the <td> element to add labels and fields for separate columns.
We can add as many fields as required to our form.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2>Welcome To GFG</h2> 
    <p>Default code has been loaded into the Editor.</p> 
  
    <table> 
        <form> 
            <tr> 
                <td> 
                    <label for="name"> 
                        Name 
                    </label> 
                </td> 
                <td><input type="text" id="name" /> 
                </td> 
            </tr> 
            <tr> 
                <td><label for="email"> 
                        Email 
                    </label> 
                </td> 
                <td><input type="email" id="email" /> 
                </td> 
            </tr> 
            <tr> 
                <td><label for="telnum"> 
                        Tel No. 
                    </label> 
                </td> 
                <td><input type="telnum" id="telnum" /> 
                </td> 
            </tr> 
            <tr> 
                <td><label for="Roll No."> 
                        Roll No. 
                    </label> 
                </td> 
                <td><input type="number" id="rollno" /> 
                </td> 
            </tr> 
        </form> 
    </table> 
</body> 
  
</html> 

Output: As it is seen in the output that the form fields are appropriately added to new rows and are also properly aligned with the help of HTML tables. It can also be seen that all the input fields are of the same width and length. Thus there is no use in using the CSS to align the form fields.