html的点击按钮实现预览

[qq_27212091]

利用html设置不同样式的div,yoghurt填写后点击预览,如何实现将div的内容用表格的形式展示出来,就好像用excel表格展示.
div的内容如下:
<div>
<div>上课工作量填报</div>
<div id='div1'$amp;>
<input type="text" placeholder="班级"></input>
<input type="text" placeholder="课程名称"></input>
<input type="text" placeholder="课时/周"></input>
<input type="text" placeholder="周数"></input>
<input type="text" placeholder="学生人数"></input>
<input type="text" placeholder="实际工作量"></input>
<input type="button" onclick="add1()" value="申报"></input>
</div>
</div>
<div id='div2'$amp;>
<div>作业工作量填报</div>
<div>
<input type="text" placeholder="班级"></input>
<input type="text" placeholder="课程名称"></input>
<input type="text" placeholder="课时/周"></input>
<input type="text" placeholder="周数"></input>
<input type="text" placeholder="学生人数"></input>
<input type="text" placeholder="实际工作量"></input>
<input type="button" onclick="add2()" value="申报"></input>
</div>
</div>
<div id='div3'$amp;>
<div>指导本科工作和其他内容</div>
<div>
<input type="text" placeholder="项目内容"></input>
<input type="text" placeholder="学生人数"></input>
<input type="text" placeholder="实际工作量"></input>
<input type="button" onclick="add3()" value="申报"></input>
</div>
</div>