Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use tables to structurize forms in HTML?
Tables can be used to create structured and organized forms in HTML. Using tables for form layout provides better alignment and visual organization of form elements, making forms more readable and professional-looking. Let us first understand how to create a basic form and then see how tables enhance form structure.
Basic Form Structure
The <form> tag creates a container for form elements. Form controls like input fields, buttons, and labels are placed within this container to collect user data.
Syntax
<form id="formId" action="submitURL" method="POST"> <!-- Form elements go here --> </form>
Example Simple Form
Following example shows a basic form with radio button options
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Subject Selection</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><br>
<input type="radio" id="dev" name="subject" value="dev">
<label for="dev">Web Development</label><br>
<input type="radio" id="db" name="subject" value="db">
<label for="db">Database</label><br><br>
<button id="submit" type="submit">Submit</button>
</div>
</form>
</body>
</html>
The output displays a simple form with radio buttons stacked vertically
Subject Selection Select the subject you want to choose: ? Programming ? Web Development ? Database [Submit]
Using Tables to Structure Forms
Tables provide a grid-like structure that aligns form elements neatly. Each form control can be placed in separate table cells, creating organized rows and columns. This approach ensures consistent spacing and alignment across different browsers.
Basic Table Form Structure
<table>
<form id="myform">
<tr>
<td><input type="radio" id="option1" name="group" value="value1"></td>
<td><label for="option1">Option 1</label></td>
</tr>
</form>
</table>
Example Form with Table Structure
Following example converts the previous form into a table-based layout for better organization
<!DOCTYPE html>
<html>
<head>
<title>Table-Structured Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Subject Selection</h1>
<p>Select the subject you want to choose:</p>
<table style="border-collapse: collapse;">
<form id="myform">
<tr>
<td style="padding: 8px;">
<input type="radio" id="prog" name="subject" value="prog">
</td>
<td style="padding: 8px;">
<label for="prog">Programming</label>
</td>
</tr>
<tr>
<td style="padding: 8px;">
<input type="radio" id="dev" name="subject" value="dev">
</td>
<td style="padding: 8px;">
<label for="dev">Web Development</label>
</td>
</tr>
<tr>
<td style="padding: 8px;">
<input type="radio" id="db" name="subject" value="db">
</td>
<td style="padding: 8px;">
<label for="db">Database</label>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 8px;">
<button id="submit" type="submit">Submit</button>
</td>
</tr>
</form>
</table>
</body>
</html>
The output shows the form elements aligned in a structured table layout
Subject Selection Select the subject you want to choose: ? Programming ? Web Development ? Database [Submit]
Complex Form with Table Structure
Tables become more valuable when creating complex forms with multiple types of input fields. The following example demonstrates a comprehensive form using table structure.
Example Registration Form Using Table
<!DOCTYPE html>
<html>
<head>
<title>Registration Form with Table</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>User Registration</h1>
<table border="1" style="border-collapse: collapse; width: 100%; max-width: 500px;">
<form id="registrationForm" action="/submit" method="POST">
<tr>
<td style="padding: 10px; font-weight: bold;">Full Name:</td>
<td style="padding: 10px;">
<input type="text" id="fullname" name="fullname" required style="width: 200px;">
</td>
</tr>
<tr>
<td style="padding: 10px; font-weight: bold;">Email:</td>
<td style="padding: 10px;">
<input type="email" id="email" name="email" required style="width: 200px;">
</td>
</tr>
<tr>
<td style="padding: 10px; font-weight: bold;">Gender:</td>
<td style="padding: 10px;">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</td>
</tr>
<tr>
<td style="padding: 10px; font-weight: bold;">Country:</td>
<td style="padding: 10px;">
<select name="country" id="country" style="width: 210px;">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
<option value="canada">Canada</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 10px; text-align: center;">
<button type="submit" style="padding: 8px 20px;">Register</button>
<button type="reset" style="padding: 8px 20px; margin-left: 10px;">Reset</button>
</td>
</tr>
</form>
</table>
</body>
</html>
The output displays a neatly organized registration form with labeled fields
User Registration ?????????????????????????????????????????????????? ? Full Name: ? [________________] ? ?????????????????????????????????????????????????? ? Email: ? [________________] ? ?????????????????????????????????????????????????? ? Gender: ? ? Male ? Female ? ?????????????????????????????????????????????????? ? Country: ? [USA ?] ? ?????????????????????????????????????????????????? ? [Register] [Reset] ? ??????????????????????????????????????????????????
Advantages of Table-Based Forms
Using tables for form structure provides several benefits
Perfect Alignment Labels and input fields align consistently across all rows without additional CSS styling.
Organized Layout Each form element occupies its own cell, creating a clean grid structure that is easy to read and navigate.
Cross-browser Compatibility Table-based layouts render consistently across different browsers and devices.
484 Views
