表格的练习

最新推荐文章于 2023-06-13 14:38:08 发布

易de

最新推荐文章于 2023-06-13 14:38:08 发布

阅读量151

点赞数 1

分类专栏： H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/107675714

版权

H5 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

52 篇文章 0 订阅

订阅专栏

表格的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目增补单</title>
</head>
<body>
    <table border="1" cellspacing="0" align="center" >
        <caption><h2>项目增补单</h2></caption>
        <tr align="center" heigh="30">
            <th width="70">序号</th>
            <th width="200">维修项目及更换配件</th>
            <th width="70">单价</th>
            <th width="70">数量</th>
            <th width="70">小时</th>
            <th width="70">工时费</th>
            <th width="70">合计</th>
            <th width="100">故障原因</th>
        </tr>
        <tr align="center" height="30">
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" height="30">
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" height="30">
            <td>3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" height="30">
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" height="30">
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" height="30">
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" >
            <td rowspan="4">7</td>
            <td height="30"></td>
            <td colspan="2" rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td></td>           
        </tr>
        <tr align="center">
            <td height="30"></td>
            <td></td>           
        </tr>
        <tr align="center">         
            <td height="30"></td>        
            <td></td>           
        </tr>
        <tr align="center">            
            <td height="30"></td>           
            <td></td>           
        </tr>
        <tr  height="30">
            <td  colspan="2">备件费用小计：</td>            
            <td colspan="5">工时费用小计：</td>           
            <td>合计：</td>            
        </tr>    
    </table>
</body>
</dtdtml>

效果

在这里插入图片描述

这里要注意行和列同时合并的情况，最好先把所有的行和列都写出来，然后在合并行和合并列的时候，在对应的td标签内添加相应的rowspan和colspan，添加一个rowspan就把对应的行都删除了，添加一个colspan就把对应的列都删除了，这样不容易出错。

易de

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的练习

表格的练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>项目增补单</title></head><body> <table
复制链接

扫一扫