首页 > Web开发 > 详细

HTML制作WORD表格

时间:2019-09-09 13:15:17      阅读:115      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片

table属性

align:让内容居中,取值为left、right、center
border:设置表格的边框
cellspacing:单元格与单元格之间的距离
bgcolor:表格的背景色
colspan:跨列数
rowspan:跨行数

HTML代码

<table class="table" style="width:100%;height:100%;border:1px solid;align:center;font-size:12px;" border cellspacing="0" cellpadding="0">
              <caption style="font-size:24px;font-weight:bold;">个人信息登记表</caption>
              <tr align="center">
                <td rowspan="2"><div class="div1">个人信息</div></td>
                <td>名称:</td>
                <td colspan="3"><input class="myInput"/></td>
                <td>性别:</td>
                <td><input class="myInput"/></td>
                <td>年龄:</td>
                <td><input class="myInput"/></td>
              </tr>
              <tr align="center">
                <td>地址:</td>
                <td colspan="3"><input class="myInput1"/>省<input class="myInput1"/>市<input class="myInput1"/>县</td>
                <td>编号:</td>
                <td><input class="myInput"/></td>
                <td>邮编:</td>
                <td><input class="myInput"/></td>
              </tr>
</table>

输入框代码样式

  • 输入框占据全部
    技术分享图片
.myInput{
    width: 100%;
    height: 100%;
    border: none;
    float: left;
    zoom:1;
    outline: medium;
}
  • 输入框分开插入
    技术分享图片
.myInput1{
    width: 50px;
    border: none;
    zoom:1;
    outline: medium;
}

HTML制作WORD表格

原文:https://www.cnblogs.com/maggieq8324/p/11491081.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!