HTML表格制作_html怎么建立表格-程序员宅基地

技术标签: 前端  HTML表格  

HTML中制作表格有两种方法:

(1)先把最原始的表格画出来,每一个都是单个单元格,然后再根据要求进行行合并或列合并,有的表格需要行列都合并,则也是把它分为两步做,先合并行再合并列(或者先合并列再合并行),若进行了colspan和rowspan的合并,则将之后同一行或同一列的单元格删除,但这种方法较麻烦,容易搞混。

(2)直接根据最终要生成的表格来操作,将每个合并的单元格看做一个小的单元格,不再将它拆分,然后一行一行的写表格,遇到合并的单元格直接写出colspan或rowspan,下面若遇到已经用过的合并的单元格,则不再将其算到内,只看还剩多少单元格。这种方法一行一行的写,不用再去删单元格,比较清晰。

以下为制作的一个简单表格及其代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<h3 align="center">项目增补单</h3>
<table border="1" height="500" width="1000" cellspacing="0" align="center">
	<tr align="center">
    	<td>序号</td>
        <td>维修项目及更换配件</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>工时费</td>
        <td>合计</td>
        <td>故障原因</td>
    </tr>
    <tr align="center">
    	<td>1</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>2</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>3</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>4</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<td>5</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
    	<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></td>
        <td colspan="2" rowspan="4"></td>
        <td rowspan="4"></td>
        <td rowspan="4"></td>
        <td rowspan="4"></td>
        <td rowspan="4"></td>
    </tr>
    <tr align="center">
    	<td></td>
    </tr>
    <tr align="center">
    	<td></td>
    </tr>
    <tr align="center">
    	<td></td>
    </tr>
    <tr >
    	<td colspan="2">备件费用小计:</td>
        <td colspan="5">工时费用小计:</td>
        <td>合计:</td>
    </tr>
    
</table>
<table height="50" width="900" align="center">
	<tr>
		<td>班组长:</td>
        <td>技术部:</td>
        <td>服务顾问:</td>
        <td>客户确认:</td>
	</tr>
</table>
<body>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wulianwangxuchenqi/article/details/91465602

智能推荐

linux截取指定行数范围内的内容-程序员宅基地

文章浏览阅读2.8k次。需求:linux下对文件按照行数进行切割实现:sed -n '10,100p' logfile.txt &gt; lognew.txt 摘自:http://www.xhuojia.com/zhuanlan/1891238847.html_linux获取指定行数之间的行

阿里云的视频点播_saas系统计算视频播放的流量-程序员宅基地

文章浏览阅读317次。开通视频点播,点击按流量计费<f/ont>_saas系统计算视频播放的流量

【文献阅读】A2-Nets: Double Attention Networks-程序员宅基地

文章浏览阅读4.2k次,点赞6次,收藏23次。原文链接:https://arxiv.org/abs/1810.11579学习捕获长距离关系是图像/视频识别的基础。现有的CNN模型一般依赖于增加深度来对这种关系进行建模,效率非常低。作者提出了“双注意力块”,这是一种新的组件,它从输入图像/视频的整个时空空间中聚集和传播信息的全局特征,使后续的卷积层能够有效地从整个空间访问特征。该组件设计为两步双注意机制,第一步通过二级注意池将整个空间的特..._double attention networks

Mybatis学习(一)Mybatis简介、编写第一个Mybatis程序_11235813程序-程序员宅基地

文章浏览阅读284次。一、Mybatis 简介1、什么是MyBatis?官网地址MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息。Maven仓库获得Mybatis:<!-- https://mvnrepository...._11235813程序

火车进站—ACM_火车进站算法-程序员宅基地

文章浏览阅读769次。题目描述给定一个正整数N代表火车数量,0<N<10,接下来输入火车入站的序列,一共N辆火车,每辆火车以数字1-9编号。要求以字典序排序输出火车出站的序列号。输入描述:有多组测试用例,每一组第一行输入一个正整数N(0<N<10),第二行包括N个正整数,范围为1到9。输出描述:输出以字典序从小到大排序的火车出站序列号,每个编号以空格隔开,每个输出序列换行,..._火车进站算法

ssm框架的搭建_myeclipse里面ssm框架xml文件里面的快捷键怎么配置-程序员宅基地

文章浏览阅读606次。1. 新建web project项目,记得勾选xml配置文件。使用MyBatis生成entity层和dao层,生成方法之前的mybatis使用环境配置中有提到过。放到src目录下,并创建service和controller层的包。2. 安装spring,注意勾选持久化层3. 配置spmvc-servlet.xml(在web-inf下面新建spring,勾选aop,p..._myeclipse里面ssm框架xml文件里面的快捷键怎么配置

随便推点

POJ 3041 匈牙利算法_poj匈牙利算法-程序员宅基地

文章浏览阅读117次。大致题意N * N 的格子上有 K 颗行星,Bessie 有把大威力武器,一次可以消灭某一行或列的行星。求武器的最少使用次数。1 <= N <= 500, 1 <= K <= 10,000坐标为 (x, y) 的点看做 x 指向 y 的一条边,问题就化为 x∈V, y∈U 的二分图匹配问题。求覆盖所有点的最小使用次数,即求覆盖所有边的最小点数。根据 Konig 定理,最..._poj匈牙利算法

集群服务器分布式iis_windows+nginx+iis+redis+Task.MainForm构建分布式架构 之 (nginx+iis构建服务集群)...-程序员宅基地

文章浏览阅读106次。本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,由标题就能看出此内容不是一篇分享文章能说完的,所以我打算分几篇分享文章来讲解,一步一步实现分布式架构;下面将先给出整个架构的核心节点简介,希望各位多多点赞:. 架构设计图展示.nginx+iis构建服务集群. redis存储分布式共享的session及共享session运作流程. redi..._nginx+redis+iis

python病毒代码大全_python病毒 - osc_bx0x099p的个人空间 - OSCHINA - 中文开源技术交流社区...-程序员宅基地

文章浏览阅读4.2k次。介绍源码分为3个部分1、搜索,搜寻所有的python脚本2、取出当前文件的前39行,也就是这个脚本的长度,然后将这个脚本写道所有找到的python脚本中去3、其他行为#!/usr/bin/pythonimport osimport datetimeSIGNATURE = "CRANKLIN PYTHON VIRUS"def search(path):filestoinfect = []fileli...

进程通信之信号通信_进程间通信信号的具体步骤-程序员宅基地

文章浏览阅读533次。信号通信信号通信其实就是内核向用户空间进程发送信号,只有内核才能发信号,用户空间进程不能发送信号。信号在内核中已经存在,并且在内核中有很多信号。信号通信的框架l 信号的发送(发送信号进程):kill raise alarml 信号的接收(接收信号进程) : pause() sleep while(1)l 信号的处理(接收信号进程) : signal用命令kill -l 查看内核中有多少信号CLC@Embed_Learn:~$ kill -l 1) SIGHUP 2) SIGIN_进程间通信信号的具体步骤

基于SpringBoot+Vue的乡政府管理系统的设计与实现-程序员宅基地

文章浏览阅读1.3k次,点赞44次,收藏49次。功能对照表的目的是帮助开发团队了解软件的功能状况,及时修复功能缺陷和错误,并提高软件的质量和稳定性。功能编号功能名称功能描述功能状态备注1用户登录用户可以通过提供用户名和密码登录系统正常用户名和密码的验证机制安全性2用户注册用户可以通过提供用户名、密码和电子邮件地址注册新的账户正常无3密码修改用户可以通过提供原密码和新密码修改已有账户的密码正常用户密码的修改操作是否需要提供安全认证4用户信息查看用户可以查看自己的个人信息,如用户名、电子邮件地址、角色等正常无。

sentinel基础原理_sentinel 原理-程序员宅基地

文章浏览阅读1.1k次。来自杨三超wiki1、Sentinel是什么Sentinel 是面向分布式服务架构的轻量级流量控制框架,主要以流量为切入点,从流量控制、熔断降级、系统负载保护等多个维度来帮助您保护服务的稳定性。github:https://github.com/alibaba/Sentinelstar:7000+2、特点丰富的应用场景:Sentinel 承接了阿里巴巴近 10 年的双十一大..._sentinel 原理

推荐文章

热门文章

相关标签