Create Form without Using Table

The easiest way to do it is to use "p" or the paragraph html tag because browsers automatically add some space (margin) before and after each <p> element which can be a replacement for table rows and  css property to style/define it.

Here's simple way to do it: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Create a form without using table</title>
<style type="text/css">
p label{width:100px;float:left}
p input,p select{width:100px;}
</style>

</head>

<body>
<form>
<p><label> First Name: </label> <input type="text" /></p>
<p><label> Middle Name: </label> <input type="text" /></p>
<p><label> Last Name: </label> <input type="text" /></p>
<p><label> Gender: </label> 
 <select>
 <option> Male</option>
 <option> Female</option>
 </select>
</p>

</form>

</body>
</html>


That's it! Just play with CSS.

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Add/Subtract Single Digit Number in Assembly Language