html - Table like format through divs and css -

html - Table like format through divs and css -

i have next css , html code:

<style type="text/css"> .formlayout { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; width: 300px; border-radius: 1em; } .formlayout label, .formlayout input { display: block; width: 120px; float: left; margin-bottom: 10px; } .formlayout label { text-align: right; padding-right: 20px; } br { clear: left; } .box_header { font-weight: 600; color: #000000; text-align: center; border-radius: 1em; } </style> <div class="formlayout" style="float:left; margin-left: 100px; margin-top:5em;"> <div class="box_header"> install </div> <label>type</label> <label>amount</label> <label>days</label> <br> <input id="type" name="type" size="25"> <input id="amount" name="amount" size="5"> <input id="days" name="days" size="5"><br> </div>

i trying create in table format cells aligned nicely. reason can't labels , input boxes align correctly. can please help me this.

an illustration of want this:

<table align="center"> <thead> <th>type</th> <th>amount</th> <th>days</th> </thead> <tbody> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> </tbody> </table>

try :

css

.formlayout { margin:auto; width:500px; border-radius:5px; border:1px solid #a1a1a1; background-color: #f3f3f3; } .ins { margin:auto; } .ins { font-weight:bold; padding:10px; } .group-div { text-align: center; } .group-div td { width:250px; } .group-div input[type="text"] { padding:3px; }

html code

<div class = "formlayout"> <div class = "ins"> <center>install</center> </div> <div class = "group-div"> <table> <tr><td><label>type</label></td> <td><label>amount</label></td> <td><label>days</label></td></tr> <tr><td><input type = "text"></td> <td><input type = "text"></td> <td><input type = "text"></td></tr> <tr><td><input type = "text"></td> <td><input type = "text"></td> <td><input type = "text"></td></tr> <tr><td><input type = "text"></td> <td><input type = "text"></td> <td><input type = "text"></td></tr> <tr><td><input type = "text"></td> <td><input type = "text"></td> <td><input type = "text"></td></tr> <tr><td><input type = "text"></td> <td><input type = "text"></td> <td><input type = "text"></td></tr> </table> </div>

though seems codes basic hope helps, still. goodluck! :)

here's fiddle : http://jsfiddle.net/g4jru/

html css html5