Friday, July 18, 2014

Creating the table structure using divs:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
.genral .table { display: table; width: 100%; border:1px solid #ff0000;  }
.genral .row {  display: table-row; }
.genral .tabledata { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
</style>

</head>

<body>

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<div class="genral">
    <div class="table">
        <div class="row">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
    </div>
</div>

</body>
</html>
at No comments:

Creating the forms using div with table structure side by side:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
.genral .table { display: table; width: 100%; border:1px solid #ff0000; border-radius:10px; }
.genral .row {  display: table-row; }
.genral .cell { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cell-1-width{ width:300px;}
.cell-2-width{ width:20px;}
.text-field-css{ border:1px solid #cccccc; width:250px; border-radius:5px; height:22px; margin-bottom:20px; background-color:#FFFFFF; margin-top:5px;}
</style>
</head>
<body>
<div class="genral">
    <div class="table">
        <div class="row">
            <div class="cell cell-1-width">User Name<br /><input name="" type="text" class="text-field-css" /></div>
            <div class="cell">password<br /><input name="" type="text" class="text-field-css" /></div>
        </div>
       
        <div class="row">
            <div class="cell cell-1-width">User Name<br /><input name="" type="text" class="text-field-css" /></div>
            <div class="cell">password<br /><input name="" type="text" class="text-field-css" /></div>
        </div>
       
        <div class="row">
            <div class="cell cell-1-width">User Name<br /><input name="" type="text" class="text-field-css" /></div>
            <div class="cell">password<br /><input name="" type="text" class="text-field-css" /></div>
        </div>
       
        <div class="row">
            <div class="cell cell-1-width">User Name<br /><input name="" type="text" class="text-field-css" /></div>
            <div class="cell">password<br /><input name="" type="text" class="text-field-css" /></div>
        </div>
           
       
       
  <!--     /*  <div class="row">
            <div class="cell"><input name="Submit" type="button" value="Submit" /></div>
        </div>
        */
        -->
       
       
    </div>
</div>
</body>
</html>

at No comments:

Creating the forms using div with table structure secondway:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
.genral .table { display: table; width: 100%; border:1px solid #ff0000; border-radius:10px; }
.genral .row {  display: table-row; }
.genral .cell { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cell-1-width{ width:90px;}
.cell-2-width{ width:20px;}
.text-field-css{ border:1px solid #cccccc; width:250px; border-radius:5px; height:22px; margin-bottom:20px; background-color:#FFFFFF; margin-top:5px;}
</style>
</head>
<body>
<div class="genral">
    <div class="table">
        <div class="row">
            <div class="cell cell-1-width">User Name</div>
        </div>
        <div class="row">
            <div class="cell"><input name="" type="text" class="text-field-css" /></div>
        </div>
       
         <div class="row">
            <div class="cell cell-1-width">Password</div>
        </div>
        <div class="row">
            <div class="cell"><input name="" type="text" class="text-field-css" /></div>
        </div>
       
         <div class="row">
            <div class="cell cell-1-width">Email Id</div>
        </div>
        <div class="row">
            <div class="cell"><input name="" type="text" class="text-field-css" /></div>
        </div>
       
         <div class="row">
            <div class="cell"><input name="Submit" type="button" value="Submit" /></div>
        </div>

    </div>
</div>
</body>
</html>

at No comments:

Creating the forms using div with table structure:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
.genral .table { display: table; width: 80%; border:1px solid #ff0000; border-radius:10px; margin:0 auto;}
.genral .row {  display: table-row; }
.genral .cell { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:5px 5px 5px 5px}
.genral .cell-1-width{ width:90px;}
.genral .cell-2-width{ width:20px;}
</style>
</head>
<body>
<div class="genral">
    <div class="table">
        <div class="row">
            <div class="cell cell-1-width">User Name</div>
            <div class="cell cell-2-width">:</div>
            <div class="cell"><input name="" type="text" /></div>
        </div>
       
        <div class="row">
            <div class="cell">Password</div>
            <div class="cell">:</div>
            <div class="cell"><input name="" type="text" /></div>
        </div>
       
        <div class="row">
            <div class="cell">Email Id</div>
            <div class="cell">:</div>
            <div class="cell"><input name="" type="text" /></div>
        </div>
       
        <div class="row">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"><input name="Submit" type="button" value="Submit" /></div>
        </div>
    </div>
</div>
</body>
</html>

at No comments:
Subscribe to: Posts (Atom)