简单的网页表格的制作4

最新推荐文章于 2024-04-26 15:36:17 发布

等待的L先生

最新推荐文章于 2024-04-26 15:36:17 发布

阅读量517

点赞数

分类专栏： # html+css 文章标签： html css 网页设计

本文链接：https://blog.csdn.net/weixin_42590083/article/details/109772161

版权

html+css 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

简单的网页表格的制作4

图片示例：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态网页的表格制作4</title>
    <style type="text/css">
    caption{font-family: "宋体";font-weight: bolder;}
    .content{width: 1024px;text-align: center;margin-left: 15%;margin-top:10px;margin-top: 50px;font-weight: bold;}
    table{width: 1000px;border: 3px solid orange; border-collapse: collapse;}
    table td{border: 3px solid orange;padding: 0px;}
    input{outline: medium;margin: 0px;border: none;height: 80px;}
    .oneInput{margin: 0px;border: none;padding: 1px;}
    .pictureInput{width: 414px;height: 121px;}
    .tupain{width: 414px;height: 427.45px;}
    .tupain>input{width: 414px;height: 427.45px;margin: 50% 50%; }
    #ownPicture{display: none;}
    .fixSize{width:100px;}
    .yourPicture{background: none;}
    .lastLine{height: 80px;}
    </style>
</head>
<body>
    <div class="content">
        <form action="#" method="GET"name="" id="">
        <table border="1">
            <caption>
                逆战班学员介绍
            </caption>
            <tr>
                <td class="fixSize">您的大名</td>
                <td colspan="2"><input class="oneInput" type="text"></td>
                <td class="fixSize">贵庚</td>
                <td colspan="2"><input class="oneInput" type="text"/></td>
                <td rowspan="5"colspan="2" class="pictureInput">
                   <div class="tupain"><input type="file" name="yourPircture" class="yourPircture"  /><img src="#" name="ownPicture" id="ownPicture" alt="ownPicture" title="请放下你最美的照片"></div>
                </td>
            </tr>
            <tr>
                <td class="fixSize">是否毕业</td>
                <td colspan="2"><input class="oneInput" type="text"></td>
                <td class="fixSize">专业是啥</td>
                <td colspan="2"><input class="oneInput" type="text"/></td>
               
            </tr>
            <tr>
                <td class="fixSize">大学名称</td>
                <td colspan="5"><input  class="oneInput" type="text"></td>
               
            </tr>
            <tr>
                <td class="fixSize">从事过工作</td>
                <td colspan="5"><input  class="oneInput" type="text"></td>
               
            </tr>
            <tr>
                <td class="fixSize">H5基础程度</td>
                <td colspan="3"><input class="oneInput" type="text"></td>
                <td colspan="2"></td>
                
            </tr>
            
            <tr>
                <td class="fixSize">自我性格描述</td>
                <td colspan="7"><input type="text"></td>
                
            </tr>
            <tr>
                <td rowspan="4" class="fixSize">简述1.目标规划2.对H5疑问3.建议</td>
                <td rowspan="4"colspan="3"><input type="text"></td>
                <td rowspan="2"colspan="4"><input class="oneInput" type="text"></td>
               
            </tr>
            <tr>         
            </tr>
            <tr> 
                <td rowspan="2"colspan="4"><input class="oneInput" type="text"></td>      
            </tr>
            <tr>       
            </tr>
            <tr>
                <td colspan="8"class="lastLine"><input class="oneInput" type="text"></td>
                
            </tr> 
        </table>
        </form>
    </div>
</body>
</html>

等待的L先生

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
简单的网页表格的制作4

简单的网页表格的制作4图片示例：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>静态网页的表格制作4</title> <style typ
复制链接

扫一扫

专栏目录