How to use tables to structure forms ?

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.
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Design a web page using HTML and CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array