HTML-表格练习

2023-3-3

练习一

<!-- 作者:landaiqing

时间:2023-3-2

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习</title>
    <style>
        body{
            font-family: 楷体
            /* font-family:"Microsoft Yahei"; */
        }
        #all{
            /* background-color: aquamarine; */
            width: 700px;
            height: 1000px;
            margin: auto;
            display:flex;
            align-items:center;
        }
        .top {
            /* background-color: aqua; */
            width: 230px;
            height: 50px;
            top: 0;
            left: 0;
            right: 0;
            /* bottom: 0; */
            margin: auto;
            position: absolute;


        }
        .info{
            /* background-color: aqua; */
            width: 600px;
            height:20px;
            /* bottom: 0; */
            text-align: center;
            top: 30px;
            left: 0;
            right: 0;
            /* bottom: 0; */
            margin: auto;
            position: absolute;
            display:flex;
            align-items:center;
        }
        table {
            border-collapse: collapse;
            border: 1px solid #000;
            /* table-layout: fixed; */
            width: 100%;
            /* overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; */


        }
        .tables{
            top: 50px;
            /* top: 50px;
            left: 350px;
            right: 0;
            bottom: 0; */
            margin:0, auto;
            position: absolute;
        }


    </style>


</head>
<body>
    <div id="all">
        <div class="top">
            <font size="6">健康检查登记表</font>
        </div>
        <div class="info">
                <h4>体检时间 &nbsp &nbsp&nbsp&nbsp年 &nbsp&nbsp月 &nbsp&nbsp日 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp体检编号(20 &nbsp&nbsp年) &nbsp&nbsp号</h4>
        </div>
        <div class="tables">
            <table border="1">
                <tr>
                    <th style="width: 50px;height: 30px;">姓名</th>
                    <th style="width: 80px;height: 30px;"></th>
                    <th style="width: 60px">性别</th>
                    <th style="width: 60px;height: 30px;"></th>
                    <th>年龄</th>
                    <th style="width: 50px;height: 30px;"></th>
                    <th>婚否</th>
                    <th style="width: 70px;height: 30px;"></th>
                    <th>籍贯</th>
                    <th style="width: 50px;height: 30px;"></th>
                    <td style="width: 104px;text-align: center;" rowspan="5">相<br><br>片<br><br><br><br><span style="font-size: 5px;">医院骑缝章</span></td>
                </tr>
                <tr>
                    <th style="width: 50px;height: 30px;">住址</th>
                    <th colspan="3"></th>
                    <!-- <th style="width: 120px;height: 30px;" ></th> -->
                    <th style="width: 80px;height: 30px;">所属单位</th>
                    <!-- <th style="width: 80px;height: 30px;"></th> -->
                    <th colspan="5"></th>
                </tr>
                <tr>
                    <th colspan="4" style="width: 50px;height: 30px; text-align: left;">既往史及家族史</th>
                    <th colspan="6" style="width: 50px;height: 30px;text-align: left;">家庭住址</th>
                </tr>
                <tr>
                    <th colspan="10" style="width: 50px;height: 30px;text-align: left;">身份证号码</th>
                </tr>


                <tr>
                    <td rowspan="24" style="font-size: 35px;text-align: center;">体<br>格<br>检<br>查</td>
                    <th style="height: 20px;text-align: left;" colspan="9">既往病史:</th>
                    <tr>
                        <th rowspan="9" style="width: 20px;">内<br>科</th>
                        <td colspan="2" style="width: 70px;">身高&nbsp&nbsp&nbsp&nbspcm</td>
                        <td colspan="2" style="width: 90px;">体重&nbsp&nbsp&nbsp&nbsp&nbspkg</td>
                        <td colspan="3" style="width: 110px;">心率&nbsp&nbsp&nbsp&nbsp次/分</td>
                        <td colspan="3" style="width: 80px;">血压&nbsp&nbsp&nbsp&nbspmmHg</td>
                    </tr>
                    <tr>
                        <td colspan="1">发育</td>
                        <td colspan="3"></td>
                        <td colspan="1">营养</td>
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="10">头颈部&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp甲状腺&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp淋巴腺</td>
                    </tr>
                    <tr>
                        <td colspan="1">胸部</td>
                        <td colspan="8"></td>
                    </tr>
                    <tr>
                        <td colspan="2">心脏,血管</td>
                        <td colspan="5"></td>
                        <th colspan="2" rowspan="5" style="text-align: left;">医生意见:<br><br><br><br>签名:</th>
                    </tr>
                    <tr>
                        <td colspan="2">肺</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr>
                        <td colspan="2">腹部</td>
                        <td colspan="5">脾肝</td>
                    </tr>
                    <tr>
                        <td colspan="2">神经系统</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr>
                        <td colspan="2">其他</td>
                        <td colspan="5"></td>
                    </tr>
                    <tr>
                        <th rowspan="9">五<br>官<br>科</th>
                        <tr>
                            <th rowspan="3">视<br>力</th>
                            <tr>
                                <td colspan="2">裸<br>视</td>
                                <td colspan="2">左<br>右</td>
                                <td colspan="2">沙<br>眼</td>
                                <th colspan="2" rowspan="7" style="text-align: left;">医师意见:<br><br><br><br><br><br><br><br><br>签名:</th>
                            </tr>
                            <tr>
                                <td>矫<br>正<br>视<br>力</td>
                                <td colspan="1">左<br>右</td>
                                <td colspan="2">分<br>辨<br>力</td>
                                <td colspan="2" style="text-align: center;">正常<br>色音<br>色弱</td>
                            </tr>
                        </tr>
                        <tr>
                            <th rowspan="2">耳</th>
                            <tr>
                                <td>听<br>力</td>
                                <td colspan="1">左<br>右</td>
                                <td colspan="2">耳<br>疾</td>
                                <td colspan="2"></td>
                            </tr>
                        </tr>
                        <tr>
                            <th rowspan="2">鼻</th>
                            <tr>
                                <td colspan="2"></td>
                                <td colspan="2">喉</td>
                                <td colspan="5"></td>
                            </tr>
                        </tr>
                        <tr>
                            <td style="text-align: center;">口腔</td>
                            <td colspan="2"></td>
                            <td colspan="2">齿</td>
                                <td colspan="5"></td>
                        </tr>




                    </tr>
                    <tr>
                        <th rowspan="5">外<br>科</th>
                        <tr>
                            <td colspan="1" style="font-size: 10px;">脊柱和四肢</td>
                            <td colspan="6"></td>
                            <th colspan="2" rowspan="4" style="text-align: left;">医师意见:<br><br><br><br>签名:</th>
                        </tr>
                        <tr>
                            <td colspan="1" style="font-size: 10px;">肛门和外生殖器官</td>
                            <td colspan="6"></td>
                        </tr>
                        <tr>
                            <td colspan="1" style="font-size: 10px;">皮肤疾患</td>
                            <td colspan="6"></td>
                        </tr>
                        <tr>
                            <td colspan="1" style="font-size: 10px;">其他</td>
                            <td colspan="6"></td>
                        </tr>
                    </tr>
                </tr>
                <tr>
                    <th>实<br>验<br>室<br>检<br>查</th>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>X<br>光</th>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>心<br>电<br>图</th>
                    <td colspan="10"></td>
                </tr>
                <tr>
                    <th>结<br><br>论</th>
                    <td colspan="10"><br>
                    <br>
                    <br>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp年&nbsp&nbsp月&nbsp&nbsp日&nbsp&nbsp&nbsp&nbsp&nbsp医务主管签名:
                    </td>
                </tr>








            </table>
        </div>
    </div>
</body>
</html>
效果图

练习二

<!-- 作者:landaiqing

时间:2023-3-2

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习</title>
    <style>
         body{
            font-family: 楷体
        }
        #all{
            /* background-color: aquamarine; */
            width: 500px;
            height: 800px;
            margin: auto;
            display:flex;
            align-items:center;
        }
        .top {
            /* background-color: aqua; */
            width: 230px;
            height: 50px;
            top: 0;
            left: 0;
            right: 0;
            /* bottom: 0; */
            margin: auto;
            position: absolute;
            text-align: center;


        }
        table {
            border-collapse: collapse;
            border: 1px solid #000;
            /* table-layout: fixed; */
            width: 100%;
            /* overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; */


        }
        .tables{
            top: 50px;
            /* top: 50px;
            left: 350px;
            right: 0;
            bottom: 0; */
            margin:0, auto;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="all">
        <div class="top">
            <font size="6">个人简历</font>
        </div>
        <div class="tables">
            <table border="1">
                <tr>
                    <th style="width: 80px;">姓名</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <th style="width: 80px;">性别</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <td rowspan="5" style="width: 125px;"></td>
                </tr>
                <tr>
                    <th style="width: 80px;">出生年月</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <th style="width: 80px;">身高</th>
                    <th style="width: 100px;height: 40px;"></th>
                </tr>
                <tr>
                    <th style="width: 80px;">籍贯</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <th style="width: 80px;">民族</th>
                    <th style="width: 100px;height: 40px;"></th>
                </tr>
                <tr>
                    <th style="width: 80px;">政治面貌</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <th style="width: 80px;">毕业院校</th>
                    <th style="width: 100px;height: 40px;"></th>
                </tr>
                <tr>
                    <th style="width: 80px;">学历</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <th style="width: 80px;">专业</th>
                    <th style="width: 100px;height: 40px;"></th>
                </tr>
                <tr>
                    <th style="width: 80px;">联系电话</th>
                    <th style="width: 100px;height: 40px;"></th>
                    <th style="width: 80px;">电子邮件</th>
                    <th style="width: 100px;height: 40px;" colspan="2"></th>
                </tr>
                <tr>
                    <th style="width: 80px;height: 100px;">具备技能</th>
                    <th style="width: 100px;height: 40px;" colspan="4"></th>
                </tr>
                <tr>
                    <th style="width: 80px;height: 100px;">个人评价</th>
                    <th style="width: 100px;height: 40px;" colspan="4"></th>
                </tr>
                <tr>
                    <th style="width: 80px;height: 50px;">爱好特长</th>
                    <th style="width: 100px;height: 40px;" colspan="4"></th>
                </tr>
                <tr>
                    <th style="width: 80px;height: 50px;">实习经历</th>
                    <th style="width: 100px;height: 40px;" colspan="4"></th>
                </tr>
            </table>
        </div>
    </div>


</body>
</html>
效果图

练习三

<!-- 作者:landaiqing
时间:2023.3.3
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习3</title>
    <style>
         body{
            font-family: 楷体
        }
        #main {
            width: 600px;
            height: 750px;
            margin: auto;
            display:flex;
            align-items:center;
            /* background-color: aliceblue; */
            border: 1px solid black;
        }
        #all{
            /* background-color: aquamarine; */
            width: 500px;
            height: 700px;
            margin: auto;
            display:flex;
            align-items:center;
        }
        .top {
            /* background-color: aqua; */
            width: 250px;
            height: 70px;
            top: 0;
            left: 0;
            right: 0;
            /* bottom: 0; */
            margin: auto;
            position: absolute;
            text-align: center;


        }
        table {
            border-collapse: collapse;
            border: 1px solid #ff0000;
            top: 1px;
            width: 100%;
            margin:0, auto;
            position: absolute;


        }
        .tables{
            /* background-color: gray; */
            height: 600px;
            width: 500px;
            top: 100px;
            margin:0, auto;
            position: absolute;
            border: 2px solid red;
        }
        .table_2{
            margin:0, auto;
            position: absolute;
            top: 52px;
            text-align: left;
        }
        .table_3{
            margin:0, auto;
            position: absolute;
            top: 209px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            width: 166.6px;
        }
        .table_4{
            margin:0, auto;
            position: absolute;
            top: 209px;
            left: 166.6px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            width: 166.6px;
        }
        .table_5{
            margin:0, auto;
            position: absolute;
            top: 209px;
            left: 333.2px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            width: 167px;
        }
        .table_6{
            margin:0, auto;
            position: absolute;
            top: 300px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            width: 210px;
        }
        .table_7{
            margin:0, auto;
            position: absolute;
            top: 300px;
            left: 210px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            width: 140px;
        }
        .table_8{
            margin:0, auto;
            position: absolute;
            top: 300px;
            left: 350px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            width: 150px;
        }
        .table_9{
            margin:0, auto;
            position: absolute;
            top: 450px;
            text-align: center;
            color: red;
            border: 1.5px solid red;
            height: 149px;
        }




    </style>
</head>
<body>
<div id="main">
    <div id="all">
        <div class="top">
            <font size="6"><h4 style="color: red;">账簿使用登记表<h4></font>
        </div>
        <div class="tables">
            <table border="1" class="table_1">
                <tr>
                    <th style="width: 130px; color: red; font-size: 20px;">单位名称</th>
                    <th style="width: 363px;height: 50px;">呼伦贝尔安泰基电有限责任公司东海拉尔发电厂</th>
                </tr>
            </table>
            <table border="1" class="table_2">
                <tr>
                    <td rowspan="5" style="width: 40px;text-align: center;color: red;font-size: 20px;">本<br><br>账<br><br>簿</td>
                    <tr>
                        <th style="width: 87.5px;text-align: center;color: red; height: 30px;" >名称</th>
                        <th>银行存款</th>
                    </tr>
                    <tr>
                        <th style="text-align: center;color: red;height: 30px;">景次</th>
                        <th style="color: red;">第<span style="color: black;">&nbsp&nbsp二&nbsp&nbsp</span>景</th>
                    </tr>
                    <tr>
                        <th style="text-align: center;color: red;height: 30px;">页数</th>
                        <th style="color: red;">第<span style="color: black;">&nbsp0012&nbsp</span>号至第<span style="color: black;">&nbsp0126&nbsp</span>号共计<span style="color: black;">&nbsp&nbsp115&nbsp&nbsp</span>页</th>
                    </tr>
                    <tr>
                        <th style="text-align: center;color: red;">使用起<br>始日期</th>
                        <th style="color: red;">自&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">1</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">1</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp起<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">2019</span>&nbsp&nbsp&nbsp&nbsp年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp月&nbsp&nbsp&nbsp&nbsp&nbsp日<br>至&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">12</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">31</span>&nbsp&nbsp&nbsp&nbsp&nbsp止</th>
                    </tr>
                </tr>
            </table>


            <table border="1" class="table_3">
                <tr>
                    <th style="width: 166.6px;" colspan="2">单 位 负 责</th>
                    <tr>
                        <th style="width: 110px;">姓 &nbsp名</th>
                        <th>盖章</th>
                    </tr>
                    <tr>
                        <th style="height: 45px;"></th>
                        <th></th>
                    </tr>
                </tr>
            </table>
            <table border="1" class="table_4">
                <tr>
                    <th style="width: 166.6px;" colspan="2">主 管 会 计</th>
                    <tr>
                        <th style="width: 110px;">姓 &nbsp名</th>
                        <th>盖 章</th>
                    </tr>
                    <tr>
                        <th style="height: 45px;"></th>
                        <th></th>
                    </tr>
                </tr>
            </table>
            <table border="1" class="table_5">
                <tr>
                    <th style="width: 166.6px;" colspan="2">记 &nbsp&nbsp&nbsp账</th>
                    <tr>
                        <th style="width: 110px;">姓 &nbsp名</th>
                        <th>盖 章</th>
                    </tr>
                    <tr>
                        <th style="height: 45px;"></th>
                        <th></th>
                    </tr>
                </tr>
            </table>
            <table border="1" class="table_6">
                <tr>
                    <td rowspan="6" style="width: 30px;">签<br>管<br>人<br>员<br>楼<br>交<br>记<br>录</td>
                </tr>
                <tr>
                    <th style="height: 40px;width: 40px;">职别</th>
                    <th>姓 名</th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                </tr>


            </table>
            <table border="1" class="table_7">
                <tr>
                    <th colspan="4">楼 &nbsp&nbsp管</th>
                </tr>
                <tr>
                    <th style="width: 35px;">年</th>
                    <th>月</th>
                    <th>日</th>
                    <th>盖章</th>
                </tr>
                <tr>
                    <th style="height: 24px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th style="height: 24px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th style="height: 24px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th style="height: 25px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </table>
            <table border="1" class="table_8">
                <tr>
                    <th colspan="4">交 &nbsp&nbsp出</th>
                </tr>
                <tr>
                    <th style="width: 35px;">年</th>
                    <th>月</th>
                    <th>日</th>
                    <th>盖章</th>
                </tr>
                <tr>
                    <th style="height: 24px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th style="height: 24px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th style="height: 24px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th style="height: 25px;"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </table>
            <table border="1" class="table_9">
                <tr>
                    <td style="width: 30px;">备<br><br><br>注</td>
                    <th style="width: 265px;"></th>
                    <td style="width: 30px;">单<br><br>位<br><br>公<br><br>章</td>
                    <th></th>
                </tr>




            </table>
        </div>
    </div>
</div>
</body>
</html>
效果图

代码文件下载

阅读剩余
版权声明 1 本 网 站 名 称：QingYu
2 本站永久网址：https://landaiqing.space
3 当前文章标题：HTML-表格练习
4 当前文章网址：https://landaiqing.space/188.html
5 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
7 如您发现本站提供资源链接失效，请联系我们处理。
THE END
CSSHTMLhtml 表格原创
阅后即焚的网站，高隐私，读完自动销毁
<<上一篇
一个付费接码平台合辑
下一篇>>
相关推荐
Vue学习笔记(1)-ElementUI表头自适应
基于jQuery的AJAX实现三级联动菜单
jQuery-表单验证插件~
Flex布局学习&Fex对角线布局
HTML-Flex布局练习之仿写开源中国首页静态页面
HTML-表格练习

QingYu - 清语,一个不轻语的网站~

本站已运行 天
本站由蓝易云安全提供高防CDN安全防护和加速服务