Div based or Table Based Form – Point Out errors in this Form

Hello Guys, again late due to lots of tasks overhead. But i came up with a beginner example where i want to show you what not to do in case you are designing a form by using tables. In this example we are just designing a UX and not actually making a form, but this approach uses tables to build a design.

Believe me, there are many experts out there who are against the use of HTML tables, as technology grows, most of people and browsers recommend using divs to design any thing. Table based structured has become old and it is considered to be slow. You may do some research on this part why and what? But here is a form and code. You check the way it is designed, a mix of CSS scheme rather than external style sheet and learn from it. Revised addition will be added later.

How to Design a Table based FORM by using HTML and a mix of CSS styles


how to design html form

Here is the code for this form, it was written by a very beginner developer, somehow he managed to design it but you must identify what are the issues and how to solve them. (Tips at the end)



Tips on Learning:

This form has following issues:

  1. Some code is missing
  2. Garble of CSS
  3. Table based design and many experts consider it wrong practice
  4. Not properly indented, ATOM was used as editor.

Rest its your time, you inspect and suggest errors and solutions, will help beginners practice more. A revised version using Divs will be posted lator 🙂

Thank you for reading, please share it with your beginner coders.



  • May 12, 2017
  • 0
Sohail ahmed
About me

Love to train and learn. SEO and development is my profession. 10+ years of IT training, practical experience in SEO. Creativity helps me strategize things well, especially when i code.