Designing a Table using Divs – Added jQuery Functions

Hello Guys, How are you? In the previous post i published an example of designing table based form using HTML tables, which many experts consider good and contrary to this many consider it a better practice. But i promised to published its alternative for beginners using divs. I am only providing code for necessary part, rest you can inspect and change as needed.

As a bonus for beginners, i added jQuery function. So lets see it below.

Designing HTML Table by using DIVs – HTML and CSS

Here is the picture of table,

Div based HTML table using CSS


Changing color of rows based on user input with jQuery

In the above form, i have placed a text box where user can enter the line number. Based on input, color of the row will be changed.

Here is the Code:

Common Programming Questions?

  1. How can i make a table cell value empty?

Ans. Use &nbsp instead, it solves your problem.


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.