Article Categories

Selected Reading

Create A Form Using HTML Tables?

HTML Web Development Front End Technology

Creating forms using HTML tables was a common practice before CSS became widely adopted. While modern web development favors CSS-based layouts, understanding table-based forms is still valuable for maintaining legacy code and certain specific use cases.

Syntax

Following is the basic syntax for creating a form using HTML tables

<form>
   <table>
      <tr>
         <td><label for="input1">Label:</label></td>
         <td><input type="text" id="input1" name="input1"></td>
      </tr>
   </table>
</form>

The key principle is organizing form elements into table rows (<tr>) and cells (<td>) to create a structured layout. Labels typically occupy the first column, while input elements occupy the second column.

Create a Basic Form in HTML

Before exploring table-based forms, let us first create a standard form using divs for comparison

Example

<!DOCTYPE html>
<html>
<head>
   <title>Basic HTML Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Course Selection Form</h2>
   <form id="myform" action="/submit" method="post">
      <p>Select the subject you want to choose:</p>
      <div style="margin-bottom: 10px;">
         <input type="radio" id="prog" name="subject" value="programming">
         <label for="prog">Programming</label>
      </div>
      <div style="margin-bottom: 10px;">
         <input type="radio" id="dev" name="subject" value="webdev">
         <label for="dev">Web Development</label>
      </div>
      <div style="margin-bottom: 15px;">
         <input type="radio" id="db" name="subject" value="database">
         <label for="db">Database</label>
      </div>
      <div>
         <button type="submit">Submit</button>
      </div>
   </form>
</body>
</html>

The output displays a vertically aligned form with radio buttons

Course Selection Form

Select the subject you want to choose:
? Programming
? Web Development  
? Database
[Submit]

Create a Form Using HTML Tables

Now let us convert the above form to use HTML tables for layout structure. Tables provide precise alignment control and ensure consistent spacing between form elements.

Example Radio Button Form with Tables

<!DOCTYPE html>
<html>
<head>
   <title>Table-Based Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Course Selection Form</h2>
   <p>Select the subject you want to choose:</p>
   <form id="myform" action="/submit" method="post">
      <table style="border-collapse: collapse;">
         <tr>
            <td style="padding: 8px;">
               <input type="radio" id="prog" name="subject" value="programming">
            </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="webdev">
            </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="database">
            </td>
            <td style="padding: 8px;">
               <label for="db">Database</label>
            </td>
         </tr>
         <tr>
            <td colspan="2" style="padding: 15px 8px 8px 8px;">
               <button type="submit">Submit</button>
            </td>
         </tr>
      </table>
   </form>
</body>
</html>

The output shows a table-structured form with aligned radio buttons and labels

Course Selection Form

Select the subject you want to choose:
?  Programming
?  Web Development  
?  Database
   [Submit]

Example Contact Form with Tables

Following example demonstrates a more complex form using tables for input fields, labels, and a textarea

<!DOCTYPE html>
<html>
<head>
   <title>Contact Form with Tables</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Contact Information</h2>
   <form action="/contact" method="post">
      <table style="border-collapse: collapse;">
         <tr>
            <td style="padding: 10px; text-align: right;">
               <label for="name">Full Name:</label>
            </td>
            <td style="padding: 10px;">
               <input type="text" id="name" name="fullname" required style="width: 200px; padding: 5px;">
            </td>
         </tr>
         <tr>
            <td style="padding: 10px; text-align: right;">
               <label for="email">Email:</label>
            </td>
            <td style="padding: 10px;">
               <input type="email" id="email" name="email" required style="width: 200px; padding: 5px;">
            </td>
         </tr>
         <tr>
            <td style="padding: 10px; text-align: right;">
               <label for="phone">Phone:</label>
            </td>
            <td style="padding: 10px;">
               <input type="tel" id="phone" name="phone" style="width: 200px; padding: 5px;">
            </td>
         </tr>
         <tr>
            <td style="padding: 10px; text-align: right; vertical-align: top;">
               <label for="message">Message:</label>
            </td>
            <td style="padding: 10px;">
               <textarea id="message" name="message" rows="4" cols="25" style="padding: 5px;"></textarea>
            </td>
         </tr>
         <tr>
            <td colspan="2" style="padding: 15px 10px; text-align: center;">
               <button type="submit" style="padding: 8px 20px;">Send Message</button>
               <button type="reset" style="padding: 8px 20px; margin-left: 10px;">Clear Form</button>
            </td>
         </tr>
      </table>
   </form>
</body>
</html>

This creates a professional-looking contact form with right-aligned labels and properly spaced input fields

Contact Information

     Full Name: [________________]
         Email: [________________]
         Phone: [________________]
       Message: [________________]
                [________________]
                [________________]
                [________________]
        [Send Message] [Clear Form]

Table vs CSS Layout

Following table compares table-based forms with modern CSS-based layouts

Table-Based Forms	CSS-Based Forms
Simple alignment without CSS knowledge required.	More flexible and modern approach using CSS Grid or Flexbox.
Fixed structure, harder to make responsive.	Easily responsive and adaptable to different screen sizes.
Semantic issues tables are meant for tabular data.	Better semantic structure using form-specific elements.
Works consistently across older browsers.	May require vendor prefixes for older browser support.
Limited styling flexibility.	Full control over styling and animations.

Best Practices for Table-Based Forms

When using tables for form layout, consider these guidelines

Use colspan for buttons Span submit buttons across multiple columns for better positioning.
Right-align labels Use text-align: right on label cells for professional appearance.
Add proper spacing Use padding on table cells instead of <br> tags.
Include form validation Add required attributes and proper input types.
Use semantic labels Always associate labels with their corresponding inputs using the for attribute.

Conclusion

HTML tables provide a structured approach to form layout with precise alignment control.

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next