美文网首页
word文档式HTML表格

word文档式HTML表格

作者: 领主芭芭拉 | 来源:发表于2019-10-28 15:26 被阅读0次
    需求.png

    用html呈现如图表格,合并单元格太繁琐

    HTML

    <div style="font-size:24px;text-align: center;line-height: 50px;margin-bottom: 20px;">个体工商户开业登记申请书</div>
        <table cellpadding="0" cellspacing="0" class="auto-style1" border="1">
            <tr>
                <td rowspan="7">经营者</td>
                <td>
                    姓名
                </td>
                <td><input type="text" /></td>
                <td>
                    性别
                </td>
                <td><input type="text" /></td>
                <td rowspan="7" style="min-width:150px;">
                    照片粘贴处
                </td>
            </tr>
            <tr>
                <td>
                    身份证
                </td>
                <td colspan="2"><input type="text" /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    住所
                </td>
                <td colspan="2"><input type="text" /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
    
                    邮政编码
                </td>
                <td><input type="text" /></td>
                <td>
                    移动电话
                </td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td>
                    固定电话
                </td>
                <td><input type="text" /></td>
                <td>
                    电子邮箱
                </td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td>
                    政治面貌
                </td>
                <td><input type="text" /></td>
                <td>
                    民族
                </td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td>
                    文化程度
                </td>
                <td><input type="text" /></td>
                <td>
                    职业状况
                </td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td>
                    名称
                </td>
                <td colspan="5"><input type="text" /></td>
            </tr>
            <tr>
                <td rowspan="2">
                    备选字号(请选用不同字号)
                </td>
                <td colspan="5">1<input type="text" /></td>
            </tr>
            <tr>
                <td colspan="5">2<input type="text" /></td>
            </tr>
            <tr>
                <td rowspan="7">
                    组成形式
                </td>
                <td colspan="5">
                    个人经营 家庭经营
    
                </td>
            </tr>
            <tr>
                <td rowspan="6">参加经营的家庭成员</td>
                <td><input type="text" /></td>
                <td rowspan="6">参加经营的家庭成员身份证号码</td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td>经营范围</td>
                <td colspan="5"><input type="text" /></td>
            </tr>
            <tr>
                <td rowspan="2">经营场所</td>
                <td>地址</td>
                <td colspan="4"><input type="text" /></td>
            </tr>
            <tr>
                <td>邮政编码</td>
                <td><input type="text" /></td>
                <td>联系电话</td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td>从业人数</td>
                <td colspan="2"><input type="text" /></td>
                <td>资金数额</td>
                <td colspan="2"><input type="text" /></td>
            </tr>
            <tr>
                <td colspan="6">
    
                    本人依照《个体工商户条例》申请登记为个体工商户,提交文件材料真实有效。仅对真实性承担责任<br />
                    <div style="text-align: right;line-height:30px;">经营者签名:<input style="width:80px;" type="text" /><br />
                     <input style="width: 60px;" type="text" />年<input style="width: 60px;" type="text" />月<input style="width: 60px;" type="text" />日</div>
                  
                </td>
            </tr>
        </table>
    

    CSS

    body{
            padding: 20px 100px;
        }
        table{
            color:#333;
            border: 1px solid #ddd;
        }
        table td{
            padding: 5px 3px;
        }
        table input{
            border: 0;
        }
    
    最终效果: 效果.png

    一般写这种页面都是要导出 word 的功能

    附上: 导出.png

    链接:https://blog.csdn.net/sD7O95O/article/details/100643428

    相关文章

      网友评论

          本文标题:word文档式HTML表格

          本文链接:https://www.haomeiwen.com/subject/qpvhrctx.html