利用HTML自制电子表

最新推荐文章于 2023-10-21 11:38:05 发布

小苏(º﹃º )

最新推荐文章于 2023-10-21 11:38:05 发布

阅读量375

点赞数

分类专栏： HTTP 文章标签： html

本文链接：https://blog.csdn.net/qq_45850095/article/details/115288138

版权

HTTP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用HTML自制电子表

表格
实现：建筑消防设施维护保养记录表

在生活中，我们会经常遇到各种需要填写的表格，除了利用Word和Excel制作表格外，我们可不可以利用代码来实现表格的制作呢？
答案是：可以。

下面我来介绍表格的作用和一些属性。

表格

作用：按照一定的顺序（格式）摆放数据
组成：行和单元格
创建表格：
table 表格
tr 行
td 单元格

表格属性

table的属性
align 水平位置：居左left 居右right 居中center
width 宽度
height 高度
border 边框
cellspacing 单元格和单元格之间的距离
cellpadding 单元格边框和内容之间的距离
bgcolor 背景颜色

行属性

tr的属性
bgcolor 一行的背景颜色
align 内容的水平位置
valign 内容的垂直位置 top middle bottom
height 一行的高度

单元格属性

td的属性
width 一个单元格的宽度
height 一行的高度
align 当前单元格的内容的水平位置
valign 当前单元格的内容的垂直位置 top middle bottom
bgcolor 当前单元格的背景颜色表格的合并
1.跨列合并 colspan
2.跨行合并 rowspan

实现：建筑消防设施维护保养记录表

代码实现：

<!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>Document</title>
</head>
<body>
    <h2 align="center">表 E.2  &emsp;&emsp;&emsp;&emsp;建筑消防设施维护保养记录表</h2>
<p align="right">  序号：  &emsp;&emsp; 
    &emsp;&emsp;&emsp;&emsp;日期：&emsp;&emsp;&emsp;&emsp;
      &emsp;&emsp;  &emsp;&emsp;&emsp;&emsp;</p>

<!-- 表格 -->
<table align="center" valign="middle" border="1"
 width="1100" height="560" cellspacing="0">
    <tr align="center" valign="middle">
        <td rowspan="2" width="300">设备名称</td>
        <td rowspan="2" width="300">消防泵</td>
        <td width="300">设备参数</td>
        <td width="300"></td>
    </tr >
    <tr align="center" valign="middle">
    
        <td>额定功率</td>
        <td></td>
    </tr>
    <!-- 3 -->
    <tr>
        <td>保养项目</td>
        <td colspan="3" align="center" valign="middle">保养完成情况</td>
    
    </tr>
    <tr>
        <td>擦洗,除污</td>
        <td colspan="3"></td>
        
    </tr>
    <!-- 5 -->
    <tr>
        <td>长期不用时,定期盘动</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>测试,检查,紧固</td>
        <td colspan="3"></td>
    </tr>
    <!-- 7 -->
    <tr>
        <td>检查或更换盘根填料</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>加零号黄油</td>
        <td colspan="3"></td>
    </tr>
    <!-- 9 -->
    <tr>
        <td colspan="4" height="200">备注:</td>
       
    </tr>
    <tr>
        <td colspan="4"  > 
            <br>
            &emsp;&emsp; 保养作业完成后，保养人员或单位应如实填写保养完成情况，并作相应功能试验，遇有故障应及时填写《建筑消防设施故障维修记录表》（见表
            <br>&emsp;&emsp;b.1）。
             注：本表为样表，单位可根据制定的建筑消防设施维护保养计划表确定的保养内容分别制表 </td>
            <br>
    </tr>
</table>

<p>
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    消防安全责任人或消防安全管理人（签字）：
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    保养人：
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
     审核人：
 </p>
</body>
</html>

制作表格时需注意事项：

1.注意单元格与单元格之间的合并
2.注意文字的大小，颜色
3.注意文字之间的对齐

效果图

效果如图所示：（将上方代码复制到txt文档中，将后缀名改为HTML即可实现下表）

在这里插入图片描述

小苏(º﹃º )

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用HTML自制电子表

利用HTML自制电子表表格表格属性行属性单元格属性实现：建筑消防设施维护保养记录表代码实现：制作表格时需注意事项：效果图在生活中，我们会经常遇到各种需要填写的表格，除了利用Word和Excel制作表格外，我们可不可以利用代码来实现表格的制作呢？答案是：可以。下面我来介绍表格的作用和一些属性。表格作用：按照一定的顺序（格式）摆放数据组成：行和单元格创建表格：table 表格tr 行td 单元格表格属性table的属性align 水平
复制链接

扫一扫